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: Membuat input type untuk email di HTML
<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 untuk email di HTML

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 untuk email di HTML

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

Membuat input type untuk email di HTML

Pada umumnya kita sebagai web developer membuat input type berupa text atau password dengan kode seperti berikut: Untuk text: <input type="text" name="username" size="25" maxsize="15"> Untuk password: <input type="password" name="password" ...


Mendapatkan total dan total sebelumnya

Sebagai penyedia Jasa Web Design Surabaya, kami terkadang menemukan permintaan customer untuk menampilkan total penjualan hari ini dan tanggal sebelumnya untuk menghitung prosentase kenaikan atau penurunannya. Nah umumnya kita mencari cara mudah yai ...


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 ...


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