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: Mencari data ulang tahun dengan PHP dan MySQL
<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: Mencari data ulang tahun dengan PHP dan MySQL

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: Mencari data ulang tahun dengan PHP dan MySQL

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

Penggunaan if dan else di dalam MYSQL dan PHP

Halo sobat Tatamedia, web design di Surabaya dan Bali.Kali ini kita akan sedikit belajar tentang penggunaan if di dalam syntax mysql, sehingga lebih mempersingkat query. Secara umum, if di dalam mysql memiliki format sebagai berikut: IF(kondisi, ni ...


Mencari data ulang tahun dengan PHP dan MySQL

Terkadang kita mengalami kesulitan untuk mencari siapa saja yang berulang tahun mulai dari tanggal X sampai tanggal Y jika data tersimpan di dalam database MySQL. Hal ini disebabkan karena saat disimpan di dalam database, format tanggal lahir adalah ...


CSS Trunk Text

Dalam pengembangan web design, kita seringkali menampilkan artikel terbaru atau berita terbaru di halaman situs kita atau pelanggan kita.Dengan adanya penggunaan CSS Bootstrap, hal tersebut tidaklah sulit, karena kita bisa membuat kolom-kolom berita ...


Kami membuat RESPONSIVE WEB

Responsive web adalah kode program web sehingga website tetap terbaca dengan mudah di semua perangkat baik komputer, smartphone, maupun tablet, dan sangat cocok dengan syarat dari mesin pencari google

web design di 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