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

acquire the document via ng-change

Creating a custom script for a search field that retrieves information from an XML document

`Is there a way to modify the zAxis of a Paper component in Material-UI?`

I'm struggling to understand why the jQuery find() method isn't functioning as expected

Modify the CSS when CKEditor is in focus

Is there a problem with AngularJS $state.go() not emitting $stateChangeSuccess?

What criteria should I consider when selecting a make for the createTheme components?

Angular 1.5 component causing Typescript compiler error due to missing semi-colon

What is the best way to extract all "conditions" nested under the key "logic" at the 0th index in a JSON object?

Aligning validation schema with file type for synchronization

Dealing with Cross-Origin Resource Sharing (CORS) issues when

What is the process for uploading a text file into JavaScript?

Generating div elements of varying colors using a combination of Jinja templating and JavaScript loop

Exploring the Realm of Javacript Template Literal Capabilities

I developed a Node.js Express server that establishes a connection to a MongoDB database hosted on mLab. I am now looking to integrate CRUD operations with this server from my React application. Can anyone

Triggering an error message when a user attempts to submit an incomplete angular form

Choosing multiple values in the selectize plugin from the controller: A step-by-step guide

Find and replace string words containing special characters such as $ or !

Tips for simulating the $timeout service with sinon?

Make sure the page preloader is visible before any other content is loaded