Jquery datetimepicker - Advance time by 1 hour

Question

I'm currently using the jQuery datetimepicker add-on from here

It works just about perfectly, but I'm stumped on how to add a small bit of functionality to it. I currently have two instances on a page, one for start-time and one for end-time. When I choose a start-time, I'd like to automatically fill in the end-time with the start time + 1 hour.

Can this be accomplished without extending the core script at all?

Answer 1

There is a Get and Set Datetime function shown near the bottom of the page.

var ex13 = $('#example13');

ex13.datetimepicker();

$('#example13_setdt').click(function(){
    ex13.datetimepicker('setDate', (new Date()) );
});

$('#example13_getdt').click(function(){
    alert(ex13.datetimepicker('getDate'));
});

Could you use that? Or course you'll have to add an hour to the getDate.

$("#endtime").datetimepicker("setDate", $("#starttime").datetimepicker("getDate"));

Answer 2

yes, it extends the JQuery-UI Datepicker which has different callbacks to handle a selection

you can check out the onSelect documentation and use it on your timepicker

$('#example').datetimepicker({
    onSelect: function(){
              //add 1 hour to start time
        }
});

Answer 3

The following will add one hour to the end-time datepicker.

$('#dtStartDate').datetimepicker({
    onSelect: function(){
       var startDate = $('#dtStartDate').datetimepicker('getDate'));
       var endDate = new Date(parseFloat(startDate.setHours(startDate.getHours()+1)))

       //Get the ending date datepart
       var endDateDatePart = endDate.getFullYear() + '/' + endDate.getMonth() + '/' + endDate.getDate();

       //calculate the ending date time part including AM/PM
       var endDateTimePart;
       if (endDate.getHours() > 12) { endDateTimePart = endDate.getHours()-12 + ':' + endDate.getMinutes() + ' PM';} else {endDateTimePart = endDate.getHours() + ':' + endDate.getMinutes() + ' AM';}
       $('#dtEndDate').datetimepicker('setDate', endDateDatePart + ' ' + endDateTimePart );
   }
});