CODEWITHSUNDEEP
javascripthtmlvalidation
user3145417
user3145417

Reputation: 46

Format string to time format like hh:mm

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?

Upvotes: 0

Views: 2205

Answers (3)

VeldMuijz
VeldMuijz

Reputation: 615

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

Upvotes: 0

RobG
RobG

Reputation: 147403

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

Upvotes: 0

Mite Mitreski
Mite Mitreski

Reputation: 3626

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.

Upvotes: 1

Related Questions