Develop Reference

Weird date issue in javascript

I have a SharePoint list with delivery date column. I have created a table to display current week and next week delivery items using javascript. Everything works fine but for couple of team members Thursday delivery items are displaying in Wednesday cell and Friday items in Thursday cell.
I am not sure why it is happening. Can anyone help me out to resolve this issue? Any help would be greatly appreciated.
Here is my code. Added alerts to verify data, I am wondering why in second and third alerts sunday is showing Monday date and in third alert monday is showing Tuesday date. Added alert messages at the bottom. Please advice.
today = moment();
sundayDate = new Date(today.startOf('week'));
sundayShortDate = sundayDate.toLocaleDateString();
sundayTitle = getFormattedDate(sundayDate);
window.alert("sundayDate ::"+sundayDate+"");
monDate = new Date(sundayDate.setDate(sundayDate.getDate() + 1));
monSDate = monDate.toLocaleDateString();
monTitle = getFormattedDate(monDate);
window.alert("sundayDate ::"+sundayDate+"; monDate::"+monDate+"");
tueDate = new Date(monDate.setDate(monDate.getDate() + 1));
tuesSDate = tueDate.toLocaleDateString();
tueTitle = getFormattedDate(tueDate);
window.alert("sundayDate ::"+sundayDate+"; monDate::"+monDate+"; tueDate::"+tueDate+"");
First window alert:
sundayDate ::Sun Aug 16 2020 00:00:00 GMT-0400 (Eastern Daylight Time)
Second Alert:
sundayDate ::Mon Aug 17 2020 00:00:00 GMT-0400 (Eastern Daylight Time); monDate::Mon Aug 17 2020 00:00:00 GMT-0400 (Eastern Daylight Time)
Third Alert:
sundayDate ::Mon Aug 17 2020 00:00:00 GMT-0400 (Eastern Daylight Time); monDate::Tue Aug 18 2020 00:00:00 GMT-0400 (Eastern Daylight Time); tueDate::Tue Aug 18 2020 00:00:00 GMT-0400 (Eastern Daylight Time)

As was already commented, you are mutating the dates with calls to setDate().
As you already use moment, don't switch back to Date objects, but stick to moment objects.
For example:
let today = moment();
let fmt = "dddd, MMMM Do YYYY";
let sunDate = today.startOf('week');
let sunShortDate = sunDate.format(fmt);
let monDate = sunDate.clone().add(1, "day");
let monShortDate = monDate.format(fmt);
let tueDate = monDate.clone().add(1, "day");
let tueShortDate = tueDate.format(fmt);
console.log({ sunShortDate, monShortDate, tueShortDate });
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.15.0/moment.min.js"></script>
Just like Date objects, also moment objects are mutable, and so you should call clone first before calling add.

You set sundayDate to sundayDate.setDate(sundayDate.getDate() + 1)
You should do:
monDate = new Date(sundayDate.getDate() + 1);
P.S.
I'm not sure if mixing moment.js and js Date is a good idea.

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();
}

Javascript loop and insert new object

I with ajax get this data:
[{"id":125,"price":225,"start":"Tue, 26 Apr 2016 00:00:00 +0000","user_id":8},{"id":124,"price":200,"start":"Wed, 27 Apr 2016 00:00:00 +0000","user_id":8},{"id":121,"price":67,"start":"Sat, 23 Apr 2016 00:00:00 +0000","user_id":8},{"id":114,"price":45,"start":"Sun, 08 May 2016 00:00:00 +0000","user_id":9},{"id":113,"price":55,"start":"Sun, 24 Apr 2016 00:00:00 +0000","user_id":8},{"id":111,"price":55,"start":"Wed, 01 Jun 2016 00:00:00 +0000","user_id":11},{"id":110,"price":53,"start":"Fri, 03 Jun 2016 00:00:00 +0000","user_id":8},{"id":107,"price":53,"start":"Wed, 03 Aug 2016 00:00:00 +0000","user_id":8},{"id":106,"price":55,"start":"Mon, 01 Aug 2016 00:00:00 +0000","user_id":8},{"id":105,"price":53,"start":"Tue, 16 Aug 2016 00:00:00 +0000","user_id":8},{"id":104,"price":55,"start":"Thu, 21 Apr 2016 00:00:00 +0000","user_id":11},{"id":101,"price":57,"start":"Wed, 17 Aug 2016 00:00:00 +0000","user_id":8}]
so as you can see there is start data.
I also have:
var start = '04/17/2016 12:00 am';
var end = '09/20/2016 12:01 am';
Now I need to make loop day by day from start to end, check if day(date) excist into json and if not add new data into json :
{"id":0,"price":100,"start":"DATE","user_id":0}
What is the best way to do that?
UPDATE:
I create one new with dates from start to end but now I need to put json into new array: http://jsbin.com/qekijumobe/edit?js,output

My another answer had a fault in there, this is what I came up after it:
First, create a foreach loop, wich loops trough all of the objects inside the array
for (var obj of objArray) {} //Use "of" instead of "in" tk get the values and not the indices
Then, inside this loop, check every field of the objects, if they're the same, abd if they're, then break out the loop, else, if there's no matching object, push it in the array.
function isInArray(yourObj) {
for (var obj of objArray) {
if (obj.id == yourObj.id && obj.start == yourObj.start && obj.price == yourObj.price && obj.user_id == yourObj.user_id)
return true;
}
return false;
}

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.

Converting a .NET DateTime to a Javascript Date

I have a WCF service that serves some dates to my javascript. I want to manipulate the date, but it arrives in the javascript looking like this:
/Date(1361145600000+0000)/
I know this is the miliseconds since 1970/01/01, but I havent been able to figure out how to convert it to a javascript Date.
Do I need to use a regex or trim the text to extract the miliseconds, and then use it like this:
new Date(miliseconds)
Surely there must be an easier way?

If the '+0000' is a standard timezone offset, the first 2 digits are hours, the last two, minutes.
Presumably it is not always '0000'-
You need to add(or subtract) the milliseconds difference from UTC to the first integral part to return the correct Date.
function timeconvert(ds){
var D, dtime, T, tz, off,
dobj= ds.match(/(\d+)|([+-])|(\d{4})/g);
T= parseInt(dobj[0]);
tz= dobj[1];
off= dobj[2];
if(off){
off= (parseInt(off.substring(0, 2), 10)*3600000)+
(parseInt(off.substring(2), 10)*60000);
if(tz== '-') off*= -1;
}
else off= 0;
return new Date(T+= off).toUTCString();
}
timeconvert('Date(1361145600000)+0000');
//returned value: (String UTC)
Mon, 18 Feb 2013 00:00:00 GMT
If the Dates ARE always in UTC ('+0000') you can just pull the significant digits from the string-
function timeconvert(ds){
var d=ds.match(/(\d+)/)[1];
return new Date(+d).toUTCString();
}
timeconvert('Date(1361145600000)+0000)');
// returned value: (String UTC)
Mon, 18 Feb 2013 00:00:00 GMT

Code proposed by kennebec has a bug with a dates, that lower than 1 January 1970.
For example, Date(-124054000000+0300) is Wed Jan 26 1966 07:33:20
Fixed code :
http://output.jsbin.com/cejolu/3/edit?js,console
function timeconvert(ds){
var D, dtime, T, tz, off,
dobj = ds.match(/(-?\d+)|([+-])|(\d{4})/g);
T = parseInt(dobj[0], 10);
tz = dobj[1];
off = dobj[2];
if (off) {
off = (parseInt(off.substring(0, 2), 10) * 3600000) + (parseInt(off.substring(2), 10) * 60000);
if(tz == '-') off *= -1;
}
else off= 0;
return new Date(T += off).toUTCString();
}
Test for the newest changes :
console.log(timeconvert("Date(-124054000000+0300)"));
console.log(timeconvert('Date(1361145600000)+0000'));
console.log(timeconvert("Date(0+0300)"));
console.log(timeconvert("Date(-2+0200)"));
console.log(timeconvert("Date(-860000000000+1100)"));
/* Output */
"Wed, 26 Jan 1966 07:33:20 GMT"
"Mon, 18 Feb 2013 00:00:00 GMT"
"Thu, 01 Jan 1970 03:00:00 GMT"
"Thu, 01 Jan 1970 01:59:59 GMT"
"Thu, 01 Oct 1942 18:06:40 GMT"

You can create javascript dates using code such as:
var d = new Date("1/1/2012")
So it should be a matter of simply providing your .Net date as a format of:
new DateTime().ToString("M/d/yyyy")

I found another way of doing it, slightly adapted from kennebec's answer:
function timeConvert(date){
var miliseconds = date.replace(/(^.*\()|([+-].*$)/g, '');
miliseconds = parseInt(miliseconds);
return new Date(miliseconds);
}
var x = timeConvert("/Date(1361145600000+0000)/");
console.log(x);