Penggunaan Bootstrap-DateTimePicker untuk range tanggal

bootstrap-datetimepicker - bootstrap datetimepicker - tutorial datetimepicker

penggunaan bootstrap-datetimepicker untuk range tanggal dan range tanggal jam



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: Wajib Tahu, Inilah Cara Belajar PHP Pemrograman yang Mudah dan Efektif Bagi Pemula
<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: Wajib Tahu, Inilah Cara Belajar PHP Pemrograman yang Mudah dan Efektif Bagi Pemula

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: Wajib Tahu, Inilah Cara Belajar PHP Pemrograman yang Mudah dan Efektif Bagi Pemula

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



Artikel Lainnya

Web Design Surabaya - Web Design Murah - Jasa SEO terbaik

Mengenal Apa Itu JavaScript Dan Manfaatnya Untuk Website

Belajar JavaScript menjadi salah satu upaya yang bisa dilakukan untuk mengoptimalkan pengembangan sebuah situs web. Hal tersebut tentu bukanlah tanpa alasan. Sebab, penggunaan JavaScript menawarkan sejumlah manfaat yang dapat meningkatkan kinerja seb ...


Cara mempercepat loading web

Sebagai Jasa Web Design Surabaya, kami seringkali menghadapi saat load sebuah website tidak maksimal, karena harus menunggu cukup lama sampai ada content yang dimunculkan.Hal ini bisa terjadi jika halaman web kita memiliki banyak gambar, css, dan jav ...


Penting! Hal Ini Harus Dipahami Saat Menggunakan Javascript

Bahasa pemrograman Javascript menjadi salah satu bahasa pemrograman dalam pembuatan website yang cukup populer. Namun memang, salah satu kekurangannya adalah rawan salah ketik. Memang, ketika sedang asyik coding, kita kadang tidak menyadari adanya ke ...


Proses Pengerjaan

Web Design - Photography (foto prewedding casual, foto prewedding unik, photo pre wedding) - Videography

Lokasi di Surabaya dan Bali

Foto Buat Nikah

Desain Grafis

Kontak

08113638531 / 08113865464

info@tatamedia.com

Desainer Website di Surabaya

Web Design di Bali

Kantor

Tatamedia Solusindo Surabaya

Dekkophotography Bali

Video Prewedding

Web Design

Support

Kirim permintaan anda ke

info@tatamedia.com