Bootstrap Date Time Range Picker jQuery Plugin – daterangepicker.js

by Posted on

Bootstrap Date Time Range Picker jQuery Plugin – daterangepicker.js –
A simple and flexible, customizable, convenient date and datetime range picker plugin for jQuery that allows to quickly select a date range between two dates. It is helpful for booking website where user’s need to select to and from date like hotel booking sites. The plugin is highly customizable, you can also include time as well so that your visitor can also select data with time range.




Integrate Date Time Range Picker on Website.

Libraries

Include required libraries on page, Date Range Picker dependent on Bootstrap, jQuery and Moment.js

<!-- CSS -->
<link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/bootstrap/3/css/bootstrap.css" />
<link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/bootstrap.daterangepicker/2/daterangepicker.css" />
 
<!-- JS -->
<script type="text/javascript" src="//cdn.jsdelivr.net/jquery/1/jquery.min.js"></script>
<script type="text/javascript" src="//cdn.jsdelivr.net/momentjs/latest/moment.min.js"></script>
<script type="text/javascript" src="//cdn.jsdelivr.net/bootstrap.daterangepicker/2/daterangepicker.js"></script>

Date Range Picker

Here is the basic example to integrate date picker.

HTML

Create input box for date range picker.

<input type="text" class="daterange"  value="12/31/2017 - 01/31/2018"/>

JS

Then attach the date range picker to the element you want to trigger it.

<script>
$(function() {   
   $('.daterange').daterangepicker();
});
</script>



Date Time Range Picker

Here is the basic example to integrate date picker.

HTML

Create input box for datetime range picker

<input type="text" class="datetimerange"  value="12/31/2017 - 01/31/2018"/>

JS

Then attach the date time range picker to the element you want to trigger it.

<script>
$(function() {   
   $('.datetimerange').daterangepicker({
        timePicker: true,
        timePickerIncrement: 30,
        locale: {
            format: 'MM/DD/YYYY h:mm A'
        }
    });
});
</script>

See live demo and download source code.

DEMO | DOWNLOAD

Visit official github repository for more information and follow for future updates. Don’t forget to read license for using this plugin in your projects.



Published by admin