Currently using Mongoose and Luxon to showcase the event date, however, I am encountering an issue where the displayed date is one day earlier than expected

Question

Currently using Mongoose and Luxon to showcase the event date, however, I am encountering an issue where the displayed date is one day earlier than expected

Currently, I am working with Mongoose and Luxon to present a date chosen by the user from a form. However, there seems to be an issue where the date is being console logged as one day, but appearing on the page as the previous day.

Below is my model setup:

const mongoose = require("mongoose");
const { DateTime, Settings } = require("luxon");

// Setting up time zone
console.log(Settings);

const Schema = mongoose.Schema;

let AccomplishmentSchema = new Schema({
  dateInput: {
    type: Date,
    required: true,
  },
  textInput: {
    type: String,
    required: true,
  },
});

AccomplishmentSchema.virtual("dateInput_formatted").get(function () {
  return DateTime.fromJSDate(this.dateInput).toLocaleString(DateTime.DATE_FULL); // format 'YYYY-MM-DD
});

module.exports = mongoose.model("Accomplishment", AccomplishmentSchema);

The following displays the console log alongside what appears on the webpage:

 dateInput: 2023-01-01T00:00:00.000Z,
 textInput: 'etst',

December 31, 2022 etst

It seems like this discrepancy could be related to some sort of time conversion error. Despite adjusting the time zone and settings, the problem persists, leaving me unable to identify a solution.

javascript mongodb express mongoose luxon

Answer 1

Answer №1

The functionality of Luxon is operating as expected and the screen is displaying accurate information. The issue lies within the data stored in your MongoDB database.

When parsing a date, many libraries take into account the current time zone. I currently reside in Switzerland.

const moment = require("moment");
console.log( moment('2023-01-01').toDate() )
> 2022-12-31T23:00:00.000Z

const { DateTime } = require("luxon");
console.log( DateTime.fromISO('2023-01-01').toJSDate() )
> 2022-12-31T23:00:00.000Z

const dayjs = require('dayjs')
console.log( dayjs('2023-01-01').toDate() )
> 2022-12-31T23:00:00.000Z

However, the default JavaScript new Date() constructor does not!

console.log( new Date('2023-01-01') )
> 2023-01-01T00:00:00.000Z

This behavior may vary depending on your environment and scripting engine.

It is advisable to utilize Luxon when parsing input data - ensure to use .toJSDate() to convert the DateTime object back to a Javascript native Date object.

Luxon typically utilizes the system time zone by default. You have the option to modify it:

const { DateTime, Settings } = require("luxon");
Settings.defaultZone = 'America/New_York';

If you are unconcerned with the exact time, you can also make use of startOf('day')

Settings.defaultZone = 'America/New_York';
DateTime.now().startOf('day').toJSDate()
> 2023-01-13T05:00:00.000Z

DateTime.now().startOf('day').toISO()
> '2023-01-13T00:00:00.000-05:00'

Answer 2

The functionality of Luxon is operating as expected and the screen is displaying accurate information. The issue lies within the data stored in your MongoDB database.

When parsing a date, many libraries take into account the current time zone. I currently reside in Switzerland.

const moment = require("moment");
console.log( moment('2023-01-01').toDate() )
> 2022-12-31T23:00:00.000Z

const { DateTime } = require("luxon");
console.log( DateTime.fromISO('2023-01-01').toJSDate() )
> 2022-12-31T23:00:00.000Z

const dayjs = require('dayjs')
console.log( dayjs('2023-01-01').toDate() )
> 2022-12-31T23:00:00.000Z

However, the default JavaScript new Date() constructor does not!

console.log( new Date('2023-01-01') )
> 2023-01-01T00:00:00.000Z

This behavior may vary depending on your environment and scripting engine.

It is advisable to utilize Luxon when parsing input data - ensure to use .toJSDate() to convert the DateTime object back to a Javascript native Date object.

Luxon typically utilizes the system time zone by default. You have the option to modify it:

const { DateTime, Settings } = require("luxon");
Settings.defaultZone = 'America/New_York';

If you are unconcerned with the exact time, you can also make use of startOf('day')

Settings.defaultZone = 'America/New_York';
DateTime.now().startOf('day').toJSDate()
> 2023-01-13T05:00:00.000Z

DateTime.now().startOf('day').toISO()
> '2023-01-13T00:00:00.000-05:00'

Answer 3

Answer №2

Understanding JS's Date functionality is crucial, as it does not inherently account for time zones. Instead, it tracks the milliseconds since Jan 1, 1970 in UTC. When accessing Date methods, results are adjusted based on the user's time zone or remain in UTC. The core data stored within Date lacks timezone specifics.

Consider the example of new Date(0), equivalent to new Date('1970-01-01T00:00Z').

For instance, with a computer set to Europe/Paris time zone, executing

new Date(0).toLocaleDateString('en-US')

yields '1/1/1970'. Shifting to

America/Los_Angeles</code alters the output to <code>'12/31/1969'

.

The discrepancy arises from Date representing midnight on Jan 1, 1970 in UTC. Consequently, this moment corresponds to varied local dates across different time zones.

Situations like displaying date-only values encounter challenges due to timezone variations. For example, presenting Date value 2023-01-01T00:00:00.000Z in a California browser triggers a Dec 31, 2022 display instead.

To address such issues, specifying that dates are in UTC alleviates concerns:

utcDateStoredInMongoDB = new Date ('2023-01-01T00:00:00.000Z');
// Obtain year, month, day in UTC.
year = utcDateStoredInMongoDB.getUTCFullYear();
month = utcDateStoredInMongoDB.getUTCMonth();
day = utcDateStoredInMongoDB.getUTCDate();
// Initialize new Date reflecting user's time zone.
dateForDatePicker = new Date(year, month, day);
// Utilize date for picker.
dateForDatePicker.toLocaleDateString();
// => '1/1/2023'

// Conversely, extract year/month/day in current zone and convert to UTC date.
dateReturnedByDatePicker = new Date(2023, 02, 15);
year = dateReturnedByDatePicker.getFullYear();
month = dateReturnedByDatePicker.getMonth();
day = dateReturnedByDatePicker.getDate();
dateToStoreInMongoDB = new Date(Date.UTC(year, month, day));
dateToStoreInMongoDB.toISOString();
// => '2023-03-15T00:00:00.000Z'

Improvements are expected with the introduction of the upcoming JavaScript Temporal API, simplifying handling of date-time complexities through features like Temporal.PlainDate.

Answer 4

Understanding JS's Date functionality is crucial, as it does not inherently account for time zones. Instead, it tracks the milliseconds since Jan 1, 1970 in UTC. When accessing Date methods, results are adjusted based on the user's time zone or remain in UTC. The core data stored within Date lacks timezone specifics.

Consider the example of new Date(0), equivalent to new Date('1970-01-01T00:00Z').

For instance, with a computer set to Europe/Paris time zone, executing

new Date(0).toLocaleDateString('en-US')

yields '1/1/1970'. Shifting to

America/Los_Angeles</code alters the output to <code>'12/31/1969'

.

The discrepancy arises from Date representing midnight on Jan 1, 1970 in UTC. Consequently, this moment corresponds to varied local dates across different time zones.

Situations like displaying date-only values encounter challenges due to timezone variations. For example, presenting Date value 2023-01-01T00:00:00.000Z in a California browser triggers a Dec 31, 2022 display instead.

To address such issues, specifying that dates are in UTC alleviates concerns:

utcDateStoredInMongoDB = new Date ('2023-01-01T00:00:00.000Z');
// Obtain year, month, day in UTC.
year = utcDateStoredInMongoDB.getUTCFullYear();
month = utcDateStoredInMongoDB.getUTCMonth();
day = utcDateStoredInMongoDB.getUTCDate();
// Initialize new Date reflecting user's time zone.
dateForDatePicker = new Date(year, month, day);
// Utilize date for picker.
dateForDatePicker.toLocaleDateString();
// => '1/1/2023'

// Conversely, extract year/month/day in current zone and convert to UTC date.
dateReturnedByDatePicker = new Date(2023, 02, 15);
year = dateReturnedByDatePicker.getFullYear();
month = dateReturnedByDatePicker.getMonth();
day = dateReturnedByDatePicker.getDate();
dateToStoreInMongoDB = new Date(Date.UTC(year, month, day));
dateToStoreInMongoDB.toISOString();
// => '2023-03-15T00:00:00.000Z'

Improvements are expected with the introduction of the upcoming JavaScript Temporal API, simplifying handling of date-time complexities through features like Temporal.PlainDate.

Currently using Mongoose and Luxon to showcase the event date, however, I am encountering an issue where the displayed date is one day earlier than expected

Answer №1

Answer №2

Similar questions

ngSwitchCase provider not found

Recording errors within the NodeJS / Express / React technology stack

Storing input data in a JavaScript array instead of sending it through an AJAX request

Stop the stream coming from getUserMedia

Ways to insert text at the start and end of JSON data in order to convert it into JSONP format

The i18n feature in Nuxt 3 retrieves language locales from an external API

Angular UI Grid failing to properly display date formatting

Running two different wdio.config.js files consecutively

Is there a way to automatically scroll vertically to a specific line in HTML?

Why will the experimental activation of React concurrent features in Nextjs 12 disable API routes?

KeyBy lodash method stores values in an object using the specified property as keys

"Utilize JavaScript to structure JSON, eliminate redundant entries, and calculate the total number

The GIF Loader fails to animate while an AJAX request is in progress

What is the best way to create a universal variable that can be accessed across all routes in an Express/

AgGrid's magical dropdown feature

Displaying genuine HTML content in a React application using Algolia Instantsearch

When using the `coffee-util` library, an issue may arise if the `require('./module')` function ends

Is there potentially a memory leak in this code? If there is, what steps can be taken to eliminate it?

Squashing the `require()` method in nwJS using emberJS

Tips on automatically navigating to a new webpage after the user logs in with react.js