Seperti banyak yang lain, saya telah menemui banyak masalah dalam mencoba melakukan ini, dan hanya kombinasi dari solusi yang diposting, dan akhirnya peretasan besar untuk membuatnya sempurna, telah memberikan saya solusi.
Masalah dengan solusi lain di utas ini yang telah saya coba:
- Memilih tanggal baru dalam datepicker, juga akan mengubah tanggal (internal) dari datepicker lain, jadi ketika Anda membuka yang lain lagi (atau mencoba mendapatkan tanggal mereka), mereka akan memiliki tanggal yang berbeda dari yang ditampilkan dalam input yang ditugaskan kepada mereka. -bidang.
- Datepicker tidak akan "mengingat" tanggal ketika dibuka lagi.
- Kode untuk menyulap tanggal menggunakan substring sehingga tidak kompatibel dengan semua format.
- "Pembalap bulan saya" hanya mengubah bidang input saat menutupnya, alih-alih setiap kali nilainya diubah.
- Field input tidak diperbarui dengan benar, jika Anda mengetikkan string input yang diformat dengan salah untuk suatu tanggal, dan kemudian klik 'Tutup' pada datepicker.
- Saya tidak dapat memiliki datepicker normal, yang menunjukkan hari, di halaman yang sama dengan bulanpicker, yang tidak menunjukkan hari.
Saya akhirnya menemukan cara untuk memperbaiki semua masalah ini . Empat yang pertama dapat diperbaiki hanya dengan berhati-hati tentang bagaimana Anda mereferensikan tanggal-dan penghapus bulan Anda dalam kode internal mereka, dan tentu saja melakukan beberapa pembaruan secara manual dari pemilih Anda. Ini bisa Anda lihat pada contoh-contoh di dekat bagian bawah. Masalah kelima dapat dibantu dengan menambahkan beberapa kode khusus ke fungsi datepicker.
CATATAN: Anda TIDAK perlu menggunakan skrip monthpicker berikut untuk memperbaiki tiga masalah pertama dalam datepicker normal Anda. Cukup gunakan skrip Instantiation datepicker di dekat bagian bawah posting ini.
Sekarang, untuk menggunakan monthpickers dan memperbaiki masalah terakhir, kita perlu memisahkan datepickers dan monthpickers. Kita bisa mendapatkan salah satu dari beberapa add-on monthpicker jQuery-UI di luar sana, tetapi beberapa kurangnya fleksibilitas / kemampuan pelokalan, beberapa kekurangan dukungan animasi ... jadi, apa yang harus dilakukan? Gulung "milikmu" dari kode-datepicker! Ini memberi Anda pembekal bulanan yang berfungsi penuh, dengan semua fungsi datepicker, hanya tanpa menampilkan hari.
Saya telah menyediakan skrip js Januari dan skrip CSS yang menyertainya , menggunakan metode yang dijelaskan di bawah ini, dengan kode jQuery-UI v1.11.1. Cukup salin cuplikan kode ini ke dua file baru, masing-masing monthpicker.js dan monthpicker.css.
Jika Anda ingin membaca tentang proses yang agak sederhana di mana saya mengubah datepicker menjadi monthpicker, gulir ke bawah ke bagian terakhir.
Sekarang untuk menambahkan datepicker dan monthpickers ke halaman!
Cuplikan kode-javascript berikut ini berfungsi dengan beberapa datepicker dan / atau monthpickers pada halaman, tanpa masalah yang disebutkan di atas! Diperbaiki secara umum dengan menggunakan '$ (ini).' banyak :)
Script pertama adalah untuk datepicker normal, dan yang kedua adalah untuk monthpickers "baru".
Keluar-berkomentar .after , yang memungkinkan Anda membuat beberapa elemen untuk menghapus input-bidang, dicuri dari jawaban Paul Richards'.
Saya menggunakan format "MMTT" di penjawab bulan saya, dan format "tttt-tttt" pada datepicker saya, tetapi ini sepenuhnya kompatibel dengan semua format , sehingga Anda bebas untuk menggunakan mana saja yang Anda inginkan. Cukup ubah opsi 'dateFormat'. Opsi standar 'showButtonPanel', 'showAnim', dan 'yearRange' tentu saja opsional dan dapat disesuaikan dengan keinginan Anda.
Menambahkan datepicker
Instansiasi datepicker.
Yang ini berlangsung dari 90 tahun yang lalu dan hingga saat ini. Ini membantu Anda untuk menjaga input-bidang yang benar, terutama jika Anda mengatur opsi defaultDate, minDate dan maxDate, tetapi itu bisa menanganinya jika Anda tidak. Ini akan bekerja dengan dateFormat yang Anda pilih.
$('#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('');
// })
//)
;
Menambahkan penjilat bulan
Sertakan file monthpicker.js dan file monthpicker.css di halaman yang Anda ingin gunakan monthpickers.
Instansiasi Monthpicker
Nilai yang diambil dari monthpicker ini, selalu merupakan hari PERTAMA dari bulan yang dipilih. Mulai pada bulan berjalan, dan berkisar dari 100 tahun yang lalu dan 10 tahun ke depan.
$('#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('');
// })
//)
;
Itu dia!
Itu semua yang Anda butuhkan untuk membuat penjilat bulan.
Saya sepertinya tidak bisa membuat jsfiddle bekerja dengan ini, tetapi ini bekerja untuk saya dalam proyek ASP.NET MVC saya. Lakukan saja apa yang biasanya Anda lakukan untuk menambahkan datepicker ke halaman Anda, dan menggabungkan skrip di atas, mungkin dengan mengubah pemilih (artinya $ ("# MyMonthTextBox")) ke sesuatu yang bekerja untuk Anda.
Saya harap ini membantu seseorang.
Tautan ke pastebins untuk beberapa pengaturan tanggal dan bulan tambahan:
Monthpicker bekerja pada hari terakhir bulan itu . Tanggal yang Anda dapatkan dari penjilat bulan ini akan selalu menjadi hari terakhir bulan itu.
Dua pembuat bulan berkolaborasi ; 'start' bekerja pada hari pertama bulan itu, dan 'akhir' bekerja pada hari terakhir bulan itu. Keduanya dibatasi oleh satu sama lain, jadi memilih satu bulan di 'akhir' yang sebelum bulan yang dipilih pada 'awal', akan mengubah 'mulai' menjadi bulan yang sama dengan 'akhir'. Dan sebaliknya. OPSIONAL: Saat memilih bulan pada 'mulai', 'minDate' pada 'akhir' diatur ke bulan itu. Untuk menghapus fitur ini, beri komentar satu baris di onClose (baca komentar).
Dua datepicker yang berkolaborasi ; Keduanya dibatasi oleh satu sama lain, sehingga memilih tanggal pada 'akhir' yang sebelum tanggal yang dipilih pada 'awal', akan mengubah 'mulai' menjadi bulan yang sama dengan 'akhir'. Dan sebaliknya. OPTIONAL: Ketika memilih tanggal pada 'mulai', 'minDate' pada 'akhir' diatur ke tanggal itu. Untuk menghapus fitur ini, beri komentar satu baris di onClose (baca komentar).
Bagaimana saya mengubah DatePicker menjadi MonthPicker
Saya telah mengambil semua kode javascript dari jquery-ui-1.11.1.js yang berkaitan dengan datepicker mereka, menempelkannya ke file js baru, dan mengganti string berikut:
- "datepicker" ==> "monthpicker"
- "Datepicker" ==> "Monthpicker"
- "pemilih tanggal" ==> "pemilih bulan"
- "Pemilih tanggal" ==> "Pemilih bulan"
Kemudian saya menghapus bagian dari for-loop yang menciptakan seluruh div ui-datepicker-calendar (div yang disembunyikan oleh solusi lain menggunakan CSS). Ini dapat ditemukan di fungsi _generateHTML: (inst).
Temukan baris yang mengatakan:
"</div><table class='ui-datepicker-calendar'><thead>" +
Tandai semuanya dari setelah tag penutup dan turun ke (dan tidak termasuk) baris di mana dikatakan:
drawMonth++;
Sekarang akan tidak bahagia karena kita perlu menutup beberapa hal. Setelah div-tag penutup dari sebelumnya, tambahkan ini:
";
Kode sekarang harus disatukan dengan baik. Berikut cuplikan kode yang menunjukkan apa yang seharusnya Anda dapatkan:
...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...
Kemudian saya menyalin / menempelkan kode dari jquery-ui.css yang berkaitan dengan datepickers ke file CSS baru, dan mengganti string berikut:
- "datepicker" ==> "monthpicker"
