The usage of Bootstrap-DateTimePicker for Date Range

bootstrap-datetimepicker - bootstrap datetimepicker - tutorial datetimepicker

the usage of bootstrap-datetimepicker for date range and date time range



The usage of Bootstrap-DateTimePicker for Date Range

Hallo now, we as Web Design Surabaya wants to give the tutorial about the usage of bootstrap-datetimepicker for choosing check in and check out date. You do not only choose the date range but also the date and time range.

To run the tutorial of datetimepicker we need jquery, moment, and bootstrap-datetimepicker itself.
All of these files can be downloaded at our demo page.

For the first step, we make two input type for the check in and check out date.
The HTML code is as follows:

Read: Looking for birthday with PHP and 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>

Generally, the usage of the javascript code for datetimepicker is as follows:

$('#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
});

By using this code, we can choose any date we want.

Read: Looking for birthday with PHP and MySQL

But, how about choosing the date only without time? We just need to add two lines of code as follows:

pickTime: false,
minView: 2,

Further, how to choose the correct check in and check out date, so the check in date is lower than check out date?
We as web design Surabaya needs to modify the code, so the check out date which is lower than check in date is disable, and vise versa.

Read: CSS Trunk Text

The complete code is as follows:

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 is the value that we set for the maximum date which can be chosen.
The value of add(2, 'years') means that today date is added 2 years. To use this syntax, we need moment.js.

Read: Looking for birthday with PHP and MySQL

By modifying the script above, when we choose the check in date, the check out date will be filled automatically. That is why we use the syntax: $('#field_tgl_akhir').datetimepicker('update',nextdate);
But, we do not put the same code at the check out date to prevent any looping date, so we cannot choose the date we want.

Then, how to add the time? It is easy. We just need to add the value of format and remove the line of pickTime: false, minView: 2,
The format is changed to: format: 'yyyy-mm-dd hh:ii:ss',

It is easy right? Now you can modify the code based on your need.
You can see the demo of bootstrap-datetimepicker at the page which is supported by Tatamedia Solusindo, web design Surabaya.

DEMO



Related Article

Web Design Services - Best Webdesign - Best SEO Services

Making an input type for checking valid email address in HTML

As a web design services, we often use input type="text" and input type="password" like below: For text: <input type="text" name="username" size="25" maxsize="15"> For password: <input type="password" name="password"> The syntax above ...


Checking Password Strength with pStrength jQuery Plugin

When we make a web design, we often make registration form for the visitor. One of the field is password. One thing we need is password strength to ensure the better security for login access.. To fulfill that we can use pStrength jQuery Plugin.We j ...


How to make website loads faster

As the Best Webdesign, we often face website loads slowly, because it has to wait for long time to download whole contents such as CSS, Javascript, and images. This content must be downloaded first before the browser shows the content. Now, we will ...


Working Process

Web Design - Wedding Photography - Wedding Videography

Our Location at Surabaya and Bali

Website Design in Indonesia

Graphic Design in Indonesia

Contact

+628113638531 / +628113865464

info@tatamedia.com

Webdesigner in Indonesia

Videographer in Bali

Office

Tatamedia Solusindo Surabaya

Dekkophotography Bali

Fine Art Photography in Bali

Web Design

Support

Send your request to

info@tatamedia.com