Why is momentjs converting the time zone the wrong way? - javascript

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

Related

Generating 7 days in a week as formatted object

so I am using the momentJS library as the moment to create an array of 7 days in a week like this:
const moment = require('moment')
var startOfWeek = moment().startOf('week');
var endOfWeek = moment().endOf('week');
var days = [];
var day = startOfWeek;
while (day <= endOfWeek) {
days.push(day.format("MMMM ddd DD, YYYY "));
day = day.clone().add(1, 'd');
}
console.log(days);
And the result return an array of 7 days a week like this:
["December Sun 25, 2022 ","December Mon 26, 2022 ", "December Tue 27, 2022 " , "December Wed 28, 2022 ", "December Thu 29, 2022 ", "December Fri 30, 2022 ", "December Sat 31, 2022 "]
But the result that I look for is something like this:
const weekday = [
{
day: Mon,
date: 26
},
{
day: Tue,
date: 27
},
{
day: Wed,
date: 28
},
{
day: Thu,
date: 26
},
{
day: Fri,
date: 26
},
{
day: Sat,
date: 26
},
]
I am stuck on how to convert the data, could anyone able to help me ? Thanks
Without momentjs, you can use toLocaleDateString and other native Date methods to achieve the result:
const day = new Date(); // Today
day.setDate(day.getDate() - day.getDay() - 1); // Most recent Saturday (not today)
const weekday = Array.from({length: 7}, () => (
day.setDate(day.getDate() + 1), {
day: day.toLocaleDateString("en-US", { weekday: "short" }),
date: day.getDate(),
}
));
console.log(weekday);
If you wish to keep the original output to use elsewhere and not modify the original code, you can map over the days array and construct a new array based on the formatted string (converting to an integer as necessary).
const days = ["December Sun 25, 2022 ", "December Mon 26, 2022 ", "December Tue 27, 2022 ", "December Wed 28, 2022 ", "December Thu 29, 2022 ", "December Fri 30, 2022 ", "December Sat 31, 2022 "]
const weekday = days.map((formattedDate) => {
const [_, day, dateString] = formattedDate.split(" ");
return {
day,
date: parseInt(dateString)
};
});
console.log(weekday);
Alternatively, you can modify your original code
//const moment = require('moment')
const startOfWeek = moment().startOf('week');
const endOfWeek = moment().endOf('week');
// uncomment if you still want `days`
// const days = [];
const weekday = [];
let day = startOfWeek;
while (day <= endOfWeek) {
// days.push(day.format("MMMM ddd DD, YYYY "));
weekday.push({ day: day.format("ddd"), date: day.date() });
day = day.clone().add(1, 'd');
}
console.log(weekday);
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.29.4/moment.min.js"></script>

JavaScript: Return associative array instead of common array

I'm referring to this answer again.
var firstEvents = events.reduce(function(ar, e) {
var id = e.getId();
if (e.isRecurringEvent() && e.isAllDayEvent() && !ar.some(function(f) {return f.eventId == id})) {
ar.push({eventTitle: e.getTitle(), eventId: id, startDate: e.getAllDayStartDate(), endDate: e.getAllDayEndDate()});
}
return ar;
}, []);
What do I have to change to get an array with the event titles (Strings) as keys and the start dates (Date objects) as values so I can retrieve a certain start date (Date object) via firstEvents['some event title']?
EDIT:
Current Ouput:
firstEvents = [{eventTitle=Event title 1, eventId=xyz1#google.com, startDate=Sun Mar 18 00:00:00 GMT+01:00 2018, endDate=Mon Mar 19 00:00:00 GMT+01:00 2018},
{eventTitle=Event title 2, eventId=xyz2#google.com, startDate=Tue Mar 19 00:00:00 GMT+01:00 2019, endDate=Wed Mar 20 00:00:00 GMT+01:00 2019},
{eventTitle=Event title 3, eventId=xyz3#google.com, startDate=Fri Mar 20 00:00:00 GMT+01:00 2020, endDate=Sat Mar 21 00:00:00 GMT+01:00 2020}]
Needed Output (Pseudo):
firstEvents = ['Event title 1' => Sun Mar 18 00:00:00 GMT+01:00 2018,
'Event title 2' => Tue Mar 19 00:00:00 GMT+01:00 2019,
'Event title 3' => Fri Mar 20 00:00:00 GMT+01:00 2020]
Do not use push, but set to object with key.
ar = {}; // You may need to change source parameter too
// you cannot change input Array [] to Object {} type inside function
// you can get Array and return Object, but source variable will not change
ar[e.getTitle()] = e.getAllDayStartDate();
Or using some demo data:
var ar = [
{
eventTitle: 'one',
eventId: '#1',
startDate: new Date(),
endDate: new Date()
},
{
eventTitle: 'two',
eventId: 'secondId',
startDate: new Date(),
endDate: new Date()
}];
var retVal = {};
for (var i of ar) {
retVal[i.eventId] = i;
}
console.log(JSON.stringify(retVal, null, 2));
console.log(retVal['#1']);
console.log(retVal.secondId);

How to avoid error of JavaScript date formatting

I'm using the DHTMLX Scheduler in my web app and want to get the data for each event and found a way to do it with scheduler._events which returns this:
1581498064943: {…}
​​
_eday: 2 ​​
_end_date: undefined ​​
_first_chunk: true ​​
_last_chunk: true ​​
_length: 1 ​​
_sday: 1 ​​
_sorder: 0 ​​
_sweek: 0 ​​
_timed: true ​​
end_date: Date Tue Jan 02 2018 00:05:00 GMT+0100 (Central European Standard Time) ​​
event_length: "" ​​
event_pid: "" ​​
id: 1581498064943 ​​
rec_pattern: ""
​​rec_type: "" ​​
start_date: Date Tue Jan 02 2018 00:00:00 GMT+0100 (Central European Standard Time) ​​
text: "New event"
the problem is when I convert it into a string to store it as a JSON later, JavaScript converts dates into iso 8601 and loses a day in the conversion:
"1581498064943": {
"start_date": "2018-01-01T23:00:00.000Z",
"end_date": "2018-01-01T23:05:00.000Z",
"text": "New event",
"id": 1581498064943,
"_timed": true,
"_sday": 1,
"_eday": 2,
"_length": 1,
"_sweek": 0,
"_sorder": 0,
"_first_chunk": true,
"_last_chunk": true,
"event_pid": "",
"event_length": "",
"rec_pattern": "",
"rec_type": ""
2018-01-02 becomes 2018-01-01
It's not reducing oneday. It's because of your timeZone.
check the following code.
var x= new Date("Date Tue Jan 02 2018 00:05:00 GMT+0100 (Central European Standard Time)")
x.toISOString()
y = new Date(x)
You will get the initial date again. So, to use it from the JSON again you need that ISOstring to be converted again
Better try with Unix epoch seconds format to resolve this issue.
const now = Date.now(); // Unix timestamp in milliseconds
console.log( now );
Once you convert this you can retrieve the same exact time based on your local region specification.
var utcSeconds = 1581501372817/1000;
var d = new Date(0); // The 0 there is the key, which sets the date to the epoch
d.setUTCSeconds(utcSeconds);
console.log(d);

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

Categories