What causes two JavaScript date Objects to be instantiated in different ways?

Question

What causes two JavaScript date Objects to be instantiated in different ways?

I have a setup to enable/disable a button based on a datepicker. Here is how I'm checking for it:

  public dateChanged = false;
  public availableFromDate: Date;
  public availableToDate: Date;

 initDatepickers() {
    const currentDay = new Date();
    this.availableFromDate = currentDay;
    this.availableToDate = currentDay;
  }

 private dateCheck() {
    if ((this.availableFromDate > this.availableToDate) || (this.availableFromDate === this.availableToDate)) {
      this.dateChanged = false;
    } else {
      this.dateChanged = true;
    }
    console.log(this.dateChanged);
    console.log(`Available from - ${this.availableFromDate}`);
    console.log(`Available to - ${this.availableToDate}`);
  }

The check works fine in one direction, enabling the button when "from" date is lower. However, when logging values to the console, the button remains disabled because the initial value is false, not due to the condition being met.

The two date objects are initialized differently (console.log output):

true
clinics-upload-documents.component.ts:73 Available from - Fri Feb 22 2019 00:00:00 GMT+0100 (Central European Standard Time)
clinics-upload-documents.component.ts:74 Available to - Fri Feb 22 2019 10:52:31 GMT+0100 (Central European Standard Time)

It will always be true because the first date object is set at 00:00:00 while the second is set to the current local time.

These methods are used to handle date changes:

onFromChange(fromDate) {
  const dateType = 'from';
  this.setDateValues(fromDate, dateType);
}
onToChange(toDate) {
  const dateType = 'to';
  this.setDateValues(toDate, dateType);
}
private setDateValues(date: Date, dateType: string) {
  dateType === 'from' ? this.availableFromDate = new Date(date) : this.availableToDate = new Date(date);
  this.dateCheck();
}

What am I missing so badly?

javascript typescript date

Answer 1

Answer №1

Revise the following code:

const currentDay = new Date();
this.startDate = currentDay;
this.endDate = currentDay;

Change it to:

const currentDay = new Date();
currentDay.setHours(0, 0, 0, 0);
this.startDate = new Date(currentDay);
this.endDate = new Date(currentDay);

By resetting the time portion to zero, date comparison becomes simpler.

Now, update this code snippet:

if (
   (this.startDate > this.endDate) ||
   (this.startDate === this.endDate)
)

To this (assuming you want to check greater than or equal to):

if (this.startDate >= this.endDate)

Remember that comparing dates with === is not valid, but using <, ≦, >, ≧ is acceptable.

Answer 2

Revise the following code:

const currentDay = new Date();
this.startDate = currentDay;
this.endDate = currentDay;

Change it to:

const currentDay = new Date();
currentDay.setHours(0, 0, 0, 0);
this.startDate = new Date(currentDay);
this.endDate = new Date(currentDay);

By resetting the time portion to zero, date comparison becomes simpler.

Now, update this code snippet:

if (
   (this.startDate > this.endDate) ||
   (this.startDate === this.endDate)
)

To this (assuming you want to check greater than or equal to):

if (this.startDate >= this.endDate)

Remember that comparing dates with === is not valid, but using <, ≦, >, ≧ is acceptable.

Answer 3

Answer №2

It appears that the Date objects received from your date picker's onChange events are stripped of any time information, setting them all to midnight. On the other hand, when you instantiate new Date() objects, they come with the current time by default. If we were to rename the js Date class, it might have been more fittingly dubbed DateTime to avoid confusion. These differing time components in the comparison will lead to the === operator failing.

To work around this issue, consider utilizing a function like the one below to correctly set availableFromDate and availableToDate within your initDatepickers method:

private getCurrentDate() {
    const date = new Date();
    date.setHours(0);
    date.setMinutes(0);
    date.setSeconds(0);
    date.setMilliseconds(0);
}

UPDATE: Even after adjusting the dates as suggested above, the strict equality operator still won't yield the desired outcome due to how it compares Date objects. Since Dates are considered reference type objects, === checks for referential equivalence rather than value equality. For instance:

5 === 5; // This returns true, affirming that numbers are treated as value types
const number1 = { number: 5 }; // An object categorized under reference type, akin to Dates
const number2 = { number: 5 }; // Another reference type equivalent
number1 === number2; // In this case, the result is false since while their values match, each object remains distinct.

For an effective resolution, be sure to consult Salman's response.

Answer 4

It appears that the Date objects received from your date picker's onChange events are stripped of any time information, setting them all to midnight. On the other hand, when you instantiate new Date() objects, they come with the current time by default. If we were to rename the js Date class, it might have been more fittingly dubbed DateTime to avoid confusion. These differing time components in the comparison will lead to the === operator failing.

To work around this issue, consider utilizing a function like the one below to correctly set availableFromDate and availableToDate within your initDatepickers method:

private getCurrentDate() {
    const date = new Date();
    date.setHours(0);
    date.setMinutes(0);
    date.setSeconds(0);
    date.setMilliseconds(0);
}

UPDATE: Even after adjusting the dates as suggested above, the strict equality operator still won't yield the desired outcome due to how it compares Date objects. Since Dates are considered reference type objects, === checks for referential equivalence rather than value equality. For instance:

5 === 5; // This returns true, affirming that numbers are treated as value types
const number1 = { number: 5 }; // An object categorized under reference type, akin to Dates
const number2 = { number: 5 }; // Another reference type equivalent
number1 === number2; // In this case, the result is false since while their values match, each object remains distinct.

For an effective resolution, be sure to consult Salman's response.

What causes two JavaScript date Objects to be instantiated in different ways?

Answer №1

Answer №2

Similar questions

The new button placed on a <div> was not initialized to trigger my greasemonkey functions

Is there a way to divide a string using multiple separators that function as a single separator in JavaScript?

Retrieve a value for a textbox by comparing the values of two separate combo boxes

Passing Down Instance Methods Using Static References in JavaScript/TypeScript

Experimenting with a compound made up of two separate pure components

What causes my XMLHttpRequest to be terminated prematurely?

Passing information between components in Angular 2 using a shared service

I need to retrieve the Instagram follower count for a specific user using JavaScript based on their user ID

Encountered SyntaxError: An unexpected token has been found while integrating leaflet with flask

The Bootstrap slideshow is missing the previous and next buttons/arrows in the center of the screen

standalone visuals generated interactively with matplotlib

Is it possible to use a Backbone Model for an unconventional HTTP POST request that isn't

The SCORM content is not establishing a connection with the Learning Management System

What is the best method for animating a display table to none or reducing its height to

Printing HTML to a VueJS page is simple and efficient

Navigating through an array in Pug

Steps for dynamically expanding a textarea in Selenium WebDriver when the element path is constantly changing

Error Message Basics in Protractor End-to-End Testing

The output of JSTree's data.rslt.obj.text() function is an array of text values, not just the text from the specified node

Instruments for crafting an application compatible with a wide range of web browsers