We Keep Coding

Why is momentjs converting the time zone the wrong way?

I have a form that schedules events. Part of the form is setting the event start time. The form has selection fields for Date, Time, and Timezone. I use this information with momentJS to build a dateTime called eventTime. The form should not submit if the selected DateTime is in the past. So I wrote some simple logic that says:
timeDiff = moment(eventTime).diff(currentTime).
If timeDiff is less than zero the no submit.(More below) This is fine but I am having issues with timezones. So here is what I am trying to do:
If I currently reside in EST and it is 2:00pm then my form should not submit if select 1:45 EST on the given day. But if I change the "Time Zone" dropdown to "Central Time" Then it should submit. Assuming I am not thinking incorrectly
1:45 CST = 2:45 EST
Therefore since it is currently 2:00 CST the form should submit, but momentJS is going the other way and it is thinking the time is 1:45 EST. Based on the moment objects below (in UTC time) I would expect "Central Zone Moment Object" to be Thu Jun 25 2020 10: 45: 00 GMT instead of Thu Jun 25 2020 08: 45: 00 GMT what am I missing.
Thanks
let date = "2020-06-25";
let time = "13:45";
let timezoneEST = "America/New_York";
let timezoneCST = "America/Chicago";
let currentTime = moment().tz(moment.tz.guess());
let eventTimeEST = moment.tz(moment(date).set({ "hour": time.substring(0, 2), "minute": time.substring(3, 5) }), timezoneEST);
let eventTimeCST = moment.tz(moment(date).set({ "hour": time.substring(0, 2), "minute": time.substring(3, 5) }), timezoneCST);
timeDiff = moment([eventTimeEST or eventTimeCST]).diff(currentTime)
if (timeDiff > 0) {
// allow submit
}
console.log(eventTimeEST)
// Eastern Zone Moment Object
// {
// _isAMomentObject: true
// _d: Thu Jun 25 2020 09: 45: 00 GMT - 0400(Eastern Daylight Time)
// _i: Thu Jun 25 2020 00: 00: 00 GMT - 0400(Eastern Daylight Time)
// _isAMomentObject: true
// _isUTC: true
// _isValid: true
// _locale: Locale { _calendar: { … }, _longDateFormat: { … }, _invalidDate: "Invalid date", _dayOfMonthOrdinalParse: /\d{1,2}(th|st|nd|rd)/, ordinal: ƒ, … }
// _offset: -240
// _pf: { empty: false, unusedTokens: Array(0), unusedInput: Array(0), overflow: -2, charsLeftOver: 0, … }
// _z: Zone { name: "America/New_York", abbrs: Array(236), untils: Array(236), offsets: Array(236), population: 21000000 }
// }
console.log(eventTimeCST)
// Central Zone Moment Object
// {
// _isAMomentObject: true
// _d: Thu Jun 25 2020 08: 45: 00 GMT - 0400(Eastern Daylight Time)
// _i: Thu Jun 25 2020 00: 00: 00 GMT - 0400(Eastern Daylight Time)
// _isAMomentObject: true
// _isUTC: true
// _isValid: true
// _locale: Locale { _calendar: { … }, _longDateFormat: { … }, _invalidDate: "Invalid date", _dayOfMonthOrdinalParse: /\d{1,2}(th|st|nd|rd)/, ordinal: ƒ, … }
// _offset: -240
// _pf: { empty: false, unusedTokens: Array(0), unusedInput: Array(0), overflow: -2, charsLeftOver: 0, … }
// _z: Zone { name: "America/New_York", abbrs: Array(236), untils: Array(236), offsets: Array(236), population: 21000000 }
// }
console.log(currentTime)
// Current Time(EST) Moment Object
// {
// _d: Thu Jun 25 2020 09: 00: GMT - 0400(Eastern Daylight Time)
// _isAMomentObject: true
// _isUTC: true
// _isValid: true
// _locale: Locale { _calendar: { … }, _longDateFormat: { … }, _invalidDate: "Invalid date", _dayOfMonthOrdinalParse: /\d{1,2}(th|st|nd|rd)/, ordinal: ƒ, … }
// _offset: -240
// _pf: { empty: false, unusedTokens: Array(0), unusedInput: Array(0), overflow: -2, charsLeftOver: 0, … }
// _z: Zone { name: "America/New_York", abbrs: Array(236), untils: Array(236), offsets: Array(236), population: 21000000 }
// __proto__: Object
// }

let currentTime = moment().tz(moment.tz.guess());
let eventTimeEST = moment.tz(moment(date).set({ "hour": time.substring(0, 2), "minute": time.substring(3, 5) }), timezoneEST);
let eventTimeCST = moment.tz(moment(date).set({ "hour": time.substring(0, 2), "minute": time.substring(3, 5) }), timezoneCST);
This code is basically setting a date in your current TZ and then translating it into another timezone (America/New York-America/Chicago).
The second statement is basically doing EDT to EDT.
The third statement is doing EDT to CDT.
That's why it goes back an hour. Because 1:45 PM EDT is 12:45 PM CDT.
But what you really want to do is to get the time at that timezone.
Eg. 1:45 PM CDT.
The way you do it is by basically setting the time on that timezone.
let date = "2020-06-25";
let timezoneEDT = "America/New_York";
let timezoneCDT = "America/Chicago";
let notBefore = { hour : 14, minute : 0 };
let clock = { hour : 13, minute : 45 };
let a = moment(date).tz(timezoneEDT).set(notBefore); //14:00 EDT
let b = moment(date).tz(timezoneCDT).set(clock); //13:45 CDT -> 14:45 EDT
let c = moment(date).tz(timezoneEDT).set(clock); //13:45 EDT
console.log(test(a, b)); //14:00 EDT against 14:45 EDT prints valid
console.log(test(a, c)); //13:45 EDT against 14:00 EDT prints invalid
function test(a,b){
return a.diff(b) > 0 ? 'Invalid date' : 'Valid date';
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.27.0/moment.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment-timezone/0.5.31/moment-timezone-with-data-2012-2022.js"></script>

As expected
let eventTimeCST = moment.tz(moment(date).set({ "hour": time.substring(0, 2), "minute": time.substring(3, 5) }), timezoneCST);
creates a moment object in my timezone (EST) and the .tz adjusts that time zone. I needed to create a new moment object in the CST timeZone, compare it to my timezone.
That can be achieved like;
let eventTimeCST = moment.tz({'year': 2020, 'month': 06, 'day': 26, 'hour': 9, 'minute': 30}, timezoneCST)
So I just parsed out date and time and built the object.
FYI replacing
{'year': 2020, 'month': 06, 'day': 26, 'hour': 9, 'minute': 30}
with
date + " " time
also worked but threw a deprecation warning

modifying an object using ... in JavaScript

I have an object called added that looks like this:
{
title: "test1",
startDate: "Mon Apr 15 2019 10:30:00 GMT-0500 (Central Daylight Time)",
endDate: "Mon Apr 15 2019 11:00:00 GMT-0500 (Central Daylight Time)",
allDay: false
}
I was trying edit the startDate and endDate field of this object by doing:
added = {
...added,
{added.startDate: "111", added.endDate: "222"}
}
But this gives me an error that says
unexpected token, expected ,
What is the right way of doing this?

When reassigning added as a new object literal, everything inside the {}s needs to be key-value pairs, or it needs to spread (with ...) an object with key-value pairs into the new object. You can't put a plain object into an object literal (unless you spread it), because an object is a value, not a key-value pair.
Change to:
added = {
...added,
startDate: "111",
endDate: "222"
}
You could also do
added = {
...added,
...{
startDate: "111",
endDate: "222"
}
}
which would be valid syntax (but silly do to - easier to just list the new properties in the outer object literal).

How to Update an object in an array

This is my Array
$scope.tooltipsArray = [
{
date: 2018-10-10T07:03:43.835Z,
text: 'name1'
},
{
date: 2018-09-29T18:30:00.000Z,
text: 'name2'
}
];
How can I update date to locale date format like this.
$scope.tooltipsArray = [
{
date: Wed Oct 10 2018 14:05:27 GMT+0530 (India Standard Time),
text: 'name1'
},
{
date: Sun Sep 30 2018 00:00:00 GMT+0530 (India Standard Time),
text: 'name2'
}
];
I have used map() to do that. But it does not work
var vector = $scope.tooltipsArray.map(function (el) { return new Date(el.date).toLocaleDateString(); });
Can anyone tell me how to do this from map() in JavaScript?

You can use the below code -
$scope.tooltipsArray = [
{
date: "2018-10-10T07:03:43.835Z",
text: 'name1'
},
{
date: "2018-09-29T18:30:00.000Z",
text: 'name2'
}
];
var vector = $scope.tooltipsArray.map(function(el) {return { 'date':new Date(el.date).toString(),'text':el.text}});
console.log(vector);
The output will be like below -
[
{date: "Wed Oct 10 2018 12:33:43 GMT+0530 (India Standard Time)", text: "name1"}
{date: "Sun Sep 30 2018 00:00:00 GMT+0530 (India Standard Time)", text: "name2"}
]

Why is there a .value key after tooltipsArray?
You assigned the array to tooltipsArray, so unless there's a Proxy involved, expect to access the array through $scope.tooltipsArray.
To fix it, just remove .value.
var vector = $scope.tooltipsArray.map(function (el) { return new Date(el.date).toLocaleDateString(); });

1- Remove .value why is there in the first place?
2- You need to change the date inside the object and then return el instead of date if you just want the date to be changed, likewise:
var vector = $scope.tooltipsArray.map(function(el) {
el.date = new Date(el.date).toLocaleDateString();
return el;
});

What map function does is going through array element one by one and run the callback function, so what you have to do is update the whole object or update one entry
el.date = new Date(el.date).toLocaleDateString();

How to ignore time-zone on new Date()?

I have JavaScript function called updateLatestDate that receive as parameter array of objects.
One of the properties of the object in array is the MeasureDate property of date type.
The function updateLatestDate returns the latest date existing in array.
Here is the function:
function updateLatestDate(sensorsData) {
return new Date(Math.max.apply(null, sensorsData.map(function (e) {
return new Date(e.MeasureDate);
})));
}
And here is the example of parameter that function receive:
[{
"Address": 54,
"AlertType": 1,
"Area": "North",
"MeasureDate": "2009-11-27T18:10:00",
"MeasureValue": -1
},
{
"Address": 26,
"AlertType": 1,
"Area": "West",
"MeasureDate": "2010-15-27T15:15:00",
"MeasureValue": -1
},
{
"Address": 25,
"AlertType": 1,
"Area": "North",
"MeasureDate": "2012-10-27T18:10:00",
"MeasureValue": -1
}]
The function updateLatestDate will return MeasureDate value of last object in the array.
And it will look like that:
var latestDate = Sat Oct 27 2012 21:10:00 GMT+0300 (Jerusalem Daylight Time)
As you can see the time of the returned result is different from the time of the input object.The time changed according to GMT.
But I don't want the time to be changed according to GMT.
The desired result is:
var latestDate = Sat Oct 27 2012 18:10:00
Any idea how can I ignore time zone when date returned from updateLatestDate function?

As Frz Khan pointed, you can use the .toISOString() function when returning the date from your function, but if you're seeking the UTC format, use the .toUTCString(), it would output something like Mon, 18 Apr 2016 18:09:32 GMT
function updateLatestDate(sensorsData) {
return new Date(Math.max.apply(null, sensorsData.map(function (e) {
return new Date(e.MeasureDate).toUTCString();
})));
}

The Date.toISOString() function is what you need
try this:
var d = new Date("2012-10-27T18:10:00");
d.toISOString();
result:
"2012-10-27T18:10:00.000Z"

If you use moment it will be
moment('Sat Oct 27 2012 21:10:00 GMT+0300', 'ddd MMM DD DDDD HH:mm:SS [GMT]ZZ').format('ddd MMM DD YYYY HH:mm:SS')

Javascript sorting with two properties

I'm struggling with sorting two levels. The logic is as follows. If any of the objects have a status, return the most recent object with a status. If none of the objects have a status, return the most recent object without a status.
var apps = [
{ status: 'PASS',
date_created: Thu Sep 03 2015 17:24:45 GMT-0700 (PDT)
},
{ status: 'FAIL',
date_created: Thu Sep 02 2015 17:24:45 GMT-0700 (PDT),
},
{ status: '',
date_created: Thu Sep 03 2015 17:24:45 GMT-0700 (PDT),
}
]
var desired_result = [{ status: 'PASS',
date_created: Thu Sep 03 2015 17:24:45 GMT-0700 (PDT)
}]
var apps_2 = [
{ status: '',
date_created: Thu Sep 03 2015 17:24:45 GMT-0700 (PDT)
},
{ status: '',
date_created: Thu Sep 02 2015 17:24:45 GMT-0700 (PDT),
},
{ status: '',
date_created: Thu Sep 01 2015 17:24:45 GMT-0700 (PDT),
}
]
var desired_resul2 = [{ status: '',
date_created: Thu Sep 03 2015 17:24:45 GMT-0700 (PDT)
}]
I've tried
var sorted = _.sort_by(apps, function (x) { x.date_updated });
I've also looked a few other SO questions but can't keep the objects in place after the first sort.

If I understand your question correctly, here is what you are looking for. http://jsfiddle.net/whxu5sea/3/
You need to filter the elements to ensure they have a status of ANY kind. Then sort them by date, earliest first. Then get that first value. In my example I assumed the dates where strings, but still should work.
var apps = [
{ status: 'PASS',
date_created: 'Thu Sep 03 2015 17:24:45 GMT-0700 (PDT)'
},
{ status: 'FAIL',
date_created: 'Thu Sep 02 2015 17:24:45 GMT-0700 (PDT)',
},
{ status: '',
date_created: 'Thu Sep 01 2015 17:24:45 GMT-0700 (PDT)',
}
];
var x;
var arr = _.filter(apps, function(data) {
return !!data.status.length;
});
x = _.chain( arr.length ? arr : apps )
.sortBy(function(data) {
return new Date(data.date_created).getTime();
}).last().value();
console.log( x );
To check if it works when no status is provided: http://jsfiddle.net/whxu5sea/4/
I hope this helps. LMK if any further clarification is needed.
EDIT: Updated to get NEWEST element (last).

Here is a simple solution that iterates just once through apps, without a filtering step. See here for a jsfiddle.
The concept is that, if status is falsy, its date is converted into a negative number that retains the correct sort order among all falsy elements, but makes all falsy elements have a lower sort order than all non-falsy ones.
We convert the falsy element dates by subtracting 8640000000000001, which is (the maximimum millis in a Date, plus one).
var x = _.chain(apps).sortBy(function(x) {
var date = new Date(x.date_created).getTime();
return x.status ? date : date - 8640000000000001;
}).last().value();
console.log( x );