Penggunaan Bootstrap-DateTimePicker untuk range tanggal

Halo pembaca setia artikel kami, kali ini kami sebagai Web Design Surabaya ingin memberikan tutorial mengenai penggunaan bootstrap-datetimepicker dalam memilih tanggal masuk dan tanggal keluar. Bukan hanya tanggalnya saja, tetapi juga bisa disertai dengan jamnya juga.

Untuk menjalankan tutorial datetimepicker kita memerlukan javascript dari jquery, moment, dan bootstrap-datetimepicker itu sendiri.
Semua file ini bisa anda ambil di halaman demo kami.

Untuk memulainya, kita terlebih dulu membuat dua buah input file text sebagai kolom tanggal masuk dan tanggal keluar.
Berikut adalah kode HTMLnya:

Baca Juga: Membuat input type text hanya boleh berisi angka dengan HTML5

<link rel="stylesheet" type="text/css" href="css/bootstrap.css" />
<link rel="stylesheet" type="text/css" href="css/bootstrap-datetimepicker.min.css" />
<div class="col-md-3">
	<input type="text" name="field_tgl_mulai" id="field_tgl_mulai" placeholder="Check In Date" class="form-control" maxlength="10">
</div>
<div class="col-md-3">
	<input type="text" name="field_tgl_akhir" id="field_tgl_akhir" placeholder="Check Out Date" class="form-control" maxlength="10">
</div>
<script src="js/jquery-1.10.2.min.js"></script>
<script src="js/bootstrap-datetimepicker.min.js"></script>
<script src="js/moment.js"></script>

Dari kode di atas kita sudah memiliki dua buah input tanggal.

Secara umum, penggunaan javascript untuk datetimepicker adalah sebagai berikut:

$('#field_tgl_mulai').datetimepicker({
	format: 'yyyy-mm-dd',
	pickerPosition: "bottom-right",
	weekStart: 0,
	todayBtn:  false,
	autoclose: 1,
	todayHighlight: 1,
	clearBtn: false,
	startView: 2,
	forceParse: 1
});

Dengan penggunaan kode di atas, saat kita klik di input type tanggal, kita akan bisa memilih tanggal dan jam sesuai keinginan kita.

Baca Juga: Membuat input type text hanya boleh berisi angka dengan HTML5

Tetapi jika kita hanya menginginkan tanggal saja dan tidak ada jam yang dimunculkan, kita cukup menambahkan dua baris kode sebagai berikut:

pickTime: false,
minView: 2,

Lalu bagaimana dengan range tanggal supaya tanggal keluar lebih besar dari tanggal masuknya?
Untuk itu kita sebagai web design Surabaya perlu modifikasi sedikit kode javascriptnya, supaya tanggal keluar yang lebih kecil dari tanggal masuk menjadi disable, dan tanggal masuk yang lebih besar dari tanggal keluar juga menjadi disable.

Baca juga: CSS Trunk Text

Berikut adalah kode lengkapnya:

var Tglakhir = moment(new Date()).add(2, 'years').toDate();
$('#field_tgl_mulai').datetimepicker({
	format: 'yyyy-mm-dd',
	pickTime: false,
	minView: 2,
	pickerPosition: "bottom-right",
	weekStart: 0,
	todayBtn:  false,
	autoclose: 1,
	todayHighlight: 1,
	clearBtn: false,
	startView: 2,
	forceParse: 1,
	startDate:new Date(),
	EndDate: Tglakhir
}).on('changeDate', function (selected) {
	var startDate = new Date(selected.date.valueOf());
	var nextdate = moment(startDate).add(1, 'days').toDate();
	$('#field_tgl_akhir').datetimepicker('setStartDate', nextdate);
	$('#field_tgl_akhir').datetimepicker('update',nextdate);
});
			
$('#field_tgl_akhir').datetimepicker({
	format: 'yyyy-mm-dd',
	pickTime: false,
	minView: 2,
	pickerPosition: "bottom-right",
	weekStart: 0,
	todayBtn:  false,
	autoclose: 1,
	todayHighlight: 1,
	startView: 2,
	clearBtn: false,
	forceParse: 1,
	startDate:new Date(),
	EndDate: Tglakhir
}).on('changeDate', function (selected) {
	var startDate = new Date(selected.date.valueOf());
	var prevdate = moment(startDate).subtract(1, 'days').toDate();
	$('#field_tgl_mulai').datetimepicker('setEndDate', prevdate);
});

var Tglakhir adalah nilai yang kita set untuk maksimal tanggal yang bisa dipilih.
Nilai add(2, 'years') artinya tanggal hari ini ditambah 2 tahun. Di sinlah kita perlunya menggunakan moment.js.

Baca Juga: Membuat input type text hanya boleh berisi angka dengan HTML5

Dengan modifikasi script di atas, maka saat kita memilih tanggal masuk, tanggal keluar akan otomatis terisi 1 hari sesudah tanggal masuk. Karena itu kita menggunakan perintah: $('#field_tgl_akhir').datetimepicker('update',nextdate);
Tetapi di script untuk tanggal keluar kita tidak memasang kode untuk update tanggal masuk saat tanggal keluar dipilih. Mengapa demikian? Jika diperlakukan seperti itu, maka tanggal masuk dan keluar akan terus looping setiap kali diplih, sehingga tanggal keluar dan tanggal masuk tidak bisa dipilih untuk tanggal yang dibutuhkan.

Lalu bagaimana jika butuh ada jamnya? Mudah saja. Kita tinggal merubah value dari format dan menghapus baris pickTime: false, minView: 2,
Nilai format diganti menjadi: format: 'yyyy-mm-dd hh:ii:ss',

Sangat mudah bukan? Sekarang anda bisa melakukan modifikasi sesuai dengan kebutuhan anda.
Anda juga bisa melihat demo bootstrap-datetimepicker di atas di halaman yang disediakan oleh Tatamedia Solusindo, web design Surabaya.

DEMO