Baik menjadwalkan janji temu atau memesan liburan secara online - Pemilih Tanggal Waktu sangat meningkatkan Pengalaman Pengguna
Apakah Anda mengizinkan pengguna untuk menjadwalkan janji temu, memesan liburan, atau menjadwalkan persewaan online - menggunakan pemilih DateTime meningkatkan Pengalaman Pengguna (UX) sekaligus memastikan Anda memiliki tanggal dan waktu yang tepat yang ditentukan. Artikel ini memberi Anda semua alat yang Anda perlukan untuk menambahkan Pemilih Tanggal Waktu ke formulir Anda
Di bawah ini adalah HTML, JavaScript, dan penyertaan file yang diperlukan untuk menambahkan pemilih DateTime ke formulir Anda. Menikmati
Saya mencoba menambahkan pemilih tanggal ke bilah navigasi saya. kotak teks muncul tetapi datepicker tidak muncul. Tolong bantu saya memperbaiki pemilih tanggal. kode html
ini jsnya
$(document).ready(function() { $("#beginning").datepicker(); $("#ending").datepicker(); }); _Datepicker membantu memasukkan tanggal dengan memilihnya dari kalender tanpa memasukkan secara manual di kolom input. Saat Anda ingin mengumpulkan input tanggal dari pengguna, menambahkan pemilih tanggal ke kolom input dapat memberikan pengalaman pengguna yang baik. Menggunakan plugin jQuery Anda dapat dengan mudah menambahkan datepicker ke kolom input. Ada banyak plugin datepicker yang tersedia, tetapi jQuery UI Datepicker adalah plugin yang sangat dapat dikonfigurasi untuk menambahkan datepicker di halaman web
Dalam tutorial ini, kami akan menunjukkan cara menambahkan datepicker ke input field menggunakan jQuery UI. Dengan menambahkan fungsi pemilih tanggal, widget kalender akan terbuka saat bidang input terkait difokuskan atau diklik. Pengguna dapat memilih tanggal (hari, bulan, dan tahun) dari kalender overlay ini. Di sini kami akan memberikan contoh kode dari beberapa fungsi datepicker yang paling banyak digunakan
Plugin UI jQuery
Pertama, sertakan pustaka yang diperlukan untuk menggunakan plugin jQuery UI Datepicker
Fungsionalitas Dasar Datepicker
Kode contoh ini menambahkan widget datepicker dasar ke kolom input
Kode JavaScript
ID kolom input ($(function(){
$("#datepicker").datepicker();
});
1) harus ditentukan sebagai pemilih datepicker
Kode HTML
Pada fokus bidang input, kalender interaktif akan terbuka di overlay
Date:
Fungsi Canggih Datepicker
Contoh berikut adalah beberapa opsi konfigurasi lanjutan yang dapat digunakan di jQuery Datepicker
Ubah Format Tanggal
Secara default, datepicker menggunakan format MM/DD/YYYY. Gunakan opsi $(function(){
$("#datepicker").datepicker();
});
_2 untuk mengubah format tanggal sesuai kebutuhan Anda
Bulan & Tahun Pilih Opsi
Secara default, bulan & tahun diubah oleh panah kiri & kanan. Gunakan opsi $(function(){
$("#datepicker").datepicker();
});
_3 dan $(function(){
$("#datepicker").datepicker();
});
4 untuk menampilkan menu untuk mengubah bulan dan tahun
Batasi Rentang Tanggal
Awalnya, tanggal apa pun dapat dipilih, tetapi Anda dapat membatasi menggunakan opsi $(function(){
$("#datepicker").datepicker();
});
5 dan $(function(){
$("#datepicker").datepicker();
});
6
Datepicker dengan Rentang Tanggal (Dari Tanggal & Hingga Tanggal)
Contoh berikut menunjukkan bagaimana Anda dapat menerapkan fungsionalitas pemilihan rentang tanggal di kolom input formulir. Kode ini memungkinkan pengguna untuk memilih Dari Tanggal dan Sampai Tanggal, tetapi membatasi pengguna untuk memilih tanggal sebelumnya sebagai Sampai Tanggal
Kode JavaScript
Tentukan ID bidang input Dari ($(function(){
$("#datepicker").datepicker();
});
_7) dan Ke ($(function(){
$("#datepicker").datepicker();
});
8)
Kode HTML
Pengguna dapat memilih tanggal apa pun pada kalender Dari Tanggal, tetapi hanya tanggal yang lebih besar atau sama yang akan dipilih pada kalender Hingga Tanggal
Date: TO
Pengajuan Masukan Datepicker dengan PHP
Dalam kode contoh ini, kami akan menunjukkan kepada Anda cara mengirimkan tanggal input dan mendapatkan tanggal yang dipilih dari datepicker menggunakan PHP
Masukan pemilih tanggal
Tentukan formulir HTML dengan elemen input untuk mengirimkan tanggal yang dipilih
Lampirkan datepicker ke kolom input teks menggunakan jQuery
Dapatkan nilai Tanggal dengan PHP
Ambil nilai tanggal dari kolom input menggunakan metode $_POST di PHP
Tambahkan Pemilih Tanggal-Waktu ke Bidang Input menggunakan jQuery
Kesimpulan
Dalam cuplikan kode contoh ini, kami telah menunjukkan kepada Anda fungsi pemilih tanggal yang paling sering digunakan. Dengan kode contoh kami, Anda dapat memenuhi semua persyaratan datepicker untuk aplikasi web Anda. Namun, Anda dapat meningkatkan fungsionalitas pemilih tanggal dengan berbagai opsi konfigurasi, lihat semua opsi yang tersedia dari sini – Opsi Konfigurasi Datepicker UI jQuery
Apakah Anda ingin mendapatkan bantuan implementasi, atau memodifikasi atau meningkatkan fungsionalitas skrip ini?