Rumah >hujung hadapan web >tutorial js >Tingkatkan Pemilihan Tarikh Anda dengan DeskyCalendar: Penyelesaian Vanila JS

Tingkatkan Pemilihan Tarikh Anda dengan DeskyCalendar: Penyelesaian Vanila JS

Patricia Arquette
Patricia Arquetteasal
2024-09-23 08:30:32823semak imbas

Elevate Your Date Selection with DeskyCalendar: A Vanilla JS Solution

Ingin meningkatkan bentuk anda tanpa gebu? Temui DeskyCalendar, pemilih tarikh yang minimalis dan responsif yang dibuat dalam JavaScript vanila tulen. Ia direka untuk menambah gaya dan kefungsian pada proses pemilihan tarikh anda tanpa membebankan projek anda.

Demo dan halaman projek

halaman demo -> https://danruggi.github.io/datepicker/
pautan projek -> https://github.com/danruggi/datepicker

Ciri-ciri Utama

? Responsif Penuh: Kelihatan hebat pada mana-mana peranti—tiada lagi kalendar squipped.
? Format Berganda / Tunggal: Pilih antara memilih tarikh tunggal atau julat dengan mudah.
? Tambah Pilihan "Mana-mana Tarikh": Benarkan pengguna kebebasan untuk memilih mana-mana tarikh, sesuai untuk penapis dan laporan.
? Lumpuhkan Tarikh: Halang pemilihan untuk tarikh lalu atau akan datang, pastikan segala-galanya terkawal.
? Laksanakan Fungsi Luaran pada Klik: Ingin mencetuskan tindakan tersuai apabila tarikh dipilih? Peasy mudah!
Persediaan Pantas

1. Sertakan CSS dan JS

Cukup lepaskan pautan ini ke dalam HTML anda:


2. Tambah Input Anda

Buat medan input:

3. Mulakan Kalendar

Sediakannya dengan baris JavaScript yang ringkas:

DeskyCalendar baharu({'ID saya': {}});

Contoh Minimal

Dua Lajur

Tukar kepada pilihan tarikh berganda dengan mudah:

DeskyCalendar baharu({'calendar_date_selector1': {mod: "double"}});

Lumpuhkan Tarikh

Ingin menyekat tarikh? Hanya tambah

const d = new Date();
DeskyCalendar baharu({'calendar_date_selector2': {disableSebelum: d}});
Kesimpulan

Dengan hanya beberapa baris, DeskyCalendar membawa kecanggihan dan kesederhanaan kepada keperluan pemilihan tarikh anda, semuanya ringan dan cekap. Sudah tiba masanya untuk meningkatkan tahap borang anda dengan penyelesaian yang elegan ini. Selamat mengekod!

Atas ialah kandungan terperinci Tingkatkan Pemilihan Tarikh Anda dengan DeskyCalendar: Penyelesaian Vanila JS. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

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