Let me start off by apologizing for the length of this post but I want to be as verbose as possible as this issue is very interesting and weird.
I am rendering a date picker with room availability for resorts that my company manages. This is accomplished with two functions (one back end function and one front end function).
The back end function makes a request to an external API, formats the response into an array of date objects and returns the array.
The front end function calls the back end function and then pushes the response onto an object that renders the availability.
The array of date objects is not changed or mutated in any way after it is formatted by the back end function. Yet somehow the dates that are rendered on the front end are always one day before the date that is returned from the back end function.
I know that sounds confusing so let me clarify.
Here is the array of date objects that is returned from the back end function:
correct dates
Here is what is rendered to the date picker:
Incorrect dates
At first I was almost convinced that the date picker was just getting the dates wrong so I did a bit more digging and found out that the dates that are stored in the array are somehow changing as they are being passed back to the front end function.
Here is the code for the front end function that is applicable:
getAvailAsync(startDate, endDate, attributeId, resortId, room, resort, duration).then(response => {
console.log("returned to front end", response.res.availability)
response.res.error ? "" : repeaterData.push(response.res)
$w("#resortsRepeater").data = repeaterData
if(repeaterData.length > 12) {
$w("#loadMore").show()
}
if(repeaterData.length > 0) {
$w("#loadingStrip").collapse()
}
})
Here is what is logged to the console from the front end:
[
{
"startDate": "Fri Jul 15 2022 17:00:00 GMT-0700 (Pacific Daylight Time)",
"endDate": "Fri Jul 15 2022 17:00:00 GMT-0700 (Pacific Daylight Time)"
},
{
"startDate": "Sat Jul 16 2022 17:00:00 GMT-0700 (Pacific Daylight Time)",
"endDate": "Sat Jul 16 2022 17:00:00 GMT-0700 (Pacific Daylight Time)"
},
{
"startDate": "Sun Jul 17 2022 17:00:00 GMT-0700 (Pacific Daylight Time)",
"endDate": "Sun Jul 17 2022 17:00:00 GMT-0700 (Pacific Daylight Time)"
},
{
"startDate": "Mon Jul 18 2022 17:00:00 GMT-0700 (Pacific Daylight Time)",
"endDate": "Mon Jul 18 2022 17:00:00 GMT-0700 (Pacific Daylight Time)"
},
{
"startDate": "Tue Jul 19 2022 17:00:00 GMT-0700 (Pacific Daylight Time)",
"endDate": "Tue Jul 19 2022 17:00:00 GMT-0700 (Pacific Daylight Time)"
},
{
"startDate": "Tue Jul 26 2022 17:00:00 GMT-0700 (Pacific Daylight Time)",
"endDate": "Tue Jul 26 2022 17:00:00 GMT-0700 (Pacific Daylight Time)"
}
]
As you can see the first date is July 15th and the last date is July 26th.
Now here is the applicable code from the back end getAvailAsync function:
if(validAvail == undefined) {
resolve({ res: {error: "No availability found"}})
} else {
console.log("Valid avail before passing to the front end", validAvail)
validAvail.length > 0
?
resolve({
res: {
...resortInfo,
...roomInfo,
availability: validAvail
}
})
: resolve({
res: {error: "No availability found"}
})
}
Here is what is logged to the console from the back end function:
[
{
"startDate": "2022-07-16T00:00:00.000Z",
"endDate": "2022-07-16T00:00:00.000Z"
},
{
"startDate": "2022-07-17T00:00:00.000Z",
"endDate": "2022-07-17T00:00:00.000Z"
},
{
"startDate": "2022-07-18T00:00:00.000Z",
"endDate": "2022-07-18T00:00:00.000Z"
},
{
"startDate": "2022-07-19T00:00:00.000Z",
"endDate": "2022-07-19T00:00:00.000Z"
},
{
"startDate": "2022-07-20T00:00:00.000Z",
"endDate": "2022-07-20T00:00:00.000Z"
},
{
"startDate": "2022-07-27T00:00:00.000Z",
"endDate": "2022-07-27T00:00:00.000Z"
}
]
As you can see the first date is July 16th and the last date is July 27th.
What's more is every single date has been decremented by 1 somehow.
I am completely clueless as to why this is happening. The only thing that I can think of is that the back end function has a date object for the start date and end date after being returned from the API (see the first image where it says {"startDate": {$date: "2022-07-02...}, ...}
Could that somehow be messing up the date? And if so how do I resolve this?
As pilchard mentioned this issue was related to the changing of time zones when the date object was passed to the front end and rendered to the screen. I just had to set the hour manually to noon using date.setHours(). This way the date was not changed when the timezone changed.
I got a array of data the data is dates they are sorted per day.
Wat i want to get is the data grouped by date(day) and all the data of every day needs to be in new and separated array. my data can be short 1 date string in 1 day or very long month's or year
My data:
accountDateArray = [
Mon Jun 08 2020 19:47:16 GMT+0200 (Midden-Europese zomertijd),
Mon Jun 08 2020 19:47:26 GMT+0200 (Midden-Europese zomertijd),
Mon Jun 08 2020 19:47:34 GMT+0200 (Midden-Europese zomertijd),
Tue Jun 09 2020 15:40:31 GMT+0200 (Midden-Europese zomertijd),
Tue Jun 09 2020 15:42:28 GMT+0200 (Midden-Europese zomertijd),
Wed Jun 10 2020 00:06:50 GMT+0200 (Midden-Europese zomertijd),
Wed Jun 10 2020 00:06:50 GMT+0200 (Midden-Europese zomertijd),
Wed Jun 10 2020 08:10:51 GMT+0200 (Midden-Europese zomertijd),
Fri Jun 12 2020 10:59:21 GMT+0200 (Midden-Europese zomertijd),
...
]
What i want is:
[
[
Mon Jun 08 2020 19:47:16 GMT+0200 (Midden-Europese zomertijd),
Mon Jun 08 2020 19:47:26 GMT+0200 (Midden-Europese zomertijd),
Mon Jun 08 2020 19:47:34 GMT+0200 (Midden-Europese zomertijd),
],
[
Tue Jun 09 2020 15:40:31 GMT+0200 (Midden-Europese zomertijd),
Tue Jun 09 2020 15:42:28 GMT+0200 (Midden-Europese zomertijd),
],
...
]
My code
let NewDateArray = [];
for (let i in accountDateArray) {
NewDateArray.push(accountDateArray[i].toString().substring(0, 10));
}
let unique = [...new Set(NewDateArray)];
for (let i in accountDateArray) {
for (let n in unique) {
if (
unique[n] === accountDateArray[i].toString().substring(0, 10)
) {
console.log(accountDateArray[i]);
}
}
}
You can make use of reduce function, I hope this will lead you to the right direction.
var accountDateArray = ['Mon Jun 08 2020 19:47:16 GMT+0200 (Midden-Europese zomertijd)','Mon Jun 08 2020 19:47:26 GMT+0200 (Midden-Europese zomertijd)','Mon Jun 08 2020 19:47:34 GMT+0200 (Midden-Europese zomertijd)','Tue Jun 09 2020 15:40:31 GMT+0200 (Midden-Europese zomertijd)','Tue Jun 09 2020 15:42:28 GMT+0200 (Midden-Europese zomertijd)','Wed Jun 10 2020 00:06:50 GMT+0200 (Midden-Europese zomertijd)','Wed Jun 10 2020 00:06:50 GMT+0200 (Midden-Europese zomertijd)','Wed Jun 10 2020 08:10:51 GMT+0200 (Midden-Europese zomertijd)','Fri Jun 12 2020 10:59:21 GMT+0200 (Midden-Europese zomertijd)',];
var result = Object.values(accountDateArray.reduce((acc, date)=>{
const key = new Date(date).getDate();
acc[key] = [...(acc[key] || []), date];
return acc;
},{}));
console.log(result);
This question already has answers here:
How do I format a date in JavaScript?
(68 answers)
Closed 4 years ago.
I have an array of date
["Mon Jul 16 2018 11:40:28 GMT+0200 (CEST)",
"Fri Jul 13 2018 09:33:46 GMT+0200 (CEST)",
"Fri Jul 13 2018 09:21:36 GMT+0200 (CEST)",
"Fri Jul 13 2018 09:03:42 GMT+0200 (CEST)",
"Fri Jul 13 2018 09:01:05 GMT+0200 (CEST)",
"Fri Jul 13 2018 08:53:23 GMT+0200 (CEST)",
"Fri Jul 13 2018 08:52:33 GMT+0200 (CEST)",
"Thu Jul 12 2018 13:41:59 GMT+0200 (CEST)",
"Thu Jul 12 2018 13:41:49 GMT+0200 (CEST)",
"Thu Jul 12 2018 13:41:42 GMT+0200 (CEST)"]
I want to get it in a different format as exemple
Monday 16 July 2018 instead of "Mon Jul 16 2018 11:40:28 GMT+0200 (CEST)"
Is there a way to go through the table and transform the date ?
const test1 = test.map(a => a.toISOString().slice(0, 10))
console.log(test1)
Tried this got an error
var test = ["Mon Jul 16 2018 11:40:28 GMT+0200 (CEST)",
"Fri Jul 13 2018 09:33:46 GMT+0200 (CEST)",
"Fri Jul 13 2018 09:21:36 GMT+0200 (CEST)",
"Fri Jul 13 2018 09:03:42 GMT+0200 (CEST)",
"Fri Jul 13 2018 09:01:05 GMT+0200 (CEST)",
"Fri Jul 13 2018 08:53:23 GMT+0200 (CEST)",
"Fri Jul 13 2018 08:52:33 GMT+0200 (CEST)",
"Thu Jul 12 2018 13:41:59 GMT+0200 (CEST)",
"Thu Jul 12 2018 13:41:49 GMT+0200 (CEST)",
"Thu Jul 12 2018 13:41:42 GMT+0200 (CEST)"
]
// Monday 16 July 2018 instead of "Mon Jul 16 2018 11:40:28 GMT+0200 (CEST)"
const test1 = test.map(a => a.toISOString().slice(0, 10));
console.log(test1)
toISOString does not give me the format you wanted.
You wanted
Monday 16 July 2018
instead of
"Mon Jul 16 2018 11:40:28 GMT+0200 (CEST)"
toLocaleString gives us a long month:
new Date(a).toLocaleString("en-us",{
weekday: 'long',
year: 'numeric',
month: 'long',
day: 'numeric' })
then you can move the texts around like this:
var test = ["Mon Jul 16 2018 11:40:28 GMT+0200 (CEST)", "Fri Jul 13 2018 09:33:46 GMT+0200 (CEST)", "Fri Jul 13 2018 09:21:36 GMT+0200 (CEST)", "Fri Jul 13 2018 09:03:42 GMT+0200 (CEST)", "Fri Jul 13 2018 09:01:05 GMT+0200 (CEST)", "Fri Jul 13 2018 08:53:23 GMT+0200 (CEST)", "Fri Jul 13 2018 08:52:33 GMT+0200 (CEST)", "Thu Jul 12 2018 13:41:59 GMT+0200 (CEST)", "Thu Jul 12 2018 13:41:49 GMT+0200 (CEST)", "Thu Jul 12 2018 13:41:42 GMT+0200 (CEST)" ]
const locale = "en-us";
var options = { weekday: 'long', year: 'numeric', month: 'long', day: 'numeric' }
let test1 = test.map(function(a) {
let dateStr = new Date(a).toLocaleString(locale,options);
return dateStr.replace(/(\w+), (\w+) (\d+), (\d+)/,"$1 $3 $2 $4");
})
console.log(test1)
// simpler if no replace of month:
// String
test1 = test.map(a => a.split(/ \d\d:/)[0]);
console.log(test1)
// date
test1 = test.map(a => new Date(a).toDateString());
console.log(test1)
Try this.
var days = ["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"]
var months = ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"]
var test = ["Mon Jul 16 2018 11:40:28 GMT+0200 (CEST)",
"Fri Jul 13 2018 09:33:46 GMT+0200 (CEST)",
"Fri Jul 13 2018 09:21:36 GMT+0200 (CEST)",
"Fri Jul 13 2018 09:03:42 GMT+0200 (CEST)",
"Fri Jul 13 2018 09:01:05 GMT+0200 (CEST)",
"Fri Jul 13 2018 08:53:23 GMT+0200 (CEST)",
"Fri Jul 13 2018 08:52:33 GMT+0200 (CEST)",
"Thu Jul 12 2018 13:41:59 GMT+0200 (CEST)",
"Thu Jul 12 2018 13:41:49 GMT+0200 (CEST)",
"Thu Jul 12 2018 13:41:42 GMT+0200 (CEST)"
]
// Monday 16 July 2018 instead of "Mon Jul 16 2018 11:40:28 GMT+0200 (CEST)"
const test1 = test.map(a => {
a= new Date(a);
var c= days[a.getDay()]+" "+a.getDate()+" "+months[a.getMonth()]+" "+a.getFullYear();
return c;
});
console.log(test1)
I have below array and I want to create another array of array. below is my array
$scope.data2 =
[
{"dt":"07 Jul 2015","avgdelay":"10","code_sent_time":"07 Jul 2015 12:30 PM","reply_received_time":"07 Jul 2015 12:40 PM","time_diff":10},
{"dt":"07 Jul 2015","avgdelay":"10","code_sent_time":"07 Jul 2015 02:10 AM","reply_received_time":"07 Jul 2015 02:30 AM","time_diff":20 },
{"dt":"07 Jul 2015","avgdelay":"10","code_sent_time":"07 Jul 2015 03:10 AM","reply_received_time":"07 Jul 2015 03:15 AM","time_diff":5 },
{"dt":"07 Jul 2015","avgdelay":"10","code_sent_time":"07 Jul 2015 04:45 AM","reply_received_time":"07 Jul 2015 05:00 AM","time_diff":15 },
{"dt":"08 Jul 2015","avgdelay":"20","code_sent_time":"08 Jul 2015 12:30 PM","reply_received_time":"08 Jul 2015 12:40 PM","time_diff":35},
{"dt":"08 Jul 2015","avgdelay":"20","code_sent_time":"08 Jul 2015 02:10 AM","reply_received_time":"08 Jul 2015 02:30 AM","time_diff":42 },
{"dt":"08 Jul 2015","avgdelay":"20","code_sent_time":"08 Jul 2015 03:10 AM","reply_received_time":"08 Jul 2015 03:15 AM","time_diff":5 },
{"dt":"08 Jul 2015","avgdelay":"20","code_sent_time":"08 Jul 2015 04:45 AM","reply_received_time":"08 Jul 2015 05:00 AM","time_diff":5 },
{"dt":"09 Jul 2015","avgdelay":"30","code_sent_time":"09 Jul 2015 12:30 PM","reply_received_time":"09 Jul 2015 12:40 PM","time_diff":1},
{"dt":"09 Jul 2015","avgdelay":"30","code_sent_time":"09 Jul 2015 02:10 AM","reply_received_time":"09 Jul 2015 02:30 AM","time_diff":28},
{"dt":"09 Jul 2015","avgdelay":"30","code_sent_time":"09 Jul 2015 03:10 AM","reply_received_time":"09 Jul 2015 03:15 AM","time_diff":12},
{"dt":"09 Jul 2015","avgdelay":"30","code_sent_time":"09 Jul 2015 04:45 AM","reply_received_time":"09 Jul 2015 05:00 AM","time_diff":17},
{"dt":"10 Jul 2015","avgdelay":"10","code_sent_time":"10 Jul 2015 12:30 PM","reply_received_time":"10 Jul 2015 12:40 PM","time_diff":19},
{"dt":"10 Jul 2015","avgdelay":"10","code_sent_time":"10 Jul 2015 02:10 AM","reply_received_time":"10 Jul 2015 02:30 AM","time_diff":21},
{"dt":"10 Jul 2015","avgdelay":"10","code_sent_time":"10 Jul 2015 03:10 AM","reply_received_time":"10 Jul 2015 03:15 AM","time_diff":15},
{"dt":"10 Jul 2015","avgdelay":"10","code_sent_time":"10 Jul 2015 04:45 AM","reply_received_time":"10 Jul 2015 05:00 AM","time_diff":15},
{"dt":"11 Jul 2015","avgdelay":"10", "code_sent_time":"11 Jul 2015 12:30 PM","reply_received_time":"11 Jul 2015 12:40 PM","time_diff":39},
{"dt":"11 Jul 2015","avgdelay":"10", "code_sent_time":"11 Jul 2015 02:10 AM","reply_received_time":"11 Jul 2015 02:30 AM","time_diff":7},
{"dt":"11 Jul 2015","avgdelay":"10", "code_sent_time":"11 Jul 2015 03:10 AM","reply_received_time":"11 Jul 2015 03:15 AM","time_diff":9},
{"dt":"11 Jul 2015","avgdelay":"10", "code_sent_time":"11 Jul 2015 04:45 AM","reply_received_time":"11 Jul 2015 05:00 AM","time_diff":22},
{"dt":"12 Jul 2015","avgdelay":"10","code_sent_time":"12 Jul 2015 12:30 PM","reply_received_time":"12 Jul 2015 12:40 PM","time_diff":32},
{"dt":"12 Jul 2015","avgdelay":"10","code_sent_time":"12 Jul 2015 02:10 AM","reply_received_time":"12 Jul 2015 02:30 AM","time_diff":11},
{"dt":"12 Jul 2015","avgdelay":"10","code_sent_time":"12 Jul 2015 03:10 AM","reply_received_time":"12 Jul 2015 03:15 AM","time_diff":52},
{"dt":"12 Jul 2015","avgdelay":"10","code_sent_time":"12 Jul 2015 04:45 AM","reply_received_time":"12 Jul 2015 05:00 AM","time_diff":37}
];
My resultant array would be like,
$scope.resarray = [
{"dt":"07 Jul 2015","avgdelay":"10","data" :
[
{"code_sent_time":"07 Jul 2015 12:30 PM","reply_received_time":"07 Jul 2015 12:40 PM","time_diff":10},
{"code_sent_time":"07 Jul 2015 02:10 AM","reply_received_time":"07 Jul 2015 02:30 AM","time_diff":20 },
{"code_sent_time":"07 Jul 2015 03:10 AM","reply_received_time":"07 Jul 2015 03:15 AM","time_diff":5 },
{"code_sent_time":"07 Jul 2015 04:45 AM","reply_received_time":"07 Jul 2015 05:00 AM","time_diff":15 }
]
},
{"dt":"08 Jul 2015","avgdelay":"20","data":
[
{"code_sent_time":"08 Jul 2015 12:30 PM","reply_received_time":"08 Jul 2015 12:40 PM","time_diff":35},
{"code_sent_time":"08 Jul 2015 02:10 AM","reply_received_time":"08 Jul 2015 02:30 AM","time_diff":42 },
{"code_sent_time":"08 Jul 2015 03:10 AM","reply_received_time":"08 Jul 2015 03:15 AM","time_diff":5 },
{"code_sent_time":"08 Jul 2015 04:45 AM","reply_received_time":"08 Jul 2015 05:00 AM","time_diff":5 }
]
},
{"dt":"09 Jul 2015","avgdelay":"30","data":
[
{"code_sent_time":"09 Jul 2015 12:30 PM","reply_received_time":"09 Jul 2015 12:40 PM","time_diff":1},
{"code_sent_time":"09 Jul 2015 02:10 AM","reply_received_time":"09 Jul 2015 02:30 AM","time_diff":28},
{"code_sent_time":"09 Jul 2015 03:10 AM","reply_received_time":"09 Jul 2015 03:15 AM","time_diff":12},
{"code_sent_time":"09 Jul 2015 04:45 AM","reply_received_time":"09 Jul 2015 05:00 AM","time_diff":17},
]
}
];
Every date have 4 rows and I want to generate the array where every date have another array having all 4 details for that date.
I tried with various options but not successded. Kindly help me to solve this.
Below Is what I have tried,
$scope.genarr = function()
{
var data2length = $scope.data2.length;
var firstdate = $scope.data2[0].dt;
var sourcecheckdate = firstdate.split(' ');
$scope.resarray = {};
var dtcheckflag = false;
var insertrow = null;
var j = 0;
var k = 0;
var z = 1;
var data=[];
for (var i=0;i< data2length;i++)
{
var targetcheckdate = $scope.data2[i].code_sent_time.split(' ');
if (targetcheckdate[0] === sourcecheckdate[0] && targetcheckdate[1] === sourcecheckdate[1] && targetcheckdate[2] === sourcecheckdate[2])
{
firstdate = $scope.data2[i].dt;
sourcecheckdate = firstdate.split(' ');
}
else
{
firstdate = $scope.data2[i].dt;
sourcecheckdate = firstdate.split(' ');
}
if (insertrow != firstdate)
{
k = 0;
$scope.resarray[j] = {"dt":$scope.data2[i].dt,"avgdelay":$scope.data2[i].avgdelay,"data":[]};
//$scope.resarray[j].data[k] = null;
$scope.resarray[j].data[k]= {"code_sent_time":$scope.data2[i].code_sent_time , "reply_received_time" :$scope.data2[i].reply_received_time , "time_diff" : $scope.data2[i].time_diff};
insertrow = firstdate;
j+=1;
}
else
{
$scope.resarray[j].data[k]= {"code_sent_time":$scope.data2[i].code_sent_time , "reply_received_time" :$scope.data2[i].reply_received_time , "time_diff" : $scope.data2[i].time_diff};
}
k +=1;
}
};
Please check this : http://plnkr.co/edit/BOYqNcdpi8uGKRraDAw1?p=preview
Controller:
$scope.data = []; //New formated array of data
for(var k = 0; k < $scope.data2.length; k++) {
var arrayData = {}; //Temporary object
arrayData.dt = $scope.data2[k].dt;
arrayData.avgdelay = $scope.data2[k].avgdelay;
arrayData.data = [];
for(var j = 0; j<4; j++,k++) {
if (arrayData.dt == $scope.data2[k].dt) {
var tempObj = {'code_sent_time': $scope.data2[k].code_sent_time,
'reply_received_time':$scope.data2[k].reply_received_time,
'time_diff':$scope.data2[k].time_diff
};
arrayData.data.push(tempObj);
}
}
$scope.data.push(arrayData);
}
the data field is currently an object, but it needs to be an array.
{"dt":"07 Jul 2015","avgdelay":"10","data" :
{
{"code_sent_time":"07 Jul 2015 12:30 PM"},
{"code_sent_time":"07 Jul 2015 02:10 AM"},
{"code_sent_time":"07 Jul 2015 03:10 AM"},
{"code_sent_time":"07 Jul 2015 04:45 AM"}
}
},
should be
{"dt":"07 Jul 2015","avgdelay":"10","data" :
[
{"code_sent_time":"07 Jul 2015 12:30 PM"},
{"code_sent_time":"07 Jul 2015 02:10 AM"},
{"code_sent_time":"07 Jul 2015 03:10 AM"},
{"code_sent_time":"07 Jul 2015 04:45 AM"}
]
},
{} creates and object, [] creates and array
var newData = [];
var dateDict = {};
angular.forEach(data2,function(d){
var temp = {};
if(dateDict[d.dt]){
dateDict[d.dt].push(d);
}
else{
dateDict[d.dt] = [];
dateDict[d.dt].push(d);
}
});
angular.forEach(dateDict,function(val,key){
var obj = {
"dt":key,
"avgdelay":val[0].avgdelay,
"data": val
};
newData.push(obj);
});
I think this will solve your problem. data2 is old data, newData is the one that you want.