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

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

Patricia Arquetteasal: 2024-11-30 20:51:18357semak imbas

How Can I Display Only Month and Year Using jQuery UI DatePicker?

Memaparkan Bulan dan Tahun dengan jQuery UI DatePicker

Komponen jQuery UI DatePicker ialah alat serba boleh untuk memaparkan kalendar dalam aplikasi web. Walau bagaimanapun, terdapat keadaan di mana ia mungkin wajar untuk menunjukkan bulan dan tahun sahaja, mengetepikan grid kalendar. Ini boleh dicapai melalui penyelesaian yang bijak.

Mencipta Paparan "Bulan Tahun Sahaja"

Coretan kod berikut menyediakan penyelesaian:

$(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));
    }
    });
});

Skrip ini mengkonfigurasi pemilih tarikh dengan khusus tetapan:

changeMonth dan change Year: Dayakan menukar bulan dan tahun.
showButtonPanel: Tunjukkan butang panel untuk bulan dan tahun navigasi.
dateFormat: Tentukan format yang diingini sebagai "MM yy" untuk bulan dan tahun sahaja.
onClose: Semasa menutup pemilih, tetapkan tarikh yang dipilih kepada hari pertama bulan yang dipilih dan tahun.

Menyembunyikan Grid Kalendar

Untuk menyembunyikan grid kalendar, tambah peraturan CSS berikut:

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

Contoh HTML Lengkap

Berikut ialah versi semakan fail HTML dengan semua elemen yang diperlukan:

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.js"></script>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/jquery-ui.min.js"></script>
    <link rel="stylesheet" type="text/css" media="screen" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/themes/base/jquery-ui.css">
    <style>
        .ui-datepicker-calendar {
            display: none;
        }
    </style>
</head>
<body>
    <label for="startDate">Date : < /label>
    <input name="startDate">

Penyelesaian yang disemak ini menyediakan antara muka pengguna yang membolehkan pengguna memilih bulan dan tahun tanpa memaparkan grid kalendar.

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

jquery css html for select date format Calendar using Interface this display ui

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：Adakah JavaScript Benar-benar Asynchronous, atau Hanya Kebanyakannya Segerak?Artikel seterusnya：Adakah JavaScript Benar-benar Asynchronous, atau Hanya Kebanyakannya Segerak?

Artikel berkaitan

Lihat lagi