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.

Requirements

• jQuery-timepicker
• jQuery UI

Installation

Add to Gemfile

gem "jquery-ui-rails"

gem "jquery-timepicker-rails"

then bundle install

Usage

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

app/views/events/_form.html.erb

<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" />
</p>

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

$('#datetimePicker').datepair({
  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