Dalam proses pengembangan, kita seringkali memerlukan fitur datetime picker untuk mengumpulkan input dari user. Salah satu library yang populer digunakan adalah Tempus Dominus. Pada artikel ini, kami akan membahas bagaimana cara set nilai pada datetime picker menggunakan Tempus Dominus.
Masalah yang dihadapi
Dalam proses pengembangan, saya menemui beberapa masalah ketika mencoba mengatur nilai pada datetime picker menggunakan Tempus Dominus. Saya mencoba menggunakan fungsi date dan setValue, namun tidak berfungsi seperti yang saya harapkan.
Penyelesaian Masalah
Sesuai dengan dokumentasi resmi dari Tempus Dominus, untuk mengatur nilai pada datetime picker, kita perlu menggunakan fungsi dates dan setValue. Namun, dalam penggunaannya, kita harus memastikan bahwa parameter yang dikirim adalah objek DateTime, bukan string.
Berikut adalah contoh kode yang dapat digunakan untuk mengatur nilai pada datetime picker:
const picker = new tempusDominus.TempusDominus(document.getElementById('datetimepicker1'));
picker.dates.setValue(new Date());
Dalam contoh di atas, kita menggunakan fungsi setValue dan memasukkan objek Date sebagai parameter.
Tips Tambahan
Jika Anda ingin mengatur format datetime picker, Anda dapat menggunakan properti formatInput pada objek dates. Contoh:
picker.dates.formatInput = date => moment(date).format('YYYY-MM-DD HH:mm');
Dalam contoh di atas, kita menggunakan fungsi moment untuk mengkonversi objek Date ke string dalam format YYYY-MM-DD HH:mm.
Referensi
- Dokumentasi resmi Tempus Dominus: https://tempusdominus.github.io/bootstrap-tempus-dominus/
- JsDelivr: https://cdn.jsdelivr.net/npm/@eonasdan/[email protected]/dist/js/tempus-dominus.min.js
Dengan demikian, kita dapat menggunakan Tempus Dominus dengan lebih mudah dan efektif dalam pengembangan aplikasi.