Saya telah mencoba banyak fungsi untuk mengatur nilai default pada datetime picker Tempus Dominus, tetapi tidak ada yang berfungsi. Berikut adalah beberapa percobaan saya:

1. Menggunakan fungsi date():

var DateTimeVal = moment('05/07/2022 00:00').format('MM/DD/YYYY HH:mm');
$('#DateTime').data("DateTimePicker").date(DateTimeVal);

Namun, kode di atas tidak berfungsi pada versi 6 dari Tempus Dominus. Saya mendapat error yang mengatakan bahwa Cannot read properties of undefined (reading 'date').

2. Menggunakan fungsi setValue():

var DateTimeVal = moment('05/07/2022 00:00').format('MM/DD/YYYY HH:mm');
const picker = new tempusDominus.TempusDominus(document.getElementById('DateTime'));
picker.setValue(DateTimeVal);

Namun, kode di atas juga tidak berfungsi dan saya mendapat error yang mengatakan bahwa picker.setValue is not a function.

Solusi

Setelah mencoba beberapa fungsi, saya menemukan solusi yang benar. Solusinya adalah menggunakan fungsi setValue() dengan parameter yang benar. Fungsi ini memerlukan parameter DateTime, sehingga kita perlu mengkonversi string menjadi DateTime menggunakan fungsi convert() dari Tempus Dominus.

Berikut adalah contoh kode yang benar:

const picker = new tempusDominus.TempusDominus(document.getElementById('datetimepicker1'));
var DateTimeVal = moment('02/02/2022 00:00', 'MM/DD/YYYY HH:mm').toDate();
picker.dates.setValue(tempusDominus.DateTime.convert(DateTimeVal));

Dalam kode di atas, kita mengkonversi string menjadi DateTime menggunakan fungsi moment() dan kemudian mengkonversinya menjadi native JavaScript Date menggunakan fungsi toDate(). Kemudian, kita menggunakan fungsi setValue() dengan parameter DateTime yang dikonversikan.

Tips

Jika Anda ingin mengatur nilai default pada datetime picker Tempus Dominus, maka perlu memperhatikan format string yang akan dijadikan sebagai nilai default. Pada contoh kode di atas, saya menggunakan format 'MM/DD/YYYY HH:mm', sehingga Anda harus memastikan bahwa formatnya sesuai dengan format yang digunakan oleh datetime picker.

Selain itu, jangan lupa untuk menambahkan script dan style sheet Tempus Dominus ke dalam project Anda, serta membuat elemen HTML untuk datetime picker.