Add time to string of hh:mm:ss javasctipt

Question

I have the following string returned by my web service: '10:00:00'.

It is successfully being disabled in my timepicker via:

$('#appointmentTimeTextbox').timepicker('option',
                                        'disableTimeRanges',
                                        [[obj.appointmentTime, obj.appointmentEndTime]]);

What I would like is to add 30 minutes (one option in the timepicker) to obj.appointmentEndTime. I have tried:

var appointmentEndTime = new date(obj.appointmentEndTime);
    appointmentEndTime.setHours(appointmentEndTime.getHours() + .5);

to no avail.

Answer 1

You've got a few issues going on here:

1) This may just be a typo in the question, but the date constructor must be capitalized: new Date(...

2) The setHours() method only takes integer values for the "hours" parameter . . . from MDN:

hoursValue

integer between 0 and 23, representing the hour.

You can add in a half an hour two ways: by providing a "minutes" parameter in the setHours() call:

appointmentEndTime.setHours(appointmentEndTime.getHours(), 30);

. . . or by simply using the setMinutes() method:

appointmentEndTime.setMinutes(appointmentEndTime.getMinutes() + 30);

3) When you create the new date value with:

var appointmentEndTime = new date(obj.appointmentEndTime);

. . . you are working with a brand new Date object, so you will either need to copy the new time value back into the original obj.appointmentEndTime property, or you will need to create the value from the new appointmentEndTime variable, and pass that into the timepicker() method instead of obj.appointmentEndTime.

---

UPDATE

Okay, so I looked at your Fiddle and the issue that you are having now is that you can't create a date with simply a time value:

var appoinementEndTime = new Date('10:00:00');

Again, looking to MDN (a great resource, by the way), the valid inputs for the Date constructor are:

new Date();           // The exact moment at the creation of the Date
new Date(value);      // In milliseconds, since 1 January 1970 00:00:00 UTC
new Date(dateString); // A string value representing a date (see link for valid formats)
new Date(year, month[, date[, hours[, minutes[, seconds[, milliseconds]]]]]);

So your best option would be to pick a date (the current date would be easiest), and then override the time values on that date, to get the value that you want:

var endTimeArray = obj.appoinementEndTime.split(":");
var appoinementEndTime = new Date();
appoinementEndTime.setHours(endTimeArray[0],      // the hours value
                            endTimeArray[1] + 30, // the minutes value
                            endTimeArray[2],      // the seconds value
                            0);                   // the milliseconds value

Using that (and your value of '10:00:00), the time value of the date should be10:30:00(which you can create using thegetHours(),getMinutes(), andgetSecondsmethods onappoinementEndTime`).