Datepair for jQuery – Demos and Documentation

Basic Example

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


<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.


// 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.


// 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 .


<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.


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

});