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.

alt

Requirements

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


All Rights Reserved