Pemilih DateTime sangat berguna untuk mengaktifkan kolom input untuk entri tanggal dan waktu. Pemilih DateTime menyediakan cara yang mudah digunakan untuk memilih tanggal dan waktu. Pengguna dapat memilih tanggal dan waktu dari dialog pemilih DateTime tanpa mengetik secara manual di kolom input. Jika aplikasi web Anda menggunakan kerangka Bootstrap, Anda dapat dengan mudah menambahkan pemilih DateTime ke kolom input menggunakan plugin jQuery Bootstrap DateTime Picker
Plugin bootstrap DateTimePicker membantu menambahkan pemilih DateTime di elemen input formulir menggunakan jQuery. Ini memberikan solusi instan untuk menambahkan popup datetimepicker di bidang formulir untuk memilih tanggal dan waktu di situs web. Anda dapat mengizinkan pengguna untuk memilih hari, bulan, tahun, jam, dan menit dengan satu klik dari dropdown pemilih DateTime. Dalam tutorial ini, kami akan menunjukkan cara menambahkan datetimepicker di form field untuk memilih tanggal dan waktu di Bootstrap
Perpustakaan Bootstrap
Untuk menggunakan kerangka kerja Bootstrap di situs web, sertakan file pustaka Bootstrap dan jQuery
Pemilih Tanggal dan Waktu Bootstrap
Sertakan pustaka CSS dan JS dari plugin Bootstrap Datetimepicker
_Pemilih Tanggal dan Waktu
Cuplikan kode berikut menambahkan datetimepicker untuk memilih tanggal & waktu
Tentukan elemen HTML untuk menambahkan pemilih DateTime
Panggil metode _2 untuk menginisialisasi plugin DateTime Picker
Tambahkan Pemilih Tanggal-Waktu ke Bidang Input menggunakan jQuery
Pemilih DateTime menyediakan berbagai opsi untuk menyesuaikan kotak DateTimePicker. Contoh berikut adalah beberapa konfigurasi lanjutan untuk kotak dialog DateTime Picker
Pemilih Tanggal dan Waktu Sebaris
Cuplikan kode berikut menambahkan datetimepicker ke elemen DIV inline
Pemilih Tanggal dan Waktu dengan Tutup Otomatis
Setelah pengguna memilih tanggal & waktu, datetimepicker akan ditutup secara otomatis
Pemilih Tanggal dan Waktu dengan Tautan Hari Ini
Tautan Hari Ini akan muncul di bawah datetimepicker untuk memilih tanggal dan waktu saat ini
Nonaktifkan Tanggal Sebelumnya dari Pemilih Tanggal dan Waktu
Gunakan opsi _3 dan tentukan tanggal saat ini untuk menonaktifkan tanggal yang lalu
Pemilih Tanggal dan Waktu dengan Rentang Tanggal
Gunakan metode _4 dan 5 untuk memilih rentang tanggal (tanggal mulai dan tanggal akhir)
_2DateTimePicker dengan Pemilih Tanggal Saja
Cuplikan kode berikut hanya menampilkan pemilih tanggal untuk memilih tanggal saja
DateTimePicker dengan Pemilih Waktu Saja
Cuplikan kode berikut hanya menampilkan pemilih waktu untuk memilih waktu saja
Kirim dan Masukkan Nilai Bidang DateTime ke dalam Database
Sekarang, kami akan menunjukkan kepada Anda cara mengirimkan kolom formulir datetime dan memasukkannya sebagai format DATETIME ke dalam database menggunakan PHP dan MySQL. Untuk pemahaman yang lebih baik, kami akan membuat contoh skrip PHP yang mengirimkan nama acara dan tanggal & waktu ke dalam database MySQL
Buat Tabel Basis Data
Tabel perlu dibuat dalam database untuk menyimpan nama acara dan waktu. SQL berikut membuat tabel _6 di database MySQL
Kode HTML
HTML berikut berisi dua bidang formulir, satu untuk input teks (nama acara) dan satu lagi untuk input tanggal waktu (tanggal & waktu acara)
Kode JavaScript
Tentukan pemilih elemen (_7) untuk melampirkan pemilih tanggal waktu ke bidang input waktu. Tanggal sebelumnya akan dinonaktifkan untuk mencegah pengguna memilih tanggal yang sudah lewat
Kode PHP
Tentukan host basis data (_8), nama pengguna (9), kata sandi (0), dan nama (1) sesuai kredensial basis data MySQL Anda. Setelah formulir dikirimkan, nama acara dan tanggal & waktu acara akan dimasukkan ke dalam database menggunakan PHP dan MySQL
Kesimpulan
DateTimePicker membantu membuat kolom input datetime mudah digunakan. Anda dapat mengonversi bidang input menjadi pemilih DateTime menggunakan jQuery. Kode contoh kami memungkinkan Anda untuk menambahkan pemilih DateTime ke bidang teks input menggunakan plugin Bootstrap DateTimePicker. Selain itu, Anda dapat menyesuaikan DateTimePicker dengan berbagai opsi konfigurasi sesuai kebutuhan Anda
Apakah Anda ingin mendapatkan bantuan implementasi, atau memodifikasi atau meningkatkan fungsionalitas skrip ini?
Datepicker adalah opsi luar biasa yang disediakan dengan antarmuka pengguna untuk memudahkan pengguna memilih tanggal dalam format yang benar. Pada artikel ini, kita akan menambahkan pemilih tanggal ke halaman web, menggunakan plugin jQuery
plugin jQuery Datepicker disediakan dengan berbagai opsi dan metode, yang digunakan untuk menyesuaikan antarmuka pengguna pemilih tanggal dan widget kalender
Mari kita punya contoh, untuk melihat bagaimana menambahkan plugin ini untuk menyediakan antarmuka pengguna pemilih tanggal ke halaman web. Dengan contoh ini, pertama kita akan menampilkan kalender secara default tanpa menggunakan penyesuaian apa pun dengan bantuan opsi dan metode yang disediakan
Untuk menambahkan pemilih tanggal jQuery, kita harus mengikuti langkah-langkah berikut
- Tambahkan file perpustakaan javascript yang diperlukan seperti biasa seperti yang telah kita lakukan dengan event handler jQuery lainnya, seperti, Drag/Drop, Show/Hide dan lain-lain. , untuk mengakses metode dan opsi jQuery yang diperlukan. /li>
- Tautkan halaman web dengan CSS eksternal yang berisi gaya untuk tema kalender
- Panggil penangan acara pemilih tanggal untuk menampilkan widget kalender sebagai munculan
Select Date:
Pada kode di atas, kami telah menambahkan pustaka Javascript yang diperlukan sebagai sumber untuk mengakses fungsi bawaan jQuery. Untuk itu, kita dapat merujuk ke pustaka ini baik dengan menggunakan URL langsung yang membutuhkan internet atau kita dapat membuat salinan lokal dari file-file ini dengan mengunduh versi terbaru dari situs web resmi jQuery
Setelah itu, date picker() dipanggil dengan referensi id elemen input HTML. Jadi, secara default, elemen input adalah target, di mana tanggal yang dipilih akan ditampilkan, dan juga digunakan untuk memicu acara ke widget kalender popup
Jika kita ingin memiliki dua elemen secara terpisah, untuk memicu acara pemilih tanggal dan untuk mengisi respons, kita perlu menggunakan opsi dan metode plugin pemilih tanggal jQuery yang tersedia
Metode Opsi Datepicker di jQuery
Ada beberapa opsi dan metode yang disediakan oleh plugin jQuery Datepicker. Misalnya, daftar berikut berisi beberapa opsi plugin jQuery yang digunakan untuk menyesuaikan pengaturan pemilih tanggal
Pilihan
- buttonImage – Opsi ini berisi jalur atau nama gambar yang akan ditampilkan, saat mengklik apa widget kalender akan menjadi popup
- buttonImageOnly – Opsi pemilih tanggal ini hanya menampilkan gambar tanpa efek tombol di sekitarnya
- buttonText – Opsi ini seperti atribut alt dari tag HTML , yang digunakan untuk menampilkan teks alternatif yang diberikan jika ada masalah dalam menampilkan gambar ke browser.
- showOn – Ini dapat berisi nilai-nilai seperti fokus, tombol dan keduanya untuk menampilkan widget kalender dengan kejadian masing-masing, seperti, pada bidang input target pemfokusan, pada mengklik tombol
- dateFormat – Seperti yang dapat kita tebak dengan mudah, opsi ini digunakan untuk memberikan format yang diperlukan dari tanggal yang dipilih
- minDate, maxDate – Ini akan menunjukkan jumlah tanggal minimum dan maksimum yang dapat dipilih masing-masing
Semua opsi termasuk yang tidak ditentukan dalam daftar di atas, digunakan untuk menerapkan perubahan sehubungan dengan pemilih tertentu
Mari kita memiliki contoh untuk bekerja dengan pemilih tanggal beberapa opsi dari daftar di atas
JQuery DatePickerSelect Date:
Jika Anda tidak memiliki gambar seperti yang ditentukan dalam skrip di atas, maka nilai opsi buttonText akan ditampilkan ke browser
Metode
Metode datepicker digunakan untuk melakukan berbagai fungsi termasuk beberapa fungsi tanggal yang sudah dikenal, seperti pengambil dan penyetel tanggal. Beberapa fungsi tersebut adalah,
- getDate – Untuk mendapatkan tanggal saat ini
- setDate – Untuk mengatur tanggal tertentu yang harus dalam format tanggal saat ini
- sembunyikan – Untuk menghapus tampilan kalender yang baru dibuka
- opsi – Fungsi ini akan digunakan sebagai pengambil atau penyetel opsi pemilih tanggal berdasarkan argumen yang diterima. Misalnya, jika tidak ada argumen saat memanggil metode ini, metode ini akan mengembalikan semua opsi pemilih yang tersedia sebagai pasangan kunci dan nilai. Jika kita memberikan nama opsi dan nilai untuknya, maka nilai akan ditetapkan untuk nama opsi yang diberikan
Terlepas dari daftar fungsi di atas, plugin ini juga menyertakan beberapa fungsi utilitas untuk melakukan operasi seperti menghapus pengaturan pemilih tanggal default, memformat tanggal, dan sebagainya.
Misalnya, fungsi setDefaults() digunakan untuk menghapus setelan default dengan menentukan opsi dan nilai yang diperlukan. Dan kodenya adalah,
JQuery DatePickerFrom Date:
Dengan menggunakan fungsi setDeafults() ini, kita dapat menerapkan opsi satu kali untuk semua instance pemilih tanggal yang tersedia di situs web kita