Format string to time format like hh:mm

Question

I have an input field:

<input id="szReminderTime" type="text" value="" maxlength="5"
    onblur="format_reminder_time(this.value);"
    name="askForQuoteAry[szReminderTime]" />

The format of the Time field is hh:mm on the 24-hour clock, e.g. 7:30, 11:45, 16:10, 19:11, 22:43.

If the operator types a period (11.45), a comma (11,45), a space (11 45), a dash (11-45), or nothing (1145 or 945), then each of these should be considered to have the same meaning. Then once the operator leaves the field the value should be shown with a colon, i.e. 11:45 or 9:45.

To achieve this I have used the following JavaScript function which works fine for me but can anyone optimize my code as my code is not looking nice to me?

off topic (see codereview.stackexchange.com) and you didn't even post the code — Alnitak, Dec 24 '14 at 10:07
This question is not a duplicate of [*how to format javascript date*](http://stackoverflow.com/questions/3552461/how-to-format-javascript-date). There is no date or Date object involved, the OP is asking how to reformat a string representing a time. — RobG, Dec 24 '14 at 10:42

score 1 · Answer 1 · edited May 23 '17 at 12:20

1

If this just one date formating location I would suggest you use plain javascipt to do the formatting.

If not http://momentjs.com/ is the solution for most date formating issues.

moment("20111031", "YYYYMMDD").fromNow(); // 3 years ago

http://momentjs.com/docs/#/displaying/

for your example it would just be "hh:mm" as you have it in the description.

edited May 23 '17 at 12:20

Community

1
1

answered Dec 24 '14 at 10:05

Mite Mitreski

3,596
3
29
39

Think that `moment.js` is a bit of overkill for what the OP wants to achieve. :-) – MiKo Dec 24 '14 at 10:20
That would require the OP to determine which format of string to process (e.g. hh:mm, h.mm, h,mm, hhmm), then have a separate call to moment.js for each one. A function to do as the OP requires is just 6 lines of code, which is probably less than what is required for the various moment.js calls (and doesn't require a library at all). – RobG Dec 24 '14 at 10:24
as I mentioned plain javascript is better if this is one timer but by the looks of it he is using a lot date stuff. So @robG solution is better pick then any lib if it is a onetimer. – Mite Mitreski Dec 24 '14 at 10:47

RobG · Answer 2 · 2014-12-24T10:39:58.457

A function to convert 24 hr time to 12 hr time is fairly simple, however you have some peculiar requirements. Consider the following:

// Convert string in 24 hour time to 12 hour hh:mm ap
// Input can be 12:23, 945, 09,12, etc.
function from24to12(s) {
  var b = s.replace(/\D/g,'');
  var h = b.substring(0, b.length - 2);
  var m = b.substring(b.length - 2);
  return (h%12 || 12) + ':' + m + ' ' + (h>11? 'PM':'AM');
}

console.log(from24to12('23:15')); // 11:15 PM
console.log(from24to12('015'));   // 12:15 AM
console.log(from24to12('1.15'));  //  1:15 AM

This assumes that you don't want leading zeros on the hour and that the operator will always key in two digits for the minutes, e.g. 9.03, not 9.3. To support the latter requires 3 more lines of code.

The following supports any character for a separator, and also say 9.3 for 9:03 AM:

// Convert string in 24 hour time to 12 hour hh:mm ap
// Input can be 12:23, 945, 09,12, etc.
// Sseparator can be any non-digit. If no separator, assume [h]hmm
function from24to12(s) {
  function z(n){return (n<10?'0':'')+n}
  var h, m, b, re = /\D/;

  // If there's a separator, split on it
  // First part is h, second is m
  if (re.test(s)) {
    b = s.split(re);
    h = b[0];
    m = z(+b[1]);

  // Otherwise, last two chars are mm, first one or two are h
  } else {
    h = s.substring(0, s.length - 2);
    m = s.substring(s.length - 2);
  }
  return (h%12 || 12) + ':' + m + ' ' + (h>11? 'PM':'AM');
}

console.log(from24to12('23:15')); // 11:15 AM
console.log(from24to12('005'));   // 12:05 AM
console.log(from24to12('1.15'));  //  1:15 AM
console.log(from24to12('17.5'));  //  5:05 PM

score 0 · Answer 3 · answered Dec 24 '14 at 11:18

You could do this in Javascript quite easily. You could extend on this to fit your requirements. Please take a look at my script:

Date.prototype.dateToday = function (syntax) {
    var dateToday = null;

    if (syntax === 'dd-mm-yyyy') {
        dateToday = (
        ((this.getDate() < 10) ? '0' + this.getDate() : this.getDate()) + '-' + ((this.getMonth() + 1 < 10) ? '0' + this.getMonth() : this.getMonth()) + '-' + this.getFullYear());

    } else if (syntax === 'dd/mm/yyyy') {
        dateToday = (
        ((this.getDate() < 10) ? '0' + this.getDate() : this.getDate()) + '/' + ((this.getMonth() + 1 < 10) ? '0' + this.getMonth() : this.getMonth()) + '/' + this.getFullYear());

    } else if (syntax === 'dd-mm-yy') {
         var year = this.getFullYear().toString();

        dateToday = (
        ((this.getDate() < 10) ? '0' + this.getDate() : this.getDate()) + '-' + ((this.getMonth() + 1 < 10) ? '0' + this.getMonth() : this.getMonth()) + '-' + year.substr(2, 4));

    } else if (syntax === 'dd/mm/yy') {
        var year = this.getFullYear().toString();

        dateToday = (
        ((this.getDate() < 10) ? '0' + this.getDate() : this.getDate()) + '/' + ((this.getMonth() + 1 < 10) ? '0' + this.getMonth() : this.getMonth()) + '/' + year.substring(2,4));
    }

    return dateToday;

};

Date.prototype.timeNow = function (syntax) {
    var timeNow = null;

    if (syntax === 'hh:mm:ss') {
        timeNow = (
        ((this.getHours() < 10) ? '0' + this.getHours() : this.getHours()) + ':' + ((this.getMinutes() < 10) ? '0' + this.getMinutes() : this.getMinutes()) + ':' + ((this.getSeconds() < 10) ? '0' + this.getSeconds() : this.getSeconds()));
    } else if (syntax === 'hh:mm') {
        timeNow = (
        ((this.getHours() < 10) ? '0' + this.getHours() : this.getHours()) + ':' + ((this.getMinutes() < 10) ? '0' + this.getMinutes() : this.getMinutes()) + ':' + ((this.getSeconds() < 10) ? '0' + this.getSeconds() : this.getSeconds()));

    } else {
        timeNow = (
        ((this.getHours() < 10) ? '0' + this.getHours() : this.getHours()) + ':' + ((this.getMinutes() < 10) ? '0' + this.getMinutes() : this.getMinutes()) + ':' + ((this.getSeconds() < 10) ? '0' + this.getSeconds() : this.getSeconds()) + '.' + ((this.getMilliseconds() < 10) ? '0' + this.getMilliseconds() : this.getMilliseconds()));

    }

    return timeNow;
}

Date.prototype.hourNow = function () {
    var hours = ((this.getHours() < 10) ? '0' + this.getHours() : this.getHours());
    return hours;
}

Date.prototype.minuteNow = function () {
    var minutes = ((this.getMinutes() < 10) ? '0' + this.getMinutes() : this.getMinutes());
    return minutes
};

Date.prototype.secondNow = function () {
    var seconds = ((this.getSeconds() < 10) ? '0' + this.getSeconds() : this.getSeconds());
    return seconds;
};

Date.prototype.milisecondsNow = function () {
    var milliseconds = ((this.getMilliseconds() < 10) ? '0' + this.getMilliseconds() : this.getMilliseconds());
    return milliseconds;
};

Or take a look at my Git for this helper: datehelper.js

Format string to time format like hh:mm

3 Answers3