The <input type="date"> element allows users to input a date using a date picker or by manually entering the date.
The way the date is displayed and how users can enter it in the input field depends on the locale settings of your browser or device.
For example:
- In the US, the display format might be
mm/dd/yyyy.
- In India and many European countries, the format is
dd-mm-yyyy.
In the above example, the input field limits users to entering dates between January 1, 1950 (min) and January 1, 2000 (max).
-
The min and max attributes set the limits for the acceptable input values such that the min attribute validates the earliest acceptable date as input value and the max attribute validates the latest acceptable date.
-
When we open the date picker by clicking on the calender icon, we will only be able to navigate and select the dates within the limit defined by min and max attributes.
-
The placeholder attribute does not work directly with <input type="date"> because the date picker takes precedence. To create a custom placeholder-like behavior, additional CSS or JavaScript may be needed.