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

Google Calendar-Like jQuery Data & Time Range Picker - datepair
File Size: 47.2 KB
Views Total:
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   

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="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></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" />
to
<input type="text" class="date end" />
<input type="text" class="time end" />
</p>
</div>

4. Initialize the plugin with options.

<script>
$('#demo').datepair();

$('#demo .time').timepicker({
'showDuration': true,
'timeFormat': 'g:ia',
'scrollDefaultNow': true
});

$('#demo .date').datepicker({
'format': 'yyyy-m-d',
'autoclose': true
});

</script>

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.