Bagaimana untuk Mengubah suai jQuery UI DatePicker untuk Menunjukkan Bulan dan Tahun Sahaja?

Mengubah suai jQuery UI DatePicker untuk Memaparkan Bulan dan Tahun Sahaja

Dalam aplikasi web, memaparkan pemilih tarikh interaktif secara dinamik boleh menjadi penting. UI jQuery menyediakan pemalam DatePicker serba boleh untuk tujuan ini. Walau bagaimanapun, mungkin terdapat senario di mana anda lebih suka mempamerkan bulan dan tahun semata-mata, tanpa grid kalendar itu sendiri.

Untuk memenuhi keperluan sedemikian, mari kita terokai penggodam JavaScript yang mengubah suai gelagat DatePicker:

$('.date-picker').datepicker({
  changeMonth: true,
  changeYear: true,
  showButtonPanel: true,
  dateFormat: 'MM yy',
  onClose: function(dateText, inst) {
    $(this).datepicker('setDate', new Date(inst.selectedYear, inst.selectedMonth, 1));
  }
});

Dalam coretan kod yang disediakan, panggilan balik onClose memainkan peranan yang penting. Apabila panel pemilih tarikh ditutup, ia memastikan bahawa hanya nilai bulan dan tahun yang dipilih ditunjukkan dalam medan input. Daripada memilih hari tertentu, kaedah setDate() menetapkan tarikh input kepada hari pertama bulan dan tahun yang dipilih.

Untuk melengkapkan pengubahsuaian, anda perlu menggayakan pemilih tarikh menggunakan CSS untuk sembunyikan grid kalendar:

.ui-datepicker-calendar {
  display: none;
}

Dengan pelarasan JavaScript dan CSS ini, anda boleh menggunakan jQuery UI DatePicker dengan berkesan untuk memaparkan bulan dan tahun pilihan sahaja, memenuhi keperluan antara muka pengguna khusus dalam aplikasi anda.

Atas ialah kandungan terperinci Bagaimana untuk Mengubah suai jQuery UI DatePicker untuk Menunjukkan Bulan dan Tahun Sahaja?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!