Bagaimana untuk Memaparkan Bulan dan Tahun Sahaja dalam jQuery UI DatePicker?-tutorial js-php.cn

Bagaimana untuk Memaparkan Bulan dan Tahun Sahaja dalam jQuery UI DatePicker?

Susan Sarandon

Lepaskan： 2024-11-26 17:09:14

asal

335 orang telah melayarinya

How to Display Only Month and Year in jQuery UI DatePicker?

Memaparkan Bulan dan Tahun Sahaja dalam jQuery UI DatePicker

pemalam DatePicker UI jQuery menawarkan fleksibiliti untuk menyesuaikan penampilannya. Untuk senario di mana paparan kalendar penuh tidak diperlukan, pengguna mungkin mahu menunjukkan bulan dan tahun sahaja.

Penyelesaian:

Untuk mencapai matlamat ini, "hackish " namun pendekatan berfungsi melibatkan penyembunyian komponen kalendar secara pemrograman dan mengubah suai konfigurasi JavaScript. Berikut ialah contoh:

<html>
<head>
    <script src="jquery.js"></script>
    <script src="jquery-ui.min.js"></script>
    <link rel="stylesheet" href="jquery-ui.css">
    <script>
        $(function() {
            $('.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));
                }
            });
        });
    </script>
    <style>
        .ui-datepicker-calendar {
            display: none;
        }
    </style>
</head>
<body>
    <label for="startDate">Date:</label>
    <input name="startDate">

Salin selepas log masuk

Pendekatan ini melumpuhkan keterlihatan kalendar sambil mengekalkan fungsi pemilihan bulan dan tahun. Pengendali acara onClose melaraskan tarikh yang dipilih pada hari pertama bulan dan tahun yang dipilih, memastikan bahawa hanya bulan dan tahun dipaparkan dalam kotak input.

Penyelesaian Dipertingkat:

Dari masa ke masa, penyelesaian yang lebih halus telah muncul, menangani potensi kelemahan dalam pendekatan asal. Satu penyelesaian sedemikian melibatkan mengatasi kaedah _selectDay UI jQuery untuk mengelakkan hari kalendar daripada boleh dipilih. Pendekatan ini membolehkan pengendalian input tarikh yang lebih mantap sambil tetap menyediakan paparan bulan dan tahun yang diingini.

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