Rumah >hujung hadapan web >tutorial js >Bagaimanakah Saya Boleh Memaparkan Bulan dan Tahun Sahaja dalam jQuery UI DatePicker?

Bagaimanakah Saya Boleh Memaparkan Bulan dan Tahun Sahaja dalam jQuery UI DatePicker?

DDD
DDDasal
2024-11-23 21:32:12480semak imbas

How Can I Display Only the Month and Year in a jQuery UI DatePicker?

Menunjukkan Bulan dan Tahun Sahaja dalam jQuery UI DatePicker

jQuery UI DatePicker ialah alat serba boleh untuk memaparkan kalendar dalam aplikasi web. Jika anda ingin menggunakan pemalam ini untuk memaparkan bulan dan tahun sahaja, bukannya keseluruhan kalendar, berikut ialah cara anda boleh melakukannya:

Penyelesaian bijak melibatkan sedikit pengubahsuaian pada kod HTML dan JavaScript. Dalam HTML, tambahkan kelas tersuai pada medan input yang anda mahu paparkan bulan dan tahun. Dalam kod JavaScript, gunakan kelas ini untuk menambah pilihan yang diperlukan pada konfigurasi DatePicker.

Khususnya, pilihan yang anda perlukan ialah:

  • tukarBulan: Benarkan menukar bulan
  • changeYear: Benarkan menukar tahun
  • showButtonPanel: Tunjukkan panel butang dengan "Selesai" dan butang "Hari ini"
  • dateFormat: Tentukan format output sebagai 'MM yy' (cth., 10 Mei)
  • onClose: Fungsi panggil balik untuk mengemas kini medan input dengan bulan dan tahun yang dipilih

Untuk menghalang kalendar daripada dipaparkan, tambah gaya CSS untuk menyembunyikan elemen kalendar (ui-datepicker-calendar).

Berikut ialah contoh lengkap:

<label for="startDate">Date:</label>
<input name="startDate">
$('.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));
  }
});
.ui-datepicker-calendar {
  display: none;
}

Godam ini akan membenarkan anda memaparkan bulan dan tahun sahaja dalam UI jQuery DatePicker tanpa menjejaskan fungsinya.

Atas ialah kandungan terperinci Bagaimanakah Saya Boleh Memaparkan Bulan dan Tahun Sahaja dalam jQuery UI DatePicker?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Kenyataan:
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Artikel sebelumnya:Rumah G | Pengurusan kejohananArtikel seterusnya:Rumah G | Pengurusan kejohanan