Date and Time are important data points that are helpful within applications for different purposes. From checking whether a user is age-appropriate or the time to trigger an action, date/time values in JavaScript can allows us to build or automate such features with ease.
One of such features is to build a checker to know if the date/time field value is out of range which is useful in date of birth cases. So, in this article, we will detail date and time values and how we will check date/time field value out of range in JavaScript.
Date and Time Values in JavaScript
To create date and time values, we need the DateConstructor
which can be accessed via the Date
Object. The date and time returned when called uses the ISO 8601 date format.
The ISO 8601 datetime is represented with the year starting it at the left and ends with a millisecond parameter and is often combined with the Z
character which represents UTC (or Zulu time)
2022-08-10 17:00:00.000
The above ISO datetime object represents the 11th day in the month of August in the year 2022 at 5 p.m. within the local time zone.
Let’s create a datetime value in JavaScript
let date = new Date();
console.log(date);
Output
2022-10-03T12:09:58.926Z
To obtain the day, month and year, we can make use of specific methods
let currentYear = date.getFullYear();
let currentMonth = date.getMonth();
let currentDay = date.getDate();
console.log(`${currentDay}/${currentMonth}/${currentYear}`);
Output
3/9/2022
Before we move on, it is important to know that the Date()
object defines the timestamp as the number of milliseconds that have passed since January 1st 1970. To obtain the timestamp for your current time, there are two methods; getTime()
and now()
.
let todayDate = new Date();
let timestamp = todayDate.getTime();
let timestamp2 = Date.now();
console.log(timestamp, timestamp2);
Output
1665150382983 1665150382983
So every date/time value is based on the timestamp (in milliseconds in reference to January 1st 1970). To be verify this, we can check the two dates; one before 1970 and the second on January 1st 1970.
let first = new Date("1963-09-01");
let second = new Date("1970-01-01");
let firstTimestamp = first.getTime();
let secondTimestamp = second.getTime();
console.log(firstTimestamp, secondTimestamp);
Output
-199929600000 0
So, the logic to determine if a date/time field value is out of range in JavaScript will be to compare the timestamp value of the input to the timestamp value of the start and end datetime value.
Use comparison operators to check if date/time field value out of range in JavaScript
The base logic is to compare if the date/time field value is greater than the start datetime range value and less than the end datetime range value. It is important that the datetime value are of the same time zone for correct comparison.
To illustrate how all of this works, let’s take two users date of birth, define the start and end datetime range, place the user’s date of birth in a list, and iterate over them to compare if the user’s date of birth is above the 1960
datetime and below the 2004
datetime.
let userOneDOB = new Date("2001-04-30");
let userTwoDOB = new Date("2005-12-01");
const start = new Date("1960-01-01");
const end = new Date("2004-10-04");
let usersDOB = [userOneDOB, userTwoDOB];
for (const dob of usersDOB) {
if (dob > start && dob < end) {
console.log("You are allowed to order a beer.");
} else {
console.log("You are not allowed to order a beer.");
}
}
Output
You are allowed to order a beer.
You are not allowed to order a beer.
There is no need for us to convert it to timestamps because the comparison is done based on the timestamp values.
Summary
Though, dates can be difficult to work with, it is important that you know what’s happening behind the hood. With such information, you can easily work with date/time field values. To check if date/time field value is out of range in JavaScript, the comparison
operator is just enough to achieve this operation.
References
Date - JavaScript | MDN (mozilla.org)
Date.prototype.getTime() - JavaScript | MDN (mozilla.org)
pq: date/time field value out of range: "22/02/2022"