Dalam beberapa kasus, penggunaan library datetimepicker dapat menimbulkan masalah ketika input field menghapus nilai pada saat initialisasi. Masalah ini diketahui sebagai Issue #189 di GitHub.

Masalah ini terjadi karena input field yang telah diisi dengan nilai dari database dan kemudian direset oleh kode JavaScript yang digunakan untuk initialisasi datetimepicker. Hal ini dapat menyebabkan nilai input field menjadi hilang dan tidak tampil lagi.

Solusi

Ada beberapa solusi yang diperkenalkan dalam discussion issue #189 di GitHub. Salah satu solusinya adalah dengan menggunakan kode JavaScript berikut:

$(function () {
 $('.datetimepicker-input').each(function() {
 const val = $(this).val();
 $(this).datetimepicker();
 $(this).val(val);
 });
});

Kode di atas digunakan untuk menginisialisasi datetimepicker dan kemudian mengembalikan nilai input field ke kondisi semula.

Penyelesaian Lain

Solusi lain yang diperkenalkan dalam discussion issue #189 adalah dengan menggunakan format tanggal yang sesuai dengan opsi initialisasi datetimepicker. Dalam kasus ini, pengguna harus memastikan bahwa nilai input field memiliki format tanggal yang sama dengan format tanggal yang digunakan oleh datetimepicker.

Contohnya:

$(function () {
 $('.datepicker').each(function () {
 const val = $(this).val();
 $(this).datetimepicker({
 format: 'DD/MM/YYYY',
 userCurrent: false,
 date: moment(val, "DD/MM/YYYY") //initialize directly in the moment datetimepicker
 });
 //$(this).val(val); you're never sure of the format
 });
});

Kode di atas digunakan untuk menginisialisasi datetimepicker dengan format tanggal yang sesuai dan kemudian mengembalikan nilai input field ke kondisi semula.

Penyelesaian Terakhir

Solusi terakhir yang diperkenalkan dalam discussion issue #189 adalah dengan menggunakan atribut value pada tag <input> untuk menetapkan nilai awal input field. Contohnya:

<input type="date" name="proposal_expiration_date" value="{{ $procurement->proposal_expiration_date }}">

Kode di atas digunakan untuk menetapkan nilai awal input field dengan menggunakan variabel $procurement->proposal_expiration_date.

Ringkasan

Masalah input field yang menghapus nilai pada initialisasi dapat diselesaikan dengan beberapa cara, termasuk menggunakan kode JavaScript untuk menginisialisasi datetimepicker dan mengembalikan nilai input field ke kondisi semula. Selain itu, pengguna juga dapat menggunakan format tanggal yang sesuai dengan opsi initialisasi datetimepicker atau menetapkan nilai awal input field dengan menggunakan atribut value pada tag <input>.