elements of type="date" create input đầu vào fields that let the user enter a date, either with a textbox that validates the input or a special date picker interface.
The resulting value includes the year, month, & day, but not the time. The time and datetime-local đầu vào types tư vấn time & date+time input.
The input đầu vào UI generally varies from browser lớn browser; see Browser compatibility for further details. In unsupported browsers, the control degrades gracefully to lớn .
Aước ao browsers with custom interfaces for selecting dates are Chrome, Edge, and Opera, whose datecontrol looks like so:
And the Firefox date control looks lượt thích this:
|Value||A DOMString representing a date in YYYY-MM-DD format, or empty|
|Events||change và input|
|Supported common attributes||autocomplete, danh mục, readonly, và step|
|IDL attributes||danh mục, value, valueAsDate, valueAsNumber.|
|Methods||select(), stepDown(), stepUp()|
A DOMString representing the date entered in the đầu vào. The date is formatted according lớn ISO8601, described in Format of a valid date string in Date & time formats used in HTML.
You can phối a mặc định value for the input with a date inside the value attribute, lượt thích so:
The displayed date format will differ from the actual value — the displayed date is formatted based on the locale of the user"s browser, but the parsed value is always formatted yyyy-mm-dd.
Along with the attributes comtháng to lớn all elements, date inputs have sầu the following attributes:
|max||The lademo acceptable date|
|min||The earliest acceptable date|
|step||The stepping interval, when clicking up & down spinner buttons and validating the date|
The latest date khổng lồ accept. If the value entered into the element occurs afterward, the element fails constraint validation. If the value of the max attribute isn"t a possible date string in the format yyyy-mm-dd, then the element has no maximum date value.
If both the max and min attributes are phối, this value must be a date string later than or equal to the one in the min attribute.
The earliest date to accept. If the value entered into lớn the element occurs beforehvà, the element fails constraint validation. If the value of the min attribute isn"t a possible date string in the format yyyy-mm-dd, then the element has no minimum date value.
If both the max và min attributes are set, this value must be a date string earlier than or equal to the one in the max attribute.
The step attribute is a number that specifies the granularity that the value must adhere to, or the special value any, which is described below. Only values which are equal to the basis for stepping (min if specified, value otherwise, và an appropriate mặc định value if neither of those is provided) are valid.
A string value of any means that no stepping is implied, and any value is allowed (barring other constraints, such as min and max).
Note: When the data entered by the user doesn"t adhere khổng lồ the stepping configuration, the user agent may round to lớn the nearest valid value, preferring numbers in the positive direction when there are two equally cthua kém options.
For date inputs, the value of step is given in days; và is treated as a number of milliseconds equal to 86,400,000 times the step value (the underlying numeric value is in milliseconds). The default value of step is 1, indicating 1 day.
Date inputs sound convenient — they provide an easy interface for choosing dates, and they normalize the data format sent to lớn the server regardless of the user"s locale. However, there are currently issues with because of its limited browser tư vấn.
In this section, we"ll look at basic và then more complex uses of , và offer advice on mitigating the browser support issue later (see Handling browser support).
If you try lớn submit the khung with an incomplete date (or with a date outside the mix bounds), the browser displays an error. Try playing with the example now:
Here"s a screenshot for those of you who aren"t using a supporting browser:
Here"s the CSS used in the above sầu example. We make use of the :valid and :invalid pseudo-elements to lớn add an inhỏ next to lớn the input đầu vào, based on whether or not the current value is valid. We had to lớn put the ibé on a next khổng lồ the input đầu vào, not on the input đầu vào itself, because in Chrome at least the input"s generated nội dung is placed inside the form control, và can"t be styled or shown effectively.
As mentioned, the major problem with date inputs at the time of writing is browser tư vấn. As an example, the date picker on Firefox for Android looks like this:
Unsupporting browsers gracefully degrade khổng lồ a text input, but this creates problems in consistency of user interface (the presented controls are different) and data handling.
The second problem is the more serious one; with date input supported, the value is normalized to lớn the format yyyy-mm-dd. But with a text input, the browser has no recognition of what format the date should be in, and there are many different formats in which people write dates. For example:ddmmyyyy dd/mm/yyyy mm/dd/yyyy dd-mm-yyyy mm-dd-yyyy Month dd, yyyy
One way around this is the pattern attribute on your date đầu vào. Even though the date picker doesn"t use it, the text input fallbaông xã will. For example, try viewing the following in a unsupporting browser: