jquery.datepair

A jQuery plugin for intelligently selecting date and time ranges
inspired by Google Calendar.

Use this plugin to link date and time inputs when you need to select ranges.

Basic Example

jquery-datepair is preconfigured to work with jquery-timepicker and Bootstrap Datepicker.

to 

<p id="basicExample">
    <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>

<script type="text/javascript" src="bootstrap-datepicker.js"></script>
<script type="text/javascript" src="jquery.timepicker.js"></script>
<script type="text/javascript" src="jquery.datepair.js"></script>
<script>
    // initialize input widgets first
    $('#basicExample .time').timepicker({
        'showDuration': true,
        'timeFormat': 'g:ia'
    });

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

    // initialize datepair
    $('#basicExample').datepair();
</script>

Date-only Example

You can use datepair with just dates, or just times.

to

to 

// HTML not shown for brevity

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

$('#timeOnlyExample').datepair();

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

$('#dateOnlyExample').datepair();

Default Delta Example

Datepair can automatically set the other input when a first value is selected.

to 

// HTML not shown for brevity

$('#defaultDeltaExample').datepair({
    'defaultDateDelta': 1,      // days
    'defaultTimeDelta': 7200000 // milliseconds
});

Alternate UI Widgets Example

jquery-datepair is widget agnostic and can work with any date and time pickers. Here's an example with jQuery.ptTimeSelect and Pikaday .

to

<script type="text/javascript" src="pikaday.js"></script>
<script type="text/javascript" src="jquery.ptTimeSelect.js"></script>
<script type="text/javascript" src="moment.js"></script>
<script>
    // initialize input widgets
    // ptTimeSelect doesn't trigger change event by default
    $('#alternateUiWidgetsExample .time').ptTimeSelect({
        'onClose': function($self) {
            $self.trigger('change');
        }
    });

    $('#alternateUiWidgetsExample .date').pikaday();

    var TIMEFORMAT = 'h:mm a';
    $('#alternateUiWidgetsExample').datepair({
        parseTime: function($input){
            // use moment.js to parse time
            var m = moment($input.val(), TIMEFORMAT);
            return m.toDate();
        },
        updateTime: function($input, dateObj){
            var m = moment(dateObj);
            $input.val(m.format(TIMEFORMAT));
        },
        parseDate: function($input){
            var picker = $input.data('pikaday');
            return picker.getDate();
        },
        updateDate: function($input, dateObj){
            var picker = $input.data('pikaday');
            return picker.setDate(dateObj);
        }
    });
</script>

Events Example

Datepair fires several events to indicate the status of the inputs.

to 

// HTML not shown for brevity

// initialize input widgets first
$('#eventsExample .time').timepicker({
    'showDuration': true,
    'timeFormat': 'g:ia'
});

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

$('#eventsExample').datepair().on('rangeSelected', function(){
    $('#eventsExampleStatus').text('Valid range selected');
}).on('rangeIncomplete', function(){
    $('#eventsExampleStatus').text('Incomplete range');
}).on('rangeError', function(){
    $('#eventsExampleStatus').text('Invalid range');
});