I'm trying to create a function that takes a number and returns a timestamp (HH:mm) using date-fns version 1.30.1 or plain JavaScript.
What I'm trying to achieve is to help a user when entering a time. I'm using Vue.js to update the field when a user moves away from the input field. So if a user types 21 then moves away, the field would ideally update to 21:00.
Some examples would be:
21 = 21:00
1 = 01:00
24 = 00:00
2115 = 21:15
Numbers like 815 does not have to return 08:15. Numbers like 7889 should return an error.
I have tried using regex:
time = time
.replace(/^([1-9])$/, '0$1')
.replace(/^([0-9]{2})([0-9]+)$/, '$1:$2')
.replace(/^24/, '00:00')
I have also tried using the parse method in date-fns but can't seem to wrap my head around how to solve this.
Version 1, converting anything less than 100 to hours
const num2time = num => {
if (num < 100) num *=100;
const [_,hh,mm] = num.toString().match(/(\d{1,2})(\d{2})$/)
return `${hh.padStart(2,"0")}:${mm}`
}
console.log(num2time(8));
console.log(num2time(2115));
console.log(num2time(15));
console.log(num2time("8"));
console.log(num2time("2115"));
version 2 can be used if the digits are always representing valid (h)hmm
const num2time = num => num.toString().replace(/(\d{1,2})(\d{2})$/,"$1:$2");
console.log(num2time(815));
console.log(num2time(2115));
console.log(num2time("2115"));
Conversion based on <100 (hours-only) and >=100 (100*hours+minutes), plus some fight with 24 and single-digit numbers (both hours and minutes):
function num2time(num){
var h,m="00";
if(num<100)
h=num;
else {
h=Math.floor(num/100);
m=("0"+(num%100)).slice(-2);
}
h=h%24;
return ("0"+h).slice(-2)+":"+m;
}
console.log(num2time(8));
console.log(num2time(801));
console.log(num2time(24));
console.log(num2time(2401));
console.log(num2time(2115));
console.log(num2time("8"));
console.log(num2time("2115"));
Original answer, kept for the comment only, but would not handle 24 or single-digit minutes correctly:
For example you can do a very mechanical conversion
function num2time(num){
if(num<10)
t="0"+num+":00";
else if(num<100)
t=num+":00";
else {
if(num<1000)
t="0"+Math.floor(num/100);
else if(num<2400)
t=Math.floor(num/100)
else
t="00";
t+=":"+(num%100);
}
return t;
}
console.log(num2time(8));
console.log(num2time(2115));
console.log(num2time("8"));
console.log(num2time("2115"));
Example verification:
function num2time(num){
var h,m="00";
if(num<100)
h=num;
else {
h=Math.floor(num/100);
m=("0"+(num%100)).slice(-2);
}
if(h<0 || h>24) throw "Hour must be between 0 and 24"
if(m<0 || m>59) throw "Minute must be between 0 and 59"
h=h%24;
return ("0"+h).slice(-2)+":"+m;
}
var numstr=prompt("Enter time code");
while(true) {
try {
console.log(num2time(numstr));
break;
} catch(ex) {
numstr=prompt("Enter time code, "+numstr+" is not valid\n"+ex);
}
}
You can use the first char as hour and last char as minute, you've to pad 0 on when there is less than 4 chars.
When there is 1 or 0 char you need to pad both left and right.
When there is 2 or 3 char you only pad right.
time_str = '230'
date = new Date('1970-01-01T' + time_str.slice(0,2).padStart(2,"0") + ':' + time_str.slice(2,4).padEnd(2,"0") + 'Z');
console.log(date)
console.log(("0" + date.getUTCHours()).slice(-2) + ":" + ("0" + date.getUTCMinutes()).slice(-2))
time_str = '24'
date = new Date('1970-01-01T' + time_str.slice(0,2).padStart(2,"0") + ':' + time_str.slice(2,4).padEnd(2,"0") + 'Z');
console.log(date)
console.log(("0" + date.getUTCHours()).slice(-2) + ":" + ("0" + date.getUTCMinutes()).slice(-2))
time_str = '3'
date = new Date('1970-01-01T' + time_str.slice(0,2).padStart(2,"0") + ':' + time_str.slice(2,4).padEnd(2,"0") + 'Z');
console.log(date)
console.log(("0" + date.getUTCHours()).slice(-2) + ":" + ("0" + date.getUTCMinutes()).slice(-2))
time_str = '78'
date = new Date('1970-01-01T' + time_str.slice(0,2).padStart(2,"0") + ':' + time_str.slice(2,4).padEnd(2,"0") + 'Z');
console.log(date)
console.log(("0" + date.getUTCHours()).slice(-2) + ":" + ("0" + date.getUTCMinutes()).slice(-2))
DateFns implementation
IMHO, working on adding and removing minutes and hours is a cleaner way to manage this transform:
function formattedTime(val) {
let helperDate;
if(val.length <= 2) {
if(val > 24)return 'error';
helperDate = dateFns.addHours(new Date(0), val-1);
return dateFns.format(helperDate, 'HH:mm');
}
if(val.length > 2) {
let hhmm = val.match(/.{1,2}/g);
if(hhmm[0] > 24 || hhmm[1] > 60) return 'error';
helperDate = dateFns.addHours(new Date(0), hhmm[0]-1);
helperDate = dateFns.addMinutes(helperDate, hhmm[1]);
return dateFns.format(helperDate, 'HH:mm');
}
}
const myArr = [21, 1, 24, 2115, 815];
myArr.forEach(
val => console.log(formattedTime(val.toString()))
)
<script src="https://cdnjs.cloudflare.com/ajax/libs/date-fns/1.30.1/date_fns.min.js"></script>
Related
I am trying to make a filter based on hours for timestamps (in this example filter for all times after 8 am):
var beginningTimeValue = new Date('2020-01-01 08:00:00');
var unique = [["value","value","value","value","12/01/2021 00:03:35","value"],["value","value","value","value","01/01/2020 00:03:35","value"], ["value","value","value","value","01/01/2020 08:03:35","value"], ["value","value","value","value","01/01/2020 13:03:35","value"]]
if(!beginningTimeValue == ""){
unique = unique.filter(function(row)
{
var rYear = row[4].substring(6, 10);
var rMonth = row[4].substring(3, 5);
var rDay = row[4].substring(0, 2);
var rHour = row[4].substring(11, 13);
var rMinute = row[4].substring(14, 16);
var rSecond = row[4].substring(17, 19);
var bTime = new Date(parseInt(rYear, 10), parseInt(rMonth, 10), parseInt(rDay, 10), parseInt(rHour, 10), parseInt(rMinute, 10), parseInt(rSecond, 10));
console.log("ODATE = " + rYear + "/" + rMonth + "/" + rDay + "_" + rHour + ":" + rMinute + ":" + rSecond);
console.log("BDATE = " + bTime.getFullYear() + "/" + bTime.getMonth() + "/" + bTime.getDate() + "_" + bTime.getHours() + ":" + bTime.getMinutes() + ":" + bTime.getSeconds());
beginningTimeValue.setYear(bTime.getYear());
beginningTimeValue.setMonth(bTime.getMonth());
beginningTimeValue.setDate(bTime.getDate());
if(bTime.getTime() >= beginningTimeValue.getTime()){
console.log(bTime.getTime()*24*3600*1000 + " VS " + beginningTimeValue.getTime()*24*3600*1000);
}
else{
console.log("FALSE");
}
return bTime.getTime() >= beginningTimeValue.getTime();
}
);
}
console.log(unique);
I have debugged my way to finding out that I wouldn't get a FALSE value in the 2nd IF, however I am at a loss as to why the .getTime() function returns vastly different values for my console log:
"136556220816000000000 VS -5.0438323821312e+21"
"136560264336000000000 VS -5.0438323821312e+21"
The problem is in the following line:
beginningTimeValue.setYear(bTime.getYear());
The (deprecated) getYear() function returns
[a] number representing the year of the given date, according to local
time, minus 1900.
The (also deprecated) setYear() function
[...] interprets any two-digit number as an offset to 1900
In your case, getYear() returns a value like 121, which is not a two-digit number. When you subsequently invoke setYear() with that value, you get a date that is set to the year 121 instead of 2021.
Since getTime() returns the number of milliseconds since 1970, and 121 is before 1970, you get a negative number.
TL;DR: use getFullYear() and setFullYear() instead of getYear() and setYear().
I'm trying to convert something like this 2020-10-01T17:00:00.000Z to the correct time something like 06:00:00 PM. Pls see my code below:
const date = "2020-10-01T17:00:00.000Z";
const output = new Date(date).toLocaleTimeString('en-US');
console.log(output);
If you specifically need the time to be in UTC (instead of the local user's timezone), then I think you would need to build your own formatter function to do it, e.g.:
function formatDate(str, includeDate){
const date = new Date(str);
const hours = date.getUTCHours();
let twoDigits = (no) => {
const str = no.toString();
return (str.length === 1 ? '0' + str : str);
};
let strdate = (includeDate ? twoDigits(date.getUTCMonth() + 1) + '/' + twoDigits(date.getUTCDate()) + '/' + twoDigits(date.getUTCFullYear()) + ' ' : '');
if(12 <= hours) {
return strdate + twoDigits(hours === 12 ? 12 : hours - 12) + ':' + twoDigits(date.getUTCMinutes()) + ':' + twoDigits(date.getUTCSeconds()) + ' PM';
} else {
return strdate + twoDigits(hours) + ':' + twoDigits(date.getUTCMinutes()) + ':' + twoDigits(date.getUTCSeconds()) + ' AM';
};
};
console.log(formatDate("2020-10-01T17:00:00.000Z", true));
Here, you are constructing the time string from individual UTC segments. You could alternatively parse the input string using a regex, get the number of hours and then build the string that way.
Edit: updated to optionally also include the date, in US format mm/dd/yyyy.
The function is trying to fund the difference between to dates, but I am struggling to not return a negative number if the date is past a certain point. I have tried a few work around like using ABS but it can cause problems in future areas.
var DateCalc = {};
DateCalc.totalDaysLeft = 0;
DateCalc.calculate = function(dateToParse) {
DateCalc.init(dateToParse);
return DateCalc.stringify(DateCalc.years(), DateCalc.months(), DateCalc.days());
};
DateCalc.init = function(dateToParse) {
var date = DateCalc.parseDate(dateToParse);
var today = Date.now();
var oneDay = 24 * 60 * 60 * 1000;
DateCalc.totalDaysLeft = Math.floor((date - today) / oneDay);
};
DateCalc.parseDate = function(dateToParse) {
var dateVars = dateToParse.split(',').map(Number);
return new Date(dateVars[0], dateVars[1] - 1, dateVars[2]);
};
DateCalc.years = function() {
var years = Math.floor(DateCalc.totalDaysLeft / 365);
DateCalc.totalDaysLeft -= Math.floor(years * 365);
return years;
};
DateCalc.months = function() {
var months = Math.floor(DateCalc.totalDaysLeft / 30);
DateCalc.totalDaysLeft -= Math.floor(months * 30);
return months;
};
DateCalc.days = function() {
return Math.floor(DateCalc.totalDaysLeft / 24);
};
DateCalc.stringify = function(years, months, days) {
var dateString = "";
if (years !== 0)
dateString += years + " years, ";
if (months !== 0)
dateString += months + " months, ";
dateString += days + " day(s).";
return dateString;
};
//here is the .abs() code.
function age(year, month, day) {
var yearDifference = Math.abs(new Date().getFullYear() - year);
var monthDifference = Math.abs(new Date().getMonth() - month + 1);
var dayDifference = Math.abs(new Date().getDate() - day);
var differences = {
year: yearDifference,
month: monthDifference,
day: dayDifference
};
var final = [];
for (var time in differences) {
if (differences[time] > 0) {
var addString = differences[time] + " " + time;
if (differences[time] > 1) {
addString += "s"
}
final.push(addString);
}
}
return final.join(" ");
};
console.log(age(2017, 11, 17));
console.log(age(2016, 1, 2));
//if you tried to look up how far away next January is while you're in December, it will tell you it is 1 year 11 months from now instead of 1 month. This is because it adds the 11 months instead of subtracting it.I am trying to find a solution, as this function is more conscise but the other is more versatile. The function above, I replaced .floor() with rounds the value down with .abs() hoping it would just use the absolute value of the given operation, however, this was not the case.
The problem is that you are using the .abs() function in an inappropriate way. Most mathematical functions do no obey the distributive rule, and the .abs() function belongs to these. For an easier understanding, let us forget your current problem for a moment and let us examine a simple, reduced example:
Let's say you want to know the absolute value of -10. Obviously, the correct result is +10.
On the other hand, -10 could be written as (-20 + 10). But nevertheless, you can not compute abs(-10) using that knowledge:
abs(-20 + 10) = 10, but
abs(-20) + abs(+10) = 30
Applying that knowledge to your problem, we see that abs(Y years + M months + D days) is generally NOT equal to (abs(Y years) + abs(M months) + abs(D days)).
Regarding this problem, there is the additional oddity that each of the terms of the result has another unit, and that the terms depend on each other (e.g. there can be no term like "13 months", because that would be "1 year plus 1 month"), but I won't go into further detail here.
There is a simple solution:
1) Determine the desired resolution of your result (i.e. should your result be accurate to seconds, attoseconds, days or something else).
2) Convert the two dates into the unit determined in step 1), using a randomly chosen, yet fixed point in time as the common starting point.
3) Now you can subtract the two (converted) dates and use the .abs() function without problems.
4) Convert the result back into human readable form.
How do you do that in practice? Well, steps 1), 3) and 4) are easy, but what about step 2)?
Nearly every OS I know (and thus, nearly every programming language) does the conversion needed in step 2) for you. More often than not, the fixed point in time is 1970-01-01 00:00:00, and the OS / programming language provides routines to convert any date / time to the number of seconds (or some other unit) which have elapsed since this fixed point.
For example, in JavaScript, the myDate.getTime() function returns the number of milliseconds which have passed since 1970-01-01 up to myDate.
So convert both dates to "milliseconds since 1970-01-01" and subtract them. Use the .abs() function on the result. Then you have the desired time span as a value of positive milliseconds. Convert that back to human readable form, i.e. years, months and days (which is no problem, is it?)
A second simple solution (just for avoiding negative results):
I hope that you agree with me that comparing two dates is much easier than computing the difference between them (first compare the year; if the years differ, you have undoubtedly found the "greater" date; if the years are equal, do the same with the months, and so on). Then exchange the two dates if necessary. That way, you always can make sure that you subtract the "smaller" date from the "greater" date and that the result always will be positive.
But please note that even when doing so there will still be negative results in parts of the calculation when actually subtracting the dates, so you would have exactly the same problems when using the .abs() function.
A more complicated solution:
You could do the subtraction yourself as well, but then the .abs() function won't help you much. One of the algorithms I can think of could work like a subtraction which is done by hand (I mean the subtraction of normal numbers you have learned in school):
Begin with the least significant unit (for example the days). Subtract the days; if the result is negative, then add 28, 29, 30 or 31 (depending on the month) and make a carry to the months, otherwise keep the result; then do the same thing with the months, and so on. But as I already wrote in my comment, there are many pitfalls when doing so (leap years, months have different numbers of days, and so on), and the .abs() function will not help you here.
Conclusion:
Personally, I would prefer the first (simple) solution I have given. It is easy, understandable and future-proof.
//initial variables
var today = new Date();
var day = today.getDate();
var month = today.getMonth() + 1;
var year = today.getFullYear();
var otherDate = new Date();
var day2 = 0;
var month2 = 0;
var year2 = 0;
if (day < 10) {
day = '0' + day;
}
if (month < 10) {
month = '0' + month;
}
function age(day2, month2, year2) {
dayConv = day2;
monthConv = month2;
yearConv = year2;
newDate = day - dayConv;
newMonth = month - monthConv;
newYear = year - yearConv;
}
function mathDate() {
if (newYear >= 1) {
if (newMonth >= 1) {
if (newDate >= 1) {
console.log(newYear + " years and " + newMonth + " months and " + newDate + " days.");
return newYear + " years and " + newMonth + " months and " + newDate + " days.";
} else if (newDate <= 0) {
console.log(newYear + " years and " + newMonth + " months.");
return newYear + " years and " + newMonth + " months.";
}
} else if (newMonth <= 0) {
console.log(newYear + " years and " + newDate + " days.");
return newYear + " years and " + newDate + " days.";
}
} else if (newYear <= 1) {
if (newMonth >= 1) {
console.log(newMonth + " months and " + newDate + " days.");
return newMonth + " months and " + newDate + " days.";
} else if (newDate <= 0) {
console.log(newMonth + " months.");
return newMonth + " months.";
} else if (newMonth <= 0) {
console.log(newDate + " days.");
return newDate + " days.";
}
}
}
age(13, 4, 2016);
mathDate();
Here is the answer I was able to create.
I want to disable the past time from dropdown once user selects date.
Below is the sample code:
function (declare, DateTextBox, locale, dom, lang, registry, ready) {
var pad, update_current_available_times, get_hour_string;
pad = function (n) {
n = n + '';
return n.length >= 2 ? n : new Array(2 - n.length + 1).join('0') + n;
},
get_hour_string = function (t) {
var hour = pad(t.getHours()-1);
var minute = pad(t.getMinutes());
return 'T' + hour + ':' + minute + ':00';
},
For minutes , i changed as below but giving wrong result.But when trying to disable past time from minutes giving unexpected results.
get_hour_string = function (t) {
var hour = pad(t.getHours()-1); //added -1 to disable past time when used dojo1.9
var d1 = new Date (),
d2 = new Date ( d1 );
d2.setMinutes ( d1.getMinutes() + 20 );
var minute1 = pad(d2.getMinutes());
alert("d2.getMinutes() : " + d2.getMinutes() );
return 'T' + hour + ':' + minute1 + ':00';
}
Please suggest what are the changes in javascript file need to do to fix disabling past time from minutes dropdown.
Seems to me like you have it almost working..?
If I'm looking at this right, in your hour selector's onChange function, you just need to change:
useMin = 'T02:' + pad(now.getMinutes()) + ':00';
to
useMin = 'T' + pad(v.getHours()) + ':' + pad(now.getMinutes()) + ':00';
Does this work? http://jsfiddle.net/8o23tbLu/27/
Edit: Ah, I see you are using a little trick to only show minutes in the minute dropdown. You could probably just use a dijit/form/Select instead, but it's a nice trick!
Since you have set visibleIncrement and clickableIncrement to 02:05:00 and 02:00:00, what the dropdown is actually showing is:
00:00:00
02:05:00
04:10:00
...
22:55:00
So when setting the minimum constraint on the minute dropdown, you actually have to set the "invisible" hour as well.
As an example, if "now" is 14:34:00, you have to take the 34 minutes, check which 2-hour "group" it belongs to: 34 % 5 = 6ish.
Then get the hour from that: 2 * 6 = 12
.. so the useMin for the minute dropdown in that case would be T12:34:00.
useMin = 'T' +
pad(2 * Math.floor(now.getMinutes() / 5)) + ':' +
pad(now.getMinutes()) + ':00';
At least I think that would do it :) There may be a simpler solution.
I have trouble using date in Javascript, in PHP you use something like date("Y-m-d H:i s") to retrieve the specific date and time, how can I achieve this in Javascript? the getMonth() method only returns 1 digit, I really need them to be in 2 digits
Since I made comments on almost all answers, I'd better post my suggestion
DEMO
function pad(num) { return ("0"+num).slice(-2); }
function getDisplayDate() {
var date = new Date();
return date.getFullYear()+
"-"+pad(date.getMonth()+1)+
"-"+pad(date.getDate())+
" "+pad(date.getHours())+
":"+pad(date.getMinutes())+
":"+pad(date.getSeconds());
}
setInterval(function() {
document.getElementById("time").innerHTML=getDisplayDate();
},500);
why dont you add 0 before when you get <10
Try this :
function dateToYMD(date) {
var d = date.getDate();
var m = date.getMonth() + 1;
var y = date.getFullYear();
return '' + y + '-' + (m<=9 ? '0' + m : m) + '-' + (d <= 9 ? '0' + d : d) + ' ' + date.getHours() + ':' + date.getMinutes() + ':' + date.getSeconds();
}
var d = new Date();
alert(dateToYMD(d));
This code is adjusted based on the pointers given by #mplungjan -- (credits to him please)
Also check out his solution, which is a better one for use with date digits.
var str = 10; // month-digit from getMonth()
function pad(val) {
return "0" + val;
}
var month = str < 10 ? pad(str) : str;
console.log(month);
you can year, minutes, etc from Date class. You can get 2 digits month using some trick like example below. e.g
Date.prototype.getLongMonth = function() {
var month = this.getMonth();
if (String(month).length == 1) month = '0'.concat(month);
return month;
}
var now = new Date();
var theDate = now.getFullYear() + '-' + now.getLongMonth() + '-' + now.getDate() + ' ' + now.getHours() + ':' + now.getMinutes() + ':' + now.getSeconds();
console.log(theDate); // result : 2013-02-17 12:41:2