We Keep Coding

Filtering unix timestamps

So, I am working on a time registration management tool. I have a date picker component where I choose the date I want to see the registrations from. It gives me the Unix timestamp of that day and I store that value, fx. 1606856503.
Now, I am retrieving all registrations from the API, which is an array of objects where each object is a registration. Each registration has a date property, which is basically a Unix timestamp from the date it was created.
[{
"id": "1",
"userId": "userId 1",
"customerId": "customerId 1",
"case": "case 1",
"description": "description 1",
"hours": 72,
"date": 1606826246,
"customer": "customer 1",
"project": "project 1"
}]
Now, that I have a date picker Unix timestamp, I would like to filter the registrations in order to filter and display only registrations which were made on the day of the Unix timestamp from the picker, but can't figure out how would I compare them and filter based on the day.

Here's a quick snippet illustrating using either Date.prototype.toISOString() or Date.prototype.toDateString() to filter against a specified timestamp.
Since your timestamps are stored in seconds and javascript dates use milliseconds, you need to multiply by 1000 when creating your dates
const filterTimestamp = 1606859476; // Tuesday, December 1, 2020 9:51:16 PM
const filterDate = new Date(filterTimestamp*1000);
You can then filter by comparing the first 10 characters of the date strings returned by toISOString() which will always keep the timezone as zero UTC offset
const filterDateString = new Date(filterTimestamp*1000).toISOString().slice(0, 10);
// "2020-12-01" sliced from "2020-12-01T21:51:16.000Z"
const regsOnDate = regs.filter(o => (
new Date(o.date*1000).toISOString().slice(0, 10) === filterDateString));
or by the date strings returned by toDateString() which will use the local timezone
const filterDateString = new Date(filterTimestamp*1000).toDateString();
const regsOnDate = regs.filter(o => (
new Date(o.date*1000).toDateString() === filterDateString));
// eg: compares "Mon Nov 02 2020" to "Tue Dec 01 2020"
Using toISOString()
const regs = [
{
"id": "1",
"date": 1606826246, // Tuesday, December 1, 2020 12:37:26 PM
"customer": "customer 1",
},
{
"id": "2",
"date": 1604353553, // Monday, November 2, 2020 9:45:53 PM
"customer": "customer 2",
},
{
"id": "3",
"date": 1606860022, // Tuesday, December 1, 2020 10:00:22 PM
"customer": "customer 3",
}
]
const filterTimestamp = 1606859476; // Tuesday, December 1, 2020 9:51:16 PM
const filterDateString = new Date(filterTimestamp*1000).toISOString().slice(0, 10);
// "2020-12-01" sliced from "2020-12-01T21:51:16.000Z"
const regsOnDate = regs.filter(o => (
new Date(o.date*1000).toISOString().slice(0, 10) === filterDateString));
console.log( regsOnDate );
Using toDateString()
const regs = [
{
"id": "1",
"date": 1606826246, // Tuesday, December 1, 2020 12:37:26 PM
"customer": "customer 1",
},
{
"id": "2",
"date": 1604353553, // Monday, November 2, 2020 9:45:53 PM
"customer": "customer 2",
},
{
"id": "3",
"date": 1606860022, // Tuesday, December 1, 2020 10:00:22 PM
"customer": "customer 3",
}
]
const filterTimestamp = 1606859476; // Tuesday, December 1, 2020 9:51:16 PM
const filterDateString = new Date(filterTimestamp*1000).toDateString();
const regsOnDate = regs.filter(o => (
new Date(o.date*1000).toDateString() === filterDateString));
console.log( regsOnDate );

UNIX timestamps are seconds since 1 Jan 1970 UTC, ECMAScript time values are milliseconds since the same epoch, see Convert a Unix timestamp to time in JavaScript.
If you just want to compare values for the same date UTC, you can just compare whole days since the epoch. That means a simple arithmetic operation on the value rather than using Date objects. e.g.
let data = [{"id": "1","date": 1606826246}, // 1 Dec 2020 UTC
{"id": "2","date": 1606867200}, // 2 Dec 2020 UTC
{"id": "3","date": 1606953600} // 3 Dec 2020 UTC
];
// Start with date sometime on 2 Dec 2020 UTC
let d = new Date(Date.UTC(2020,11,2,8,32,21)); // 2 Dec 2020 08:32:21 Z
console.log('Test date: ' + d.toISOString());
// Get whole days since epoch
let daysSinceEpoch = d.getTime() / 8.64e7 | 0;
console.log('daysSinceEpoch: ' + daysSinceEpoch);
// Find matching records in data
let result = data.filter(obj => (obj.date / 8.64e4 | 0) == daysSinceEpoch);
console.log('Matching records: ' + JSON.stringify(result));
// Matching date values
console.log('Matching dates:');
result.forEach(obj => console.log('id: ' + obj.id + ' on ' + new Date(obj.date * 1000).toISOString().substr(0,10)));
You can do the same thing with local dates, you just need to be a bit more careful of getting the days, see How do I get the number of days between two dates in JavaScript?

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

Using JSON.parse() with date fields?

Let's say you have the following object as a string:
var timecard = {
"name": "Joe",
"time": "Sun Apr 26 2015 13:58:54 GMT-0400 (EDT)"
}
// as string
var stringed = 'var timecard = { "name": "Joe", "time": "Sun Apr 26 2015 13:58:54 GMT-0400 (EDT)" }'
and you run JSON.parse(stringed) to parse it into the object. How would you go about having it convert the date into an actual Date object as opposed to a string?
Thanks!

The JSON data format doesn't have a date type, so you have to write the code to transform it into a Date object yourself.
You can pass a reviver function as the second argument to JSON.parse to do that.
function parseDate(k, v) {
if (k === "time") {
return new Date(v);
}
return v;
}
var json = '{ "name": "Joe", "time": "Sun Apr 26 2015 13:58:54 GMT-0400 (EDT)" }';
var data = JSON.parse(json, parseDate);
console.log(data);