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.

I believe the problem is in the conversion to date: var appointmentEndTime = new date(obj.appointmentEndTime); — Dan Wier, Feb 16 '17 at 20:48
Possible duplicate of [What is the best way to parse a time into a Date object from user input in Javascript?](http://stackoverflow.com/questions/141348/what-is-the-best-way-to-parse-a-time-into-a-date-object-from-user-input-in-javas) — Heretic Monkey, Feb 17 '17 at 18:22

talemyn · Accepted Answer · 2017-02-17T17:31:12.650

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

It was a typo with Date. Here is the fiddle: https://jsfiddle.net/vgkyoywq/9/ I am getting an Invalid Date — Dan Wier, Feb 16 '17 at 21:34
Great work! The only thing I had to do is add a '0' to the end of seconds because for some reason it's a single digit. The MDN is a fantastic resource that I do not use nearly enough. Thank you so much for your help talemyn — Dan Wier, Feb 17 '17 at 20:55
Oh, and on a side note, the `setHours()` method worked well with your value of "10", because it was less than 12, but you **will** have to make sure that the "hours" parameter is in 24-format, in order to set it correctly for all times (with midnight equaling "0") — talemyn, Feb 17 '17 at 21:07

Add time to string of hh:mm:ss javasctipt

1 Answers1