Takes user-input time values and parses them, outputting Intl-formatted strings and ISO timestamps.
In all of my time working as web designer and developer, I've always struggled with the idea of simple time inputs for users. I've seen users struggle with <input type="time" /> (as I have myself) and nobody wants a masked input. Material's time picker for Android is nice, but isn't available for the web and kids these days struggle with analogue clockfaces.
My favourite time input on the web is Google's calendar, which lets me type an awful lot of rubbish and still get the write time. I've needed some similar functionality recently, so I finally wrote up a zero-dependency function that does it.
Import the module:
import UserTime from "user-time";
//or
const UserTime = require("user-time");Give the function a string and it will attempt to parse:
// Formatted value:
new UserTime("09:30").formattedTime; // 9:30 am
//ISO string
new UserTime("15:30").ISOString; // 2021-05-22T15:30:00.000ZformattedTime can be adjusted using the same options from Intl.DateTimeFormat:
const options = { minute: "2-digit", hour: "2-digit", hourCycle: "h24" };
new UserTime("1pm", { timeFormat: options }).formattedTime; // 13:00defaultTimeOfDay can be set to "pm":
new UserTime("6", { defaultTimeOfDay: "pm" }).formattedTime; // 6:00pmdefaultDate can adjust the date of the ISOString returned:
const janFirst = new Date(2021, 0, 1);
new UserTime("1", { defaultDate: janFirst }).ISOString; // 2021-01-01T01:00:00.000ZThere are plenty of inputs that UserTime will accept. Below are a bunch of examples:
Single or double-digits less than 12 return time in am by default.
new UserTime("1").formattedTime; // 1:00
new UserTime("12").formattedTime; // 12:00Single or double-digits less than 12 return time in pm if "pm" is passed as an optional parameter.
new UserTime("1", { defaultTimeOfDay: "pm" }).formattedTime; // 1:00 pm0 returns 12:00 am.
new UserTime("0").formattedTime; // 12:00 am12 returns 12:00 am or pm depending on the optional "defaultTimeOfDay" parameter (am, by default).
new UserTime("12").formattedTime; // 12:00 am
new UserTime("12", { defaultTimeOfDay: "pm" }).formattedTime; // 12:00 pmSingle or double-digits greater than 12 return time in pm.
new UserTime(`13`).formattedTime; // 1:00 pm24 returns 12:00 am.
new UserTime("24").formattedTime; // 12:00 am3-digit numbers provide minutes.
new UserTime("115").formattedTime; // 1:15 am
new UserTime("230").formattedTime; // 2:30 am
new UserTime("345").formattedTime; // 3:45 amIncrements of 100 up to 2400 provide the time on the hour.
new UserTime("100").formattedTime; /// 1:00 am
new UserTime("1200").formattedTime; // 12:00 am
new UserTime("1300").formattedTime; // 1:00 pm
new UserTime("2400").formattedTime; // 12:00 am4-digit numbers provide minutes.
new UserTime("0115").formattedTime; // 1:15 am
new UserTime("0230").formattedTime; // 2:30 am
new UserTime("0345").formattedTime; // 3:45 am
new UserTime("1315").formattedTime; // 1:15 pm
new UserTime("1430").formattedTime; // 2:30 pm
new UserTime("1545").formattedTime; // 3:45 pm5-digit numbers provide minutes.
new UserTime("011500").formattedTime; // 1:15 am
new UserTime("023015").formattedTime; // 2:30 am
new UserTime("034530").formattedTime; // 3:45 am
new UserTime("131500").formattedTime; // 1:15 pm
new UserTime("143015").formattedTime; // 2:30 pm
new UserTime("154530").formattedTime; // 3:45 pm5-digit numbers provide seconds with the appropriate formatting object as an optional parameter.
new UserTime("011500", {
timeFormat: {
minute: "numeric",
hour: "numeric",
second: "numeric",
hourCycle: "h12",
},
}).formattedTime; // 1:15:00 am
new UserTime("023015", {
timeFormat: {
minute: "numeric",
hour: "numeric",
second: "numeric",
hourCycle: "h12",
},
}).formattedTime; // 2:30:15 am
new UserTime("034530", {
timeFormat: {
minute: "numeric",
hour: "numeric",
second: "numeric",
hourCycle: "h12",
},
}).formattedTime; // 3:45:30 am
new UserTime("131500", {
timeFormat: {
minute: "numeric",
hour: "numeric",
second: "numeric",
hourCycle: "h12",
},
}).formattedTime; // 1:15:00 pm
new UserTime("143015", {
timeFormat: {
minute: "numeric",
hour: "numeric",
second: "numeric",
hourCycle: "h12",
},
}).formattedTime; // 2:30:15 pm
new UserTime("154530", {
timeFormat: {
minute: "numeric",
hour: "numeric",
second: "numeric",
hourCycle: "h12",
},
}).formattedTime; // 3:45:30 pm3am returns 3:00 am.
new UserTime("3am").formattedTime; // 3:00 am3pm returns 3:00 pm.
new UserTime("3pm").formattedTime; // 3:00 pm12am returns 12:00 am.
new UserTime("12am").formattedTime; // 12:00 am12pm returns 12:00 pm.
new UserTime("12pm").formattedTime; // 12:00 pmam or pm in the value being parsed overrides the optional parameter.
new UserTime("3am", { defaultTimeOfDay: "pm" }).formattedTime; // 3:00 amam or pm in the value being parsed overrides the optional parameter.
new UserTime("3pm", { defaultTimeOfDay: "am" }).formattedTime; // 3:00 pmColon-separators work.
new UserTime("3:00").formattedTime; // 3:00 am
new UserTime("15:00").formattedTime; // 3:00 pm
new UserTime("3:00:00").formattedTime; // 3:00 am
new UserTime("15:00:00").formattedTime; // 3:00 pmColon-separators work with am and pm too, with or without spaces.
new UserTime("3:00am").formattedTime; // 3:00 am
new UserTime("3:00pm").formattedTime; // 3:00 pm
new UserTime("3 : 00 am").formattedTime; // 3:00 am
new UserTime("3 : 00 pm").formattedTime; // 3:00 pmISO strings are always returned, the date of which can be set with an optional parameter (today by default).
new UserTime("3:00am", { defaultDate: new Date(2021, 0, 1) }).ISOString; // 2021-01-01T03:00:00.000ZInvalid times give an error
new UserTime("25:00am", { defaultDate: new Date(2021, 0, 1) }).error // true,
new UserTime("-1", { defaultDate: new Date(2021, 0, 1) }).error // true,BONUS: you can type digit o'clock and get a time value.
new UserTime("3 o'clock").formattedTime; // 3:00 am