0

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.

Luka
  • 171
  • 1
  • 1
  • 19

2 Answers2

1

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 );
pilchard
  • 12,414
  • 5
  • 11
  • 23
0

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?

RobG
  • 142,382
  • 31
  • 172
  • 209