jQuery Plugin Selecting Date and Time Ranges

jQuery UI have build a wiget jQuery UI Datepicker is used to display inline calendar popup but with that it is not include time fields.

To solve that problem a plug-in call Datepair is a lightweight, modular javascript plugin for intelligently selecting date and time ranges, inspired by Google Calendar. It will keep the start and end date/times in sync and can set default values based on user action. There are no external dependencies, however it can easily be used with jQuery.




Add to Gemfile

gem "jquery-ui-rails"

gem "jquery-timepicker-rails"

then bundle install


Include dist/datepair.js , dist/jquery.datepair.js to vendor/assets/javascripts/

Then go to app/assets/javascripts/application.js

//= require jquery-ui

//= require jquery.timepicker.js

//= require datepair

//= require jquery.datepair

and add to app/assets/stylesheets/application.css

*= require jquery-ui

*= require jquery.timepicker.css

Create text input fields for the data & time range picker


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

Initialize the plugin with options app/assets/javascripts/event.js

$('#datetimePicker .time').timepicker({
  'showDuration': true,
  'timeFormat': 'g:ia'

$('#datetimePicker .date').datepicker({
  'format': 'm/d/yyyy',
  'autoclose': true

  parseDate: function(input) {
    return $(input).datepicker('getDate');
  updateDate: function(input, dateObj) {
    $(input).datepicker('setDate', dateObj);

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);

please check the demo.

References: jQuery timepicker jQuery UI Datepicker Datepair

All Rights Reserved

Let's register a Viblo Account to get more interesting posts.