Skrip pemilih waktu tanggal php

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

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

Pemilih Tanggal dan Waktu dengan Rentang Tanggal

Gunakan metode

DateTimePicker 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

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 (

Kode PHP
Tentukan host basis data (

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

JQuery DatePicker






	

		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 DatePicker






	

		Select 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 DatePicker






	

		From Date: 
	
	

Dengan menggunakan fungsi setDeafults() ini, kita dapat menerapkan opsi satu kali untuk semua instance pemilih tanggal yang tersedia di situs web kita

Bagaimana cara menambahkan pemilih waktu tanggal di PHP?

Bagaimana Anda membuat pemilih tanggal dan waktu?

Bagaimana cara menambahkan pemilih DateTime?

Bagaimana cara menggunakan pemilih waktu tanggal dalam HTML?