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

Basic Example

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 

$('#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 

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

Alternate UI Widgets Example

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>