Google Calendar-Like jQuery Data & Time Range Picker - datepair

Google Calendar-Like jQuery Data & Time Range Picker - datepair

Datepair is an easy jQuery plugin which allows you select date & time ranges like on Google Calendar, based on jonthornton's jQuery timepicker plugin.

How to use it:

1. Include jQuery javascript and jQuery datapair plugin in the html document.

<script type="text/javascript" src=""></script>
<script type="text/javascript" src="jquery.datepair.js"></script>

2. Include the other required files in the page.

<script type="text/javascript" src="jquery.timepicker.min.js"></script>
<link rel="stylesheet" type="text/css" href="jquery.timepicker.css" />
<script type="text/javascript" src="lib/base.js"></script>
<link rel="stylesheet" type="text/css" href="lib/base.css" />

3. Create text input fields for the data & time range picker.

<p id="demo">
<input type="text" class="date start" />
<input type="text" class="time start" />
<input type="text" class="date end" />
<input type="text" class="time end" />

4. Initialize the plugin with options.

$('#demo .time').timepicker({
'showDuration': true,
'timeFormat': 'g:ia',
'scrollDefaultNow': true
$('#demo .date').datepicker({
'format': 'yyyy-m-d',
'autoclose': true

5. Available options.

startClass: 'start',
endClass: 'end',
timeClass: 'time',
dateClass: 'date',
defaultDateDelta: 0,
defaultTimeDelta: 3600000,
anchor: 'start',
parseTime: function($input){
return $input.timepicker('getTime');
updateTime: function($input, dateObj){
$input.timepicker('setTime', dateObj);
parseDate: function($input){
return $input.datepicker('getDate');
updateDate: function($input, dateObj){
$input.datepicker('update', dateObj);
setMinTime: function($input, dateObj){
$input.timepicker('option', 'minTime', dateObj);

Change log:

v0.4.16 (2018-01-31)

  • Fixe date rollover when setting initial value

v0.2.3 (2014-09-03)

  • Added 'anchor' option

v0.2.2 (2014-07-04)

  • Added check for inputs before initializing deltas

v0.2.1 (2014-06-24)

  • Fixed exception for time-only pairs. 

v0.2.0 (2014-06-22)

  • Fixed custom event helper in IE

v0.1.1 (2014-06-07)

  • Fixed date flipping with time change. 

v0.1.0 (2014-03-01)

  • Added getTimeDiff method.
  • Added rangeError event.

v0.1.0 (2014-02-10)

  • added more examples.

This awesome jQuery plugin is developed by jonthornton. For more Advanced Usages, please check the demo page or visit the official website.

  • Publication date: 31.01.2018
  • Source