Bagaimanakah Saya Boleh Memaparkan Bulan dan Tahun Sahaja Menggunakan jQuery UI DatePicker?-tutorial js-php.cn

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

Patricia Arquette

Lepaskan： 2024-11-30 20:51:18

asal

358 orang telah melayarinya

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

Salin selepas log masuk

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;
}

Salin selepas log masuk

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">

Salin selepas log masuk

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!