Giống như nhiều người khác, tôi đã gặp phải nhiều vấn đề khi cố gắng thực hiện điều này và chỉ một sự kết hợp của các giải pháp được đăng, và cuối cùng là một vụ hack lớn để làm cho nó hoàn hảo, đã mang lại cho tôi một giải pháp.
Các vấn đề với các giải pháp khác trong chủ đề này mà tôi đã thử:
- Chọn một ngày mới trong một người hẹn hò, cũng sẽ thay đổi ngày (nội bộ) của những người hẹn hò khác, vì vậy khi bạn mở lại những ngày khác (hoặc đã cố lấy ngày của họ), họ sẽ có một ngày khác với ngày được hiển thị trong đầu vào được chỉ định của họ -cánh đồng.
- Datepicker sẽ không "nhớ" ngày khi được mở lại.
- Mã để tung hứng các ngày được sử dụng nền tảng để nó không tương thích với tất cả các định dạng.
- "Mypickicker" chỉ thay đổi trường đầu vào khi đóng nó, thay vì bất cứ khi nào các giá trị được thay đổi.
- Trường đầu vào không được cập nhật chính xác, nếu bạn nhập chuỗi đầu vào được định dạng sai cho một ngày, sau đó bấm 'Đóng' trên công cụ hẹn hò.
- Tôi không thể có các bộ đếm ngày bình thường, hiển thị các ngày, trên cùng một trang với các bộ đếm ngày, không hiển thị các ngày.
Cuối cùng tôi đã tìm ra cách khắc phục tất cả những vấn đề này . Bốn cái đầu tiên có thể được sửa một cách đơn giản bằng cách cẩn thận về cách bạn tham chiếu ngày và tháng của bạn trong mã nội bộ của họ, và tất nhiên là thực hiện một số cập nhật thủ công các công cụ chọn của bạn. Điều này bạn có thể thấy trong các ví dụ khởi tạo gần phía dưới. Vấn đề thứ năm có thể được giúp đỡ bằng cách thêm một số mã tùy chỉnh vào các hàm datepicker.
LƯU Ý: Bạn KHÔNG cần phải sử dụng các tập lệnh tháng tháng sau để khắc phục ba vấn đề đầu tiên trong công cụ hẹn hò thông thường của bạn. Đơn giản chỉ cần sử dụng tập lệnh khởi tạo datepicker gần cuối bài này.
Bây giờ, để sử dụng công cụ quét tháng và khắc phục sự cố cuối cùng, chúng ta cần tách riêng các công cụ hẹn giờ và công cụ kiểm tra tháng. Chúng ta có thể nhận được một trong số ít addonicker jQuery-UI ngoài kia, nhưng một số thiếu tính linh hoạt / khả năng bản địa hóa, một số thiếu hỗ trợ hoạt hình ... vậy, phải làm sao? Cuộn "của riêng bạn" từ mã ngày tháng! Điều này mang lại cho bạn một công cụ tìm kiếm đầy đủ chức năng, với tất cả các chức năng của công cụ hẹn hò, mà không cần hiển thị ngày.
Tôi đã cung cấp một monthpicker js-kịch bản và đi kèm CSS-kịch bản , sử dụng phương pháp mô tả dưới đây, với mã v1.11.1 jQuery-UI. Chỉ cần sao chép các đoạn mã này vào hai tệp mới, tương ứng là thángpicker.js và thángpicker.css.
Nếu bạn muốn đọc về quy trình khá đơn giản, qua đó tôi đã chuyển đổi công cụ hẹn hò thành công cụ tìm tháng, hãy cuộn xuống phần cuối cùng.
Bây giờ để thêm các dấu ngày và tháng tháng vào trang!
Các đoạn mã javascript sau đây hoạt động với nhiều mã ngày và / hoặc mã vạch trên trang, mà không gặp phải các vấn đề đã nói ở trên! Đã sửa lỗi bằng cách sử dụng '$ (cái này).' rất nhiều :)
Kịch bản đầu tiên dành cho một người hẹn hò bình thường, và kịch bản thứ hai dành cho những người khai thác "mới".
Các out-nhận xét .Sau , cho phép bạn tạo ra một số yếu tố để xóa các đầu vào trường, bị đánh cắp từ câu trả lời Paul Richards'.
Tôi đang sử dụng định dạng "MM yy" trong tháng của mình và định dạng 'yy-mm-dd' trong công cụ hẹn hò của tôi, nhưng điều này hoàn toàn tương thích với tất cả các định dạng , vì vậy bạn có thể tự do sử dụng bất kỳ định dạng nào bạn muốn. Chỉ cần thay đổi tùy chọn 'dateFormat'. Các tùy chọn tiêu chuẩn 'showButtonPanel', 'showAnim' và 'yearRange' tất nhiên là tùy chọn và tùy chỉnh theo mong muốn của bạn.
Thêm một người hẹn hò
Khởi tạo ngày tháng.
Điều này đi từ 90 năm trước và cho đến ngày nay. Nó giúp bạn giữ trường đầu vào chính xác, đặc biệt nếu bạn đặt các tùy chọn defaultDate, minDate và maxDate, nhưng nó có thể xử lý nó nếu bạn không. Nó sẽ hoạt động với bất kỳ dateFormat nào bạn chọn.
$('#MyDateTextBox').datepicker({
dateFormat: 'yy-mm-dd',
changeMonth: true,
changeYear: true,
showButtonPanel: true,
showMonthAfterYear: true,
showWeek: true,
showAnim: "drop",
constrainInput: true,
yearRange: "-90:",
minDate: new Date((new Date().getFullYear() - 90), new Date().getMonth(), new Date().getDate()),
maxDate: new Date(new Date().getFullYear(), new Date().getMonth(), new Date().getDate()),
defaultDate: new Date(new Date().getFullYear(), new Date().getMonth(), new Date().getDate()),
onClose: function (dateText, inst) {
// When onClose is called after we have clicked a day (and not clicked 'Close' or outside the datepicker), the input-field is automatically
// updated with a valid date-string. They will always pass, because minDate and maxDate are already enforced by the datepicker UI.
// This try is to catch and handle the situations, where you open the datepicker, and manually type in an invalid date in the field,
// and then close the datepicker by clicking outside the datepicker, or click 'Close', in which case no validation takes place.
try {
// If datepicker can parse the date using our formatstring, the instance will automatically parse
// and apply it for us (after the onClose is done).
// If the input-string is invalid, 'parseDate' will throw an exception, and go to our catch.
// If the input-string is EMPTY, then 'parseDate' will NOT throw an exception, but simply return null!
var typedDate = $.datepicker.parseDate($(this).datepicker('option', 'dateFormat'), $(this).val());
// typedDate will be null if the entered string is empty. Throwing an exception will force the datepicker to
// reset to the last set default date.
// You may want to just leave the input-field empty, in which case you should replace 'throw "No date selected";' with 'return;'
if (typedDate == null)throw "No date selected";
// We do a manual check to see if the date is within minDate and maxDate, if they are defined.
// If all goes well, the default date is set to the new date, and datepicker will apply the date for us.
var minDate = $(this).datepicker("option", "minDate");
var maxDate = $(this).datepicker("option", "maxDate");
if (minDate !== null && typedDate < minDate) throw "Date is lower than minDate!";
if (maxDate !== null && typedDate > maxDate) throw "Date is higher than maxDate!";
// We update the default date, because the date seems valid.
// We do not need to manually update the input-field, as datepicker has already done this automatically.
$(this).datepicker('option', 'defaultDate', typedDate);
}
catch (err) {
console.log("onClose: " + err);
// Standard behavior is that datepicker does nothing to fix the value of the input field, until you choose
// a new valid date, by clicking on a day.
// Instead, we set the current date, as well as the value of the input-field, to the last selected (and
// accepted/validated) date from the datepicker, by getting its default date. This only works, because
// we manually change the default date of the datepicker whenever a new date is selected, in both 'beforeShow'
// and 'onClose'.
var date = $(this).datepicker('option', 'defaultDate');
$(this).val($.datepicker.formatDate($(this).datepicker('option', 'dateFormat'), date));
$(this).datepicker('setDate', date);
}
},
beforeShow: function (input, inst) {
// beforeShow is particularly irritating when initializing the input-field with a date-string.
// The date-string will be parsed, and used to set the currently selected date in the datepicker.
// BUT, if it is outside the scope of the minDate and maxDate, the text in the input-field is not
// automatically updated, only the internal selected date, until you choose a new date (or, because
// of our onClose function, whenever you click close or click outside the datepicker).
// We want the input-field to always show the date that is currently chosen in our datepicker,
// so we do some checks to see if it needs updating. This may not catch ALL cases, but these are
// the primary ones: invalid date-format; date is too early; date is too late.
try {
// If datepicker can parse the date using our formatstring, the instance will automatically parse
// and apply it for us (after the onClose is done).
// If the input-string is invalid, 'parseDate' will throw an exception, and go to our catch.
// If the input-string is EMPTY, then 'parseDate' will NOT throw an exception, but simply return null!
var typedDate = $.datepicker.parseDate($(this).datepicker('option', 'dateFormat'), $(this).val());
// typedDate will be null if the entered string is empty. Throwing an exception will force the datepicker to
// reset to the last set default date.
// You may want to just leave the input-field empty, in which case you should replace 'throw "No date selected";' with 'return;'
if (typedDate == null)throw "No date selected";
// We do a manual check to see if the date is within minDate and maxDate, if they are defined.
// If all goes well, the default date is set to the new date, and datepicker will apply the date for us.
var minDate = $(this).datepicker("option", "minDate");
var maxDate = $(this).datepicker("option", "maxDate");
if (minDate !== null && typedDate < minDate) throw "Date is lower than minDate!";
if (maxDate !== null && typedDate > maxDate) throw "Date is higher than maxDate!";
// We update the input-field, and the default date, because the date seems valid.
// We also manually update the input-field, as datepicker does not automatically do this when opened.
$(this).val($.datepicker.formatDate($(this).datepicker('option', 'dateFormat'), typedDate));
$(this).datepicker('option', 'defaultDate', typedDate);
}
catch (err) {
// Standard behavior is that datepicker does nothing to fix the value of the input field, until you choose
// a new valid date, by clicking on a day.
// We want the same behavior when opening the datepicker, so we set the current date, as well as the value
// of the input-field, to the last selected (and accepted/validated) date from the datepicker, by getting
// its default date. This only works, because we manually change the default date of the datepicker whenever
// a new date is selected, in both 'beforeShow' and 'onClose', AND have a default date set in the datepicker options.
var date = $(this).datepicker('option', 'defaultDate');
$(this).val($.datepicker.formatDate($(this).datepicker('option', 'dateFormat'), date));
$(this).datepicker('setDate', date);
}
}
})
//.after( // this makes a link labeled "clear" appear to the right of the input-field, which clears the text in it
// $("<a href='javascript: void(0);'>clear</a>").click(function() {
// $(this).prev().val('');
// })
//)
;
Thêm một tháng
Bao gồm tệp thángpicker.js và tệp thángpicker.css trong trang bạn muốn sử dụng các tháng.
Khởi tạo hàng
tháng Giá trị được lấy từ tháng này, luôn luôn là ngày đầu tiên của tháng được chọn. Bắt đầu từ tháng hiện tại, và dao động từ 100 năm trước và 10 năm trong tương lai.
$('#MyMonthTextBox').monthpicker({
dateFormat: 'MM yy',
changeMonth: true,
changeYear: true,
showMonthAfterYear: true,
showAnim: "drop",
constrainInput: true,
yearRange: "-100Y:+10Y",
minDate: new Date(new Date().getFullYear() - 100, new Date().getMonth(), 1),
maxDate: new Date((new Date().getFullYear() + 10), new Date().getMonth(), 1),
defaultDate: new Date(new Date().getFullYear(), new Date().getMonth(), 1),
// Monthpicker functions
onClose: function (dateText, inst) {
var date = new Date(inst.selectedYear, inst.selectedMonth, 1);
$(this).monthpicker('option', 'defaultDate', date);
$(this).monthpicker('setDate', date);
},
beforeShow: function (input, inst) {
if ($(this).monthpicker("getDate") !== null) {
// Making sure that the date set is the first of the month.
if($(this).monthpicker("getDate").getDate() !== 1){
var date = new Date(inst.selectedYear, inst.selectedMonth, 1);
$(this).monthpicker('option', 'defaultDate', date);
$(this).monthpicker('setDate', date);
}
} else {
// If the date is null, we reset it to the defaultDate. Make sure that the defaultDate is always set to the first of the month!
$(this).monthpicker('setDate', $(this).monthpicker('option', 'defaultDate'));
}
},
// Special monthpicker function!
onChangeMonthYear: function (year, month, inst) {
$(this).val($.monthpicker.formatDate($(this).monthpicker('option', 'dateFormat'), new Date(year, month - 1, 1)));
}
})
//.after( // this makes a link labeled "clear" appear to the right of the input-field, which clears the text in it
// $("<a href='javascript: void(0);'>clear</a>").click(function() {
// $(this).prev().val('');
// })
//)
;
Đó là nó!
Đó là tất cả những gì bạn cần để thực hiện một tháng.
Tôi dường như không thể làm cho một jsfiddle hoạt động với điều này, nhưng nó hoạt động với tôi trong dự án ASP.NET MVC của tôi. Chỉ cần làm những gì bạn thường làm để thêm một công cụ hẹn hò vào trang của bạn và kết hợp các tập lệnh ở trên, có thể bằng cách thay đổi bộ chọn (có nghĩa là $ ("# MyMonthTextBox")) thành thứ phù hợp với bạn.
Tôi hi vọng điêu nay se giup được ai đo.
Liên kết đến các pastebins cho một số thiết lập thêm ngày và tháng:
Tháng làm việc vào ngày cuối cùng của tháng . Ngày bạn nhận được từ tháng này sẽ luôn là ngày cuối cùng của tháng.
Hai tháng tháng hợp tác ; 'Bắt đầu' đang hoạt động vào đầu tháng và 'kết thúc' hoạt động vào cuối tháng. Cả hai đều bị hạn chế bởi nhau, vì vậy, chọn một tháng vào 'kết thúc' trước tháng được chọn vào 'bắt đầu', sẽ thay đổi 'bắt đầu' thành cùng một tháng với 'kết thúc'. Và ngược lại. TÙY CHỌN: Khi chọn một tháng vào 'bắt đầu', 'minDate' trên 'end' được đặt thành tháng đó. Để xóa tính năng này, hãy nhận xét một dòng trong onC Đóng (đọc các bình luận).
Hai người hẹn hò hợp tác ; Cả hai đều bị hạn chế bởi nhau, vì vậy, chọn một ngày vào 'kết thúc' trước ngày được chọn vào 'bắt đầu', sẽ thay đổi 'bắt đầu' thành cùng tháng với 'kết thúc'. Và ngược lại. TÙY CHỌN: Khi chọn một ngày vào 'bắt đầu', 'minDate' trên 'end' được đặt thành ngày đó. Để xóa tính năng này, hãy nhận xét một dòng trong onC Đóng (đọc các bình luận).
Cách tôi thay đổi DatePicker thành một YearPicker
Tôi đã lấy tất cả mã javascript từ jquery-ui-1.11.1.js liên quan đến công cụ hẹn hò của họ, dán nó vào tệp js mới và thay thế các chuỗi sau:
- "datepicker" ==> "tháng"
- "Datepicker" ==> "Datepicker"
- "công cụ chọn ngày" ==> "công cụ chọn tháng"
- "Công cụ chọn ngày" ==> "Công cụ chọn tháng"
Sau đó, tôi đã loại bỏ một phần của vòng lặp for tạo ra toàn bộ div ui-datepicker-calendar (div mà các giải pháp khác ẩn bằng CSS). Điều này có thể được tìm thấy trong _generateHTML: function (inst).
Tìm dòng có nội dung:
"</div><table class='ui-datepicker-calendar'><thead>" +
Đánh dấu mọi thứ từ sau thẻ div đóng và xuống (và không bao gồm) dòng có ghi:
drawMonth++;
Bây giờ nó sẽ không vui vì chúng ta cần phải đóng một số thứ. Sau khi đóng thẻ div từ trước đó, hãy thêm:
";
Các mã bây giờ nên được nối với nhau độc đáo. Đây là đoạn mã hiển thị những gì bạn nên kết thúc với:
...other code...
calender += "<div class='ui-monthpicker-header ui-widget-header ui-helper-clearfix" + cornerClass + "'>" +
(/all|left/.test(cornerClass) && row === 0 ? (isRTL ? next : prev) : "") +
(/all|right/.test(cornerClass) && row === 0 ? (isRTL ? prev : next) : "") +
this._generateMonthYearHeader(inst, drawMonth, drawYear, minDate, maxDate,
row > 0 || col > 0, monthNames, monthNamesShort) + // draw month headers
"</div>";
drawMonth++;
if (drawMonth > 11) {
drawMonth = 0;
drawYear++;
}
...other code...
Sau đó, tôi sao chép / dán mã từ jquery-ui.css liên quan đến bộ định ngày vào tệp CSS mới và thay thế các chuỗi sau:
