jQuery UI API - anggota pemetik tanggal (Datepicker Widget)

kategori

Widget (widget)

pemakaian

Keterangan: Dari kotak pop-up atau kalender inline untuk memilih tanggal.

Versi baru: 1.0

jQuery tanggal UI pemetik (Datepicker) Pilih tanggal untuk menambah tinggi badan ke halaman untuk mengkonfigurasi plug-in. Anda dapat menyesuaikan format tanggal dan bahasa, membatasi dipilih rentang tanggal, menambahkan tombol dan pilihan navigasi lainnya.

Secara default, bila dikaitkan bidang teks fokus, dalam overlay kecil tanggal terbuka pemilih. Untuk kalender inline, cukup pilih tanggal melekat pada div atau span.

interaksi keyboard

Ketika tanggal pemilih terbuka, perintah keyboard berikut ini tersedia:

• PAGE UP: pindah ke bulan sebelumnya.
• PAGE DOWN: Pindah ke bulan depan.
• CTRL + PAGE UP: Pindah tahun sebelumnya.
• CTRL + PAGE DOWN: Pindah ke tahun depan.
• CTRL + HOME: Pindah bulan berjalan. Jika pemilih tanggal ditutup dibuka.
• CTRL + LEFT: pindah ke hari.
• CTRL + RIGHT: pindah ke hari berikutnya.
• CTRL + UP: pindah ke minggu sebelumnya.
• CTRL + DOWN: Pindah ke minggu depan.
• ENTER: Pilih tanggal fokus.
• CTRL + END: Tutup pemetik tanggal, dan jelas tanggal.
• ESCAPE: Tutup pemetik tanggal, tanpa pilihan.

Fitur berguna

$ .datepicker.setDefaults (Pengaturan)

Mengubah pengaturan default untuk semua pemetik tanggal.

Gunakan option() metode untuk mengubah pengaturan untuk setiap contoh.

Atur semua pemilih tanggal atau klik pada icon terbuka bila fokus.

$ .datepicker.setDefaults ({
  showOn: "baik",
  buttonImageOnly: benar,
  buttonImage: "calendar.gif",
  ButtonText: "Kalender"
});

Atur semua pemetik tanggal memiliki teks Perancis.

$ .datepicker.setDefaults ($ .datepicker.regional [ "Fr"]);

$ .datepicker.formatDate (Format, tanggal, pengaturan)

Memformat tanggal untuk nilai string dengan format yang ditentukan.

Format mungkin kombinasi berikut:

• d - hari bulan (tidak ada angka nol)
• dd - hari bulan (dua digit)
• o - hari tahun (tanpa nol terkemuka)
• oo - hari tahun (tiga digit)
• nama pendek hari - D
• Panjang nama hari - DD
• m - beberapa bulan pertama tahun ini (tanpa nol terkemuka)
• mm - beberapa bulan pertama tahun ini (dua digit)
• nama pendek dari bulan - M
• Bulan nama panjang - MM
• y - Tahun (dua digit)
• yy - Tahun (empat digit)
• @ - Unix timestamp (ms sejak 1970/01/01)
• ! - Jendela Watch (100ns sejak 01/01/0001)
• '...' - Teks
• '' - Tanda kutip tunggal
• Lainnya - teks

Ada juga beberapa $.datepicker telah ditetapkan format tanggal standar:

• ATOM - 'yy-mm-dd' (dan RFC 3339 / ISO 8601 yang sama)
• COOKIE - 'D, dd M yy'
• ISO_8601 - 'yy-mm-dd'
• RFC_822 - 'D, d M y' (merujuk RFC 822)
• RFC_850 - 'DD, dd-My' (lihat RFC 850)
• RFC_1036 - 'D, d M y' (lihat RFC 1036)
• RFC_1123 - 'D, d M yy' (merujuk RFC 1123)
• RFC_2822 - 'D, d M yy' (merujuk RFC 2822)
• RSS - 'D, d M y' (sama dengan RFC 822)
• KUTU - '!'
• TIMESTAMP - '@'
• W3C - 'yy-mm-dd' (sama dengan ISO 8601)

format ISO untuk menampilkan tanggal. Menghasilkan "2007/01/26."

$ .datepicker.formatDate ( "Yy-mm-dd", Tanggal baru (2007, 1-1, 26));

Perancis untuk memperpanjang format untuk menampilkan tanggal. Menghasilkan "Samedi, Juillet 14, 2007".

$ .datepicker.formatDate ( "DD, MM d, yy", Tanggal baru (2007, 7-1, 14), {
  dayNamesShort: $ .datepicker.regional [ "fr"] .dayNamesShort,
  dayNames: $ .datepicker.regional [ "fr"] .dayNames,
  monthNamesShort: $ .datepicker.regional [ "fr"] .monthNamesShort,
  monthNames: $ .datepicker.regional [ "fr"] .monthNames
});

$ .datepicker.parseDate (Format, nilai, pengaturan)

Ekstrak nilai string dari format tanggal yang ditentukan.

Format mungkin kombinasi berikut:

• d - hari bulan (tidak ada angka nol)
• dd - hari bulan (dua digit)
• o - hari tahun (tanpa nol terkemuka)
• oo - hari tahun (tiga digit)
• D - nama pendek dalam seminggu
• DD - seminggu panjang beberapa nama
• m - beberapa bulan pertama tahun ini (tanpa nol terkemuka)
• mm - beberapa bulan pertama tahun ini (dua digit)
• nama pendek dari bulan - M
• Bulan nama panjang - MM
• y - Tahun (dua digit)
• yy - Tahun (empat digit)
• @ - Unix timestamp (ms sejak 1970/01/01)
• ! - Jendela Watch (100ns sejak 01/01/0001)
• '...' - Teks
• '' - Tanda kutip tunggal
• Lainnya - teks

Beberapa pengecualian mungkin dilemparkan:

• 'Tidak valid argumen' - atau jika format null pengecualian ini dilemparkan.
• 'Missing angka pada posisi nn' - jika format untuk menampilkan nilai tidak ditemukan pengecualian ini dilemparkan.
• 'Nama tidak diketahui pada posisi nn' - jika format tidak ditemukan minggu atau nama bulan beberapa nama pengecualian ini dilemparkan.
• 'Unexpected literal pada posisi nn' - jika nilai format teks tidak ditemukan pengecualian ini dilemparkan.
• 'Tanggal tidak valid' - tanggal tersebut tidak berlaku jika pengecualian ini dilemparkan, seperti '31 / 02/2007 '.

Ekstrak tanggal dalam format ISO.

$ .datepicker.parseDate ( "Yy-mm-dd", "2007/01/26");

Penggalian format tanggal yang diperpanjang Perancis.

$ .datepicker.parseDate ( "DD, MM d, yy", "Samedi, Juillet 14, 2007", {
  shortYearCuroff: 20,
  dayNamesShort: $ .datepicker.regional [ "fr"] .dayNamesShort,
  dayNames: $ .datepicker.regional [ "fr"] .dayNames,
  monthNamesShort: $ .datepicker.regional [ "fr"] .monthNamesShort,
  monthNames: $ .datepicker.regional [ "fr"] .monthNames
});

$ .datepicker.iso8601Week (Tanggal)

Menentukan tanggal tertentu dari beberapa minggu pertama tahun ini: 1-53.

Fungsi ini menggunakan definisi ISO 8601 dari satu minggu: satu minggu mulai Senin, minggu pertama setiap tahun mengandung 4 Januari. Ini berarti bahwa tahun sebelumnya dapat mencakup hingga tiga hari pada minggu pertama tahun ini, tahun dapat berisi hingga tiga hari dalam seminggu terakhir dari tahun sebelumnya.

Fungsi ini calculateWeek implementasi standar.

Cari tanggal beberapa minggu pertama tahun ini.

$ .datepicker.iso8601Week (Tanggal Baru (2007, 1-1, 26));

$ .datepicker.noWeekends

Mengatur fungsi beforeShowDay seperti, mencegah pemilihan akhir pekan.

Kami dapat beforeShowDay memberikan pilihan noWeekends() adalah fungsi yang digunakan untuk menghitung semua bekerja untuk memberikan true / false array nilai yang digunakan untuk menunjukkan tanggal adalah dipilih.

Set DatePicker, biarkan akhir pekan opsional.

$ ( "#datepicker") .datepicker ({
  beforeShowDay: $ .datepicker.noWeekends
});

batas

Tanggal picker tersedia untuk memenuhi berbagai bahasa dan format tanggal didukung oleh konten lokal. Setiap kode bahasa lokal yang terkandung dalam ditambahkan setelah nama file, misalnya, Perancis jquery.ui.datepicker-fr.js . file lokalisasi diperlukan perlu dimasukkan di belakang kode tanggal pemilih utama. Setiap file lokal untuk menambah menetapkan sendiri tersedia lokalisasi set, semua contoh secara otomatis menerapkan pengaturan ini ke pengaturan default.

$.datepicker.regional Properti memegang sebuah array dari lokal ke kode bahasa sebagai pra, pra-default "" , dinyatakan dalam bahasa Inggris. Setiap entri adalah obyek dengan sifat sebagai berikut: closeText , prevText , nextText , currentText , monthNames , monthNamesShort , dayNames , dayNamesShort , dayNamesMin , weekHeader , dateFormat , firstDay , isRTL , showMonthAfterYear dan yearSuffix .

Anda dapat mengembalikan kode lokalisasi standar di bawah ini:

Anda dapat mengganti pemilih tanggal ke lokasi tertentu dengan mengikuti kode:

theming

anggota pemetik tanggal (Datepicker Widget) menggunakan framework jQuery UI CSS untuk menentukan tampilan dan nuansa dari gaya. Jika Anda perlu menggunakan tanggal yang ditentukan gaya pemilih, Anda dapat menggunakan berikut nama kelas CSS:

• ui-datepicker : pemetik tanggal wadah luar. Jika pemilih tanggal inline, unsur-unsur yang tambahan diberikan dengan ui-datepicker-inline , kelas. Jika isRTL pilihan, elemen ini tambahan akan dengan ui-datepicker-rtl , kelas.
  • ui-datepicker-header : pemetik tanggal kontainer kepala.
    • ui-datepicker-prev : control digunakan untuk memilih bulan sebelumnya.
    • ui-datepicker-next : control digunakan untuk memilih bulan depan.
    • ui-datepicker-title : Judul pemilih tanggal mengandung bulan dan tahun wadah.
      • ui-datepicker-month : tampilan teks bulan, jika Anda menetapkan changeMonth pilihan <select> elemen.
      • ui-datepicker-year : Teks di layar, jika Anda menetapkan changeYear pilihan <select> elemen.
  • ui-datepicker-calendar : mengandung bentuk kalender.
    • ui-datepicker-week-end : sel akhir pekan. : Sel mengandung hari akhir pekan.
    • ui-datepicker-other-month : Tempat dalam sebulan, tapi tidak bulan ini jumlah hari sel.
    • ui-datepicker-unselectable : pengguna tidak dapat memilih sel.
    • ui-datepicker-current-day : dipilih sel date.
    • ui-datepicker-today : sel tanggal hari ini.
  • ui-datepicker-buttonpane : Bila pengaturan showButtonPanel menggunakan tombol panel (buttonpane) ketika pilihan.
    • ui-datepicker-current : pilih tombol untuk tanggal hari ini.

Jika numberOfMonths pilihan untuk menampilkan beberapa bulan, menggunakan beberapa kelas tambahan:

• ui-datepicker-multi : bulan pemetik tanggal bagian dari lapisan terluar dari wadah. Elemen ini akan ditampilkan sesuai dengan jumlah bulan dengan tambahan ui-datepicker-multi-2 , ui-datepicker-multi-3 atau ui-datepicker-multi-4 , nama kelas.
  • ui-datepicker-group : pengelompokan dalam pemilih tunggal. Elemen ini berdasarkan posisinya dalam paket dengan tambahan ui-datepicker-group-first , ui-datepicker-group-middle atau ui-datepicker-group-last , nama kelas.

mengandalkan

• UI inti (UI Core)
• Efek Inti (Core efek) (opsional; kapan dan showAnim bila digunakan dengan opsi)

informasi tambahan

• bagian membutuhkan beberapa CSS fungsional, jika tidak maka tidak akan bekerja. Jika Anda membuat tema kustom, menggunakan widget yang ditentukan file CSS sebagai titik awal.
• Komponen untuk pemrograman memanipulasi nilai dari elemen, sehingga ketika nilai perubahan elemen tidak memicu asli change acara.
• Tidak mendukung <input type="date"> Buat pemetik tanggal, karena akan menimbulkan konflik dengan picker UI lokal.

contoh

Sebuah sederhana jQuery UI pemetik tanggal (Datepicker).

<! DOCTYPE html>
<Html lang = "en">
<Head>
  <Meta charset = "utf-8">
  <Title> anggota pemetik tanggal (Datepicker Widget) Demo </ title>
  <Link rel = "stylesheet" href = "// code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
  <Script src = "// code.jquery.com/jquery-1.10.2.js"> </ script>
  <Script src = "// code.jquery.com/ui/1.10.4/jquery-ui.js"> </ script>
</ Kepala>
<Body>
 
<Div id = "datepicker"> </ div>
 
<Script>
$ ( "#datepicker") .datepicker ();
</ Script>
 
</ Body>
</ Html>

Lihat demo