Date(), Date.UTC() strange behavior with scope operator - javascript

Is that me doing something wrong or some known bug of using scope operator ([...arr]) with Date()/Date.UTC() constructor?
What confuses me:
x = [2015,5,1]; //(3) [2015, 5, 1]
new Date(2015, 5, 1); //Just as expected, Mon Jun 01 2015 00:00:00 GMT+0300 (Eastern European Summer Time)
new Date([...x]); //Fri May 01 2015 00:00:00 GMT+0300 (Eastern European Summer Time)
new Date(Date.UTC([...x])) //Invalid Date
p.s. I know, the latter is ambiguous, since Date() with more than 1 argument already returns UTC date

Date.UTC parameter is not an array.
Remove the array like :
x = [2015, 5, 1];
var d = new Date(Date.UTC(...x))
console.log(d)

Because you are passing the same array x as argument. Use Rest parameters. Because Date.UTC doesnot accept array as argument
UTC() takes comma-delimited date and time parameters
x = [2015,5,1]; //(3) [2015, 5, 1]
new Date(2015, 5, 1); //Just as expected, Mon Jun 01 2015 00:00:00 GMT+0300 (Eastern European Summer Time)
console.log(new Date(Date.UTC(...x)))

Related

javascript Date.toISOString() return difference date value

I'm confusing about the javascript Date.toISOString() function which shown as below example, how come date value of x in ISO format become January?
const date = new Date();
const x = (new Date(date.getFullYear(), date.getMonth() , 1));
console.log(date); \\Tue Feb 04 2020 11:11:12 GMT+0800 (Malaysia Time)
console.log(x); \\Sat Feb 01 2020 00:00:00 GMT+0800 (Malaysia Time)
console.log(date.toISOString()); \\2020-02-04T03:11:12.330Z
console.log(x.toISOString()); \\2020-01-31T16:00:00.000Z
This is due to time zone conversion from GMT+08 to UTC. The toISOString function converts the date to UTC (as a note you can determine that the date is in the UTC time zone by "Z" at the end of the string).
When converting Feb 01 2020 00:00:00 GMT+0800 to an ISO string, the date is reduced by 8 hours and hence becomes Jan 31 2020 16:00:00.

How to keep unique months in array of timestamps

I want to create an array that contains unique months (August 2015, September 2015 etc.). For this I defined the following function that takes an object with timestamps as keys:
export function getUniqueMonths(exps) {
//1. get all keys from expenditures
const days = Object.keys(exps)
//2. convert key strings to timestamps
const daysInt = days.map((day) => (new Date(parseInt(day))))
//3. return only the "date portion" of the timestamp
const datePortion = daysInt.map((day) => (new Date(day.toDateString()) ))
//4. set each datePortion to 1st of month
const firstOfMonth = datePortion.map((day) => new Date(day.getFullYear(), day.getMonth(), 1) )
//5. keep only unique firstOfMonths
const uniqMonths = [...(new Set(firstOfMonth))]
return uniqMonths
}
However, this function gives me an array like this:
[Sat Aug 01 2015 00:00:00 GMT+0300 (Eastern European Summer Time), Sat Aug 01 2015 00:00:00 GMT+0300 (Eastern European Summer Time), Tue Sep 01 2015 00:00:00 GMT+0300 (Eastern European Summer Time), Sat Aug 01 2015 00:00:00 GMT+0300 (Eastern European Summer Time), Sat Aug 01 2015 00:00:00 GMT+0300 (Eastern European Summer Time), ...]
I thought getting the date portion of the timestamp (step 3) and setting all dates to first of month (step 4) would do the trick. But I still have duplicates in my array.
What am I missing?
I think you might be overengineering things :) Something like
function getUniqueMonths(exps) {
const uniqueMonths = new Set();
Object.keys(exps).forEach((timestamp) => {
const date = new Date(parseInt(timestamp)); // expected to be milliseconds since 1/1/1970
uniqueMonths.add(`${date.getFullYear()}-${date.getMonth()}`);
});
return uniqueMonths;
}
should get you a Set of unique months in the form of ['2017-12', '2018-0', ...] (zero-based months as is the JavaScript standard).
If you need Date objects, those are trivial to "rehydrate".
Two Date objects are not the same object, even if they contain the same timestamp.
Instead, try:
//3. keep the year-month portion of the date
const yearMonths = daysInt.map(day => day.getFullYear()+"-"+day.getMonth());
Then you can skip 4 and just get the unique year-months from there. These will be returned as "2015-7" for August 2015, for example.

Date.UTC failed to show correctly

This Meteor client method tries to return Thu Mar 09 2017 00:00:00 GMT+1100 (AEDT) but it it returning Thu Mar 09 2017 11:00:00 GMT+1100 (AEDT) instead.
How can it be fixed? thx
dateToISO: (date) => { // date format in YYYY-MM-DD like "2017-03-09"
const dArr = date.split('-');
return new Date(Date.UTC(parseInt(dArr[0]), parseInt(dArr[1]) - 1, parseInt(dArr[2]), 0, 0, 0, 0));
}
Well, as I try to reproduce it, that actually seems like a bug in the Date.UTC function.
I was trying to do:
console.log("Unmanipulate: " + new Date(Date.UTC(97, 4, 13, 0, 0)));
console.log("Manipulate: " + new Date(Date.UTC(97, 4, 13, -3, 0)));
Which return:
Unmanipulate: Tue May 13 1997 03:00:00 GMT+0300 (IDT)
Manipulate: Tue May 13 1997 00:00:00 GMT+0300 (IDT)
Look like the time zone is pass to the hour params, which is really weird. maybe I'm missing something.
You can read more about the spec of this function here.
I would recommend use Moment.js, which make it really easy to deal with dates in js, like this:
function dateToISO (date) {
return moment(date).utc().format();
}

Why are those dates different?

Here the console output:
new Date(2016, 08, 22)
Thu Sep 22 2016 00:00:00 GMT+0200 (CEST)
new Date("2016, 08, 22")
Mon Aug 22 2016 00:00:00 GMT+0200 (CEST)
Different months but why ?
Javascript months are 0 based in the numeric case, but in the string parsing 08 is mapped to August as it is a string translation of "August" in standard date format.
Date is being invoked in different ways as mentioned here
new Date();
new Date(value);
new Date(dateString);
new Date(year,month[, day[, hour[, minutes[, seconds[, milliseconds]]]]]);
In your case, 3 & 4 formats are being called.
>> new Date(2016, 08, 22)
>> Thu Sep 22 2016 00:00:00 GMT+0530 (IST)
>> new Date(2016, 01, 22)
>> Mon Feb 22 2016 00:00:00 GMT+0530 (IST)
>> new Date(2016, 0, 22)
>> Fri Jan 22 2016 00:00:00 GMT+0530 (IST)
>> new Date("2016-08-22")
>> Mon Aug 22 2016 05:30:00 GMT+0530 (IST)
>> new Date("2016/08/22")
>> Mon Aug 22 2016 00:00:00 GMT+0530 (IST)
#RobG's input from the comments:
...parsing ofstrings other than ISO 8601 extended format is entirely
implementation dependent. The result of parsing "2016, 08, 22" could be anything, including an invalid Date.
The second Date constructor you use is intended to parse a (known) string representation of a date, like "Dec 25, 1995". The format you pass in is not a standard one, so even though the result is close to the correct date (and could be fixed by correcting the month value, as pointed out by DhruvPathak), it should not be used as results my differ depending on the runtime/browser.

Array Of JS Dates How To Group By Days

I'm trying to figure out the most optimal and with as minimum amount of loops way to group my array of js dates objects from this: (Take a note this is browser console output it's actully real JS dates like new Date())
[Sat Aug 08 2015 08:30:00 GMT+0200 (Central Europe Daylight Time), Sat Aug 08 2015 09:30:00 GMT+0200 (Central Europe Daylight Time), Sun Aug 09 2015 08:30:00 GMT+0200 (Central Europe Daylight Time), Sun Aug 09 2015 09:30:00 GMT+0200 (Central Europe Daylight Time), Mon Aug 10 2015 18:00:00 GMT+0200 (Central Europe Daylight Time), Mon Aug 10 2015 23:00:00 GMT+0200 (Central Europe Daylight Time), Tue Aug 11 2015 18:00:00 GMT+0200 (Central Europe Daylight Time), Tue Aug 11 2015 23:00:00 GMT+0200 (Central Europe Daylight Time), Wed Aug 12 2015 18:00:00 GMT+0200 (Central Europe Daylight Time), Wed Aug 12 2015 23:00:00 GMT+0200 (Central Europe Daylight Time)]
to oragnized array with each date of the same day inside a "chunk" so I can display it on the UI "Aug 08" and show 2 or how many dates inside that day.
for example:
[{day: 'Aug 08', times:[Sat Aug 08 2015 08:30:00 GMT+0200 (Central Europe Daylight Time), Sat Aug 08 2015 09:30:00 GMT+0200 (Central Europe Daylight Time)]}]
My current way I thought about doing it was
var startDays = _.map(occurences, function (date) {
return moment(date).startOf('day').format();
});
After that to get unique days:
_.uniq(startDays, true)
and after I got the unique days another loop to add the same day to this group as you can see by now you might see why I don't like it and this is why I would love to get some smart help because nothing gets to my head with this. Thank you.
Underscore has the _.groupBy function which should do exactly what you want:
var groups = _.groupBy(occurences, function (date) {
return moment(date).startOf('day').format();
});
This will return an object where each key is a day and the value an array containing all the occurrences for that day.
To transform the object into an array of the same form as in the question you could use map:
var result = _.map(groups, function(group, day){
return {
day: day,
times: group
}
});
To group, map and sort you could do something like:
var occurrenceDay = function(occurrence){
return moment(occurrence).startOf('day').format();
};
var groupToDay = function(group, day){
return {
day: day,
times: group
}
};
var result = _.chain(occurences)
.groupBy(occurrenceDay)
.map(groupToDay)
.sortBy('day')
.value();
Presuming your data is actually strings, I don't know why you think you need either of those libraries. You are just grouping strings based on substrings.
ES5 introduced reduce, which is great for accumulating things:
A helper to create an array of dates:
// Generate a dates array given a start date and how many to create:
function genDates(startDate, count) {
var d = new Date(+startDate),
dates = [d];
for (var i=0; i<count; i++) {
d = new Date(+d);
d.setHours(d.getHours() + 10);
dates.push(d);
}
return dates;
}
This answer originally dealt with strings, modified to work with Dates:
// Generate date key 'MMM dd'
// Replaces use of moment.js
function getDateKey(date) {
var d = date.getDate();
var m = ['Jan','Feb','Mar','Apr','May','Jun','Jul','Aug','Sep','Oct','Nov','Dec'];
return m[date.getMonth()] + ' ' + ((d<10?'0':'') + d);
}
// Generate an array in format [{day:'MMM dd', times:[d0, d1, ...]}, ...]
// Replaces use of underscore.js
var obj = dates.reduce(function(acc, d) {
var p = getDateKey(d)
if (!acc[0].hasOwnProperty(p)) acc[0][p] = [];
acc[0][p].push(d);
return acc;
},[{}])
.reduce(function(acc, v){
Object.keys(v).forEach(function(k){acc.push({day:k, times:v[k]})});
return acc;
},[]);
console.log(JSON.stringify(obj));
If optimal performance is the key, the above is 20 times faster than the underscore + Moment solution for an array of 5 to 100 dates. To make it faster, remove all use of iterators and libraries and use a single function with for loops. Note that the above is only one line of code longer than the solution using Moment.js and underscore.js.
If you need to grouping also by year or (and) month with day - I recommend to use my solution.
In answers above if you'll get different month or year with the same day - your grouping will be incorrect.
Look at the good solution:
_.groupBy(arrayOfDates, function (el) {
return (el.getFullYear() + '|y|') + (el.getMonth() + '|m|') + (el.getDate() + '|d|');
});
What I do here? Just create an unique keys for each date, which includes: year, month and day. And then I group an array by this unique key.
result
Why do need this optimization? If your array is not large enoguh than you probably don't need to optimize your algorithm.
I am not familiar with the given js libraries, but you can group your array by days with one loop. But you need to somehow determine the current day in the array and then create corresponding js object with a day-field and a times-array field and then add this object to your resulting array.
It will be much faster if you presort your array before implementing this algorithm.

Categories

Resources