Javascript, HTML, Tutorials

Add hour to datetimepicker

When working with dates and forms I like to use datepickers, these allow the users to use a calendar to pick a date and have the date in the format mysql can store. I recently had a need to alter the time from a date and time picker, for instance selecting a from date and time, it would be very useful to be able to copy the chosen date and time into another input but with the time increasing by one hour. 

jQuery makes this easy to do. Start with the input’s a from and to the important part is the id, the id is what jQuery will use to read from and update.

<p>From:<br><input id='from' name='from' class='datetimepicker' type="text" value="" /></p>
<p>To:<br><input id='to' name='to' class='datetimepicker' type="text" value="" /></p>

The datepicker used is from it requires jQuery and jQuery UI to be included. 

To call the datetimepicker:

$('body').on('click', '.datetimepicker', function() {
      $(this).not('.hasDateTimePicker').datetimepicker({changeMonth: true,changeYear: true,dateFormat: "yy-mm-dd",timeFormat: 'HH:mm:00',yearRange: "1900:+10",showOn:'focus'}).focus();

This enables a class datetimepicker to be used on any input to show the picker.

Next used #from as the identifier read it’s contents and create a new javascript date from the input date, break it down into month,year,day,hour,minute and seconds parts to then put the new formatted date together.

The slices used are to ensure single digits are always double digits. The hour is increased by 1 using +1 on the end of the hour variable. 

Finally the new date is added to the input with an id of to

//update date with an id of from into an id of to
$('#from').change(function () {
    var d = $('#from').val();
    d = new Date(d);

    var month = ('0' + (d.getMonth()+1)).slice(-2);
    var year = d.getFullYear();
    var day = ('0'+d.getDate()).slice(-2);
    var hour = d.getHours()+1;
    var min = ('0'+d.getMinutes()).slice(-2);
    var sec = ('0'+d.getMilliseconds()).slice(-2);
    newdate = year+'-'+month+'-'+day+' '+hour+':'+min+':'+sec;


David Carr

David Carr

For the past 12 years, I’ve been developing applications for the web using mostly PHP. I do this for a living and love what I do as every day there is something new and exciting to learn.

In my spare time, the web development community is a big part of my life. Whether managing online programming groups and blogs or attending a conference, I find keeping involved helps me stay up to date. This is also my chance to give back to the community that helped me get started, a place I am proud to be apart of.

Besides programming I love spending time with friends and family and can often be found together going out catching the latest movie, staying in playing games on the sofa or planning a trip to someplace I’ve never been before.