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

DDD
Lepaskan: 2024-11-23 21:32:12
asal
395 orang telah melayarinya

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">
Salin selepas log masuk
$('.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));
  }
});
Salin selepas log masuk
.ui-datepicker-calendar {
  display: none;
}
Salin selepas log masuk

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!

sumber:php.cn
Kenyataan Laman Web ini
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
Tutorial Popular
Lagi>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan