Dates are one of those parts in JavaScript that are notoriously bad. Functions are inconsistent, and often you get some weird results. Just looking at the date constructor, you can notice many issues. If you pass an integer as a parameter, it is a timestamp. Converting that integer to string makes it year parameter. There are many more, and in this post, I am covering some of them. Then I am showing an example of how to validate that date had the correct value.
Issues with Date class
Constructor and single parameter
As previously mentioned, the constructor treats the first parameter differently based on the type and number of parameters passed. When the constructor receives only one number as a parameter, this a timestamp. If that parameter is a string, then it is a year. When having multiple number parameters, they represent date elements—first representing year, the second month, and third, being the day of the month.
Month values
Months in date objects are a special case. While all values start from one, months start from zero. So if you are using the setMonth method and want to set it to January, you need to pass value zero. That again doesn’t work for all use cases. If you are creating a date instance using ISO date format, than for January, you need to use value one. Weird and inconsistent, I know.
Overflow
The problem above is with months. But what happens if for a month you pass twelve? In this case, there is no error, and you get a date instance where the month is January in the next year.
Other issues
There are many issues with dates Setting and getting year values, getDay and getDate, and many others. I could spend hours writing down more of them so let’s skip that and jump into validation.
Validation
You can create a date instance in a few ways. One is passing ISO date format as a parameter of the constructor. And in this case, passing invalid value gives an “Invalid date” message. The problem is if we use the integer parameters in constructor or setters. In this case, the date object can go into overflow. For example, if you are setting the date as 32nd, you get a date instance with the day being the 1st of next month(where the original month has 31 days).
Checking with getters
This method, while a bit repetitive, is most straightforward. It comes down to comparing values we use to create with values we get by using getters. If all of them are equal, the date is valid. Otherwise, some value is invalid. The positive side of this method is that it does not depend on any 3rd party library and it always works.
const isValid = (year, month, day) => {
const date = new Date(year, month, day);
return date.getDate() === day &&
date.getMonth() === month &&
date.getFullYear() === year;
}
Wrap up
Dates are one of the pain points in JavaScript. The date object is messy to work with, and its methods are inconsistent. And yes, validation can be done by using many of 3rd party libraries like moment and date-helper, but that may not always be an option. Adding a dependency to validate dates might be too much. That is why it is essential to have an idea of how to do it in vanilla JavaScript. And in my opinion, this is the best way to do that.
For more, you can follow me on Twitter, LinkedIn, GitHub, or Instagram.
Top comments (0)