เหมือนคนอื่น ๆ ที่ผมเคยพบปัญหามากมายพยายามที่จะทำเช่นนี้และมีเพียงการรวมกันของการแก้ปัญหาที่โพสต์และในที่สุดก็สับขนาดใหญ่ที่จะทำให้มันสมบูรณ์แบบได้ที่ดินฉันวิธีการแก้ปัญหา
ปัญหาเกี่ยวกับการแก้ปัญหาอื่น ๆ ในหัวข้อนี้ที่ฉันได้ลอง:
- การเลือกวันที่ใหม่ใน datepicker ก็จะเปลี่ยนวันที่ (ภายใน) ของ datepickers อื่น ๆ ดังนั้นเมื่อคุณเปิดวันที่อื่นอีกครั้ง (หรือลองรับวันที่ของพวกเขา) พวกเขาจะมีวันที่แตกต่างจากที่แสดงในอินพุตที่กำหนด -field
- Datepicker จะไม่ "จำ" วันที่เมื่อเปิดอีกครั้ง
- รหัสสำหรับการเล่นกลวันที่ใช้การซับสตริงจึงไม่สามารถใช้งานได้กับทุกรูปแบบ
- "My monthpicker" เปลี่ยนเฉพาะช่องป้อนข้อมูลเมื่อปิดเท่านั้นไม่ใช่ทุกครั้งที่มีการเปลี่ยนแปลงค่า
- ฟิลด์อินพุตไม่ได้รับการอัปเดตอย่างถูกต้องหากคุณพิมพ์สตริงอินพุตในรูปแบบที่ไม่ถูกต้องสำหรับวันที่แล้วคลิก 'ปิด' บน datepicker
- ฉันไม่สามารถมี datepickers ปกติซึ่งแสดงวันที่ในหน้าเดียวกับ monthpickers ซึ่งไม่แสดงวันที่
ในที่สุดฉันก็พบวิธีแก้ไขปัญหาเหล่านี้ทั้งหมด สี่คนแรกสามารถแก้ไขได้ง่าย ๆ โดยระมัดระวังเกี่ยวกับวิธีที่คุณอ้างอิงวันที่และเดือนของคุณในรหัสภายในและแน่นอนว่าต้องทำการอัพเดทคู่มือตัวเลือกของคุณด้วยตนเอง สิ่งนี้คุณสามารถเห็นได้ในอินสแตนซ์ - ตัวอย่างใกล้ด้านล่าง ปัญหาที่ห้าสามารถช่วยได้โดยการเพิ่มรหัสที่กำหนดเองลงในฟังก์ชั่น datepicker
บันทึก:คุณไม่จำเป็นต้องใช้สคริปต์ monthpicker ต่อไปนี้เพื่อแก้ไขปัญหาสามข้อแรกใน datepicker ปกติของคุณ เพียงใช้สคริปต์อินสแตนซ์ datepicker ใกล้กับด้านล่างของโพสต์นี้
ตอนนี้หากต้องการใช้ monthpickers และแก้ไขปัญหาสุดท้ายเราจำเป็นต้องแยก Datepickers และ Monthpickers เราสามารถรับหนึ่งในไม่กี่ jQuery-UI ส่วนต่อเดือนของการต่อเติมที่นั่น แต่บางคนขาดความยืดหยุ่น / ความสามารถในการโลคัลไลซ์ชั่นบางคนขาดแอนิเมชันที่รองรับ ... ดังนั้นจะทำอย่างไร? สะสม "เจ้าของ" ของคุณจากรหัส datepicker! สิ่งนี้ทำให้คุณได้รับผลงานประจำเดือนอย่างเต็มที่โดยมีฟังก์ชั่นทั้งหมดของ datepicker เพียงแค่ไม่แสดงวัน
ฉันได้จัดทำjs-script monthpickerและCSS-script ที่มาพร้อมกันใช้งานร่วมกันโดยใช้วิธีการที่อธิบายไว้ด้านล่างด้วยรหัส jQuery-UI v1.11.1 เพียงคัดลอกตัวอย่างโค้ดเหล่านี้ไปยังไฟล์ใหม่สองไฟล์คือ monthpicker.js และ monthpicker.css ตามลำดับ
หากคุณต้องการอ่านเกี่ยวกับกระบวนการที่ค่อนข้างง่ายซึ่งฉันแปลง datepicker เป็น monthpicker ให้เลื่อนลงไปที่ส่วนสุดท้าย
ตอนนี้เพื่อเพิ่ม datepickers และ monthpickers ไปที่หน้า!
โค้ดต่อไปนี้จาวาสคริปต์ - โค้ดทำงานกับหลาย datepickers และ / หรือ monthpickers บนหน้าโดยไม่มีปัญหาดังกล่าว! แก้ไขโดยทั่วไปโดยใช้ '$ (สิ่งนี้)' มาก :)
สคริปต์แรกมีไว้สำหรับ datepicker ปกติและสคริปต์ที่สองสำหรับผู้สร้างรายเดือน "ใหม่"
คำติชมที่ออกมาหลังจากนั้นซึ่งช่วยให้คุณสร้างองค์ประกอบบางอย่างเพื่อล้างฟิลด์อินพุตนั้นถูกขโมยไปจากคำตอบของ Paul Richards
ฉันใช้รูปแบบ "MM yy" ใน monthpicker ของฉันและรูปแบบ 'yy-mm-dd' ใน datepicker ของฉัน แต่นี่เข้ากันได้อย่างสมบูรณ์กับทุกรูปแบบดังนั้นคุณมีอิสระที่จะใช้สิ่งที่คุณต้องการ เพียงเปลี่ยนตัวเลือก 'dateFormat' ตัวเลือกมาตรฐาน 'showButtonPanel', 'showAnim' และ 'yearRange' เป็นหลักสูตรเสริมและปรับแต่งตามความต้องการของคุณ
เพิ่ม datepicker
การเริ่มต้น Datepicker
หนึ่งนี้ไปจาก 90 ปีที่ผ่านมาและจนถึงปัจจุบัน ช่วยให้คุณรักษาฟิลด์อินพุตให้ถูกต้องโดยเฉพาะอย่างยิ่งหากคุณตั้งค่าตัวเลือก defaultDate, minDate และ maxDate แต่ก็สามารถจัดการได้หากคุณไม่ต้องการ มันจะทำงานกับ dateFormat ใด ๆ ที่คุณเลือก
$('#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('');
// })
//)
;
เพิ่ม monthpicker
รวมไฟล์ monthpicker.js และไฟล์ monthpicker.css ในหน้าที่คุณต้องการใช้ monthpickers
การสร้างอินสแตนซ์ Monthpicker
ค่าที่ดึงมาจาก monthpicker นี้จะเป็นวันแรกของเดือนที่เลือกเสมอ เริ่มต้นที่เดือนปัจจุบันและอยู่ในช่วง 100 ปีที่ผ่านมาและ 10 ปีในอนาคต
$('#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('');
// })
//)
;
แค่นั้นแหละ!
นั่นคือทั้งหมดที่คุณต้องทำแบบรายเดือน
ฉันไม่สามารถใช้ jsfiddle กับสิ่งนี้ได้ แต่มันใช้ได้สำหรับฉันในโครงการ ASP.NET MVC ของฉัน เพียงแค่ทำสิ่งที่คุณทำตามปกติเพื่อเพิ่ม datepicker ในหน้าของคุณและรวมสคริปต์ข้างต้นอาจโดยการเปลี่ยนตัวเลือก (หมายถึง $ ("# MyMonthTextBox")) เป็นสิ่งที่เหมาะกับคุณ
ฉันหวังว่านี่จะช่วยให้ใครบางคน
ลิงก์ไปที่ pastebins สำหรับการตั้งค่าวันที่และเดือนพิเศษบางรายการ:
Monthpicker ทำงานในวันสุดท้ายของเดือน วันที่คุณได้รับจาก monthpicker นี้จะเป็นวันสุดท้ายของเดือน
สอง monthpickers ร่วมมือ ; 'เริ่มต้น' กำลังทำงานในวันแรกของเดือนและ 'สิ้นสุด' กำลังทำงานในวันสุดท้ายของเดือน ทั้งคู่ถูก จำกัด ซึ่งกันและกันดังนั้นการเลือกเดือนใน 'สิ้นสุด' ซึ่งอยู่ก่อนเดือนที่เลือกใน 'เริ่ม' จะเปลี่ยน 'เริ่มต้น' เป็นเดือนเดียวกับ 'สิ้นสุด' และในทางกลับกัน. ตัวเลือก: เมื่อเลือกเดือนที่ 'เริ่มต้น' 'minDate' ที่ 'สิ้นสุด' จะถูกตั้งเป็นเดือนนั้น หากต้องการลบคุณลักษณะนี้ออกความคิดเห็นหนึ่งบรรทัดใน onClose (อ่านความคิดเห็น)
สอง datepickers ร่วมมือ ; ทั้งคู่ถูก จำกัด โดยกันและกันดังนั้นการเลือกวันที่ 'สิ้นสุด' ซึ่งอยู่ก่อนวันที่เลือกใน 'เริ่มต้น' จะเปลี่ยน 'เริ่มต้น' เป็นเดือนเดียวกับ 'สิ้นสุด' และในทางกลับกัน. ตัวเลือก: เมื่อเลือกวันที่ที่ 'เริ่มต้น' 'minDate' ที่ 'สิ้นสุด' ถูกตั้งค่าเป็นวันที่ หากต้องการลบคุณลักษณะนี้ออกความคิดเห็นหนึ่งบรรทัดใน onClose (อ่านความคิดเห็น)
ฉันเปลี่ยน DatePicker ให้กลายเป็น MonthPicker ได้อย่างไร
ฉันได้นำรหัสจาวาสคริปต์ทั้งหมดจาก jquery-ui-1.11.1.js ที่เกี่ยวข้องกับ datepicker ของพวกเขาวางลงใน js-file ใหม่และแทนที่สตริงต่อไปนี้:
- "datepicker" ==> "monthpicker"
- "Datepicker" ==> "Monthpicker"
- "ตัวเลือกวันที่" ==> "ตัวเลือกเดือน"
- "ตัวเลือกวันที่" ==> "ตัวเลือกเดือน"
จากนั้นฉันก็ลบส่วนหนึ่งของ for-loop ซึ่งสร้าง div ui-datepicker-calendar ทั้งหมด (div ซึ่งโซลูชันอื่นซ่อนโดยใช้ CSS) สามารถพบได้ใน _generateHTML: function (inst)
ค้นหาบรรทัดที่ระบุว่า:
"</div><table class='ui-datepicker-calendar'><thead>" +
ทำเครื่องหมายทุกอย่างตั้งแต่หลังจากปิดแท็ก divไปจนถึง (และไม่รวม) บรรทัดที่ระบุ:
drawMonth++;
ตอนนี้มันจะไม่มีความสุขเพราะเราต้องปิดบางสิ่ง หลังจากปิดแท็ก div ก่อนหน้าให้เพิ่ม:
";
ตอนนี้โค้ดควรถูกรวมเข้าด้วยกันเป็นอย่างดี ต่อไปนี้เป็นข้อมูลโค้ดที่แสดงถึงสิ่งที่คุณควรจะได้รับ:
...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...
จากนั้นฉันก็คัดลอก / วางโค้ดจาก jquery-ui.css ที่เกี่ยวข้องกับ datepickers ไปยังไฟล์ CSS ใหม่และแทนที่สตริงต่อไปนี้:
- "datepicker" ==> "monthpicker"
