ThevalueAsDate property of theHTMLInputElement interface represents the current value of the<input> element as aDate, ornull if conversion is not possible.

This property can also be set directly, for example to set a default date based on some condition. If the provided value is neithernull nor aDate object, aTypeError is thrown. If the provided value isnull or aninvalid date, the input value is set to the empty string.

This property always returnsnull when accessed on an input that isn't date- or time-based. When setting this property on such an input, anInvalidStateErrorDOMException is thrown.

Value

ADate object ornull if a conversion is impossible. The date returned should always be interpreted as a UTC time—for example, using methods likegetUTCDate() instead ofgetDate(). If you are not careful, the result may be off by 1—for example, if the user lives in a negative UTC offset (the US, for example), then interpreting the date as a local date will result in the previous day from what the user selected.

Themonth,date, andweek input types return a UTC date that represents the first instant of the inputted time span—that is, they are always midnight in UTC. Formonth, the date is the first day of the month. Forweek, the date is the Monday of the week. Thetime input type always has the date set to1970-01-01.

Thedatetime-local input type does not support thevalueAsDate property, because it represents a date and time in the local time zone (awall clock time), butDate objects represent an absolute point in time. However, some browsers may provide a non-standard implementation.WHATWG is working on integrating theTemporal API with the date/time inputs to account for this use case.

Examples

Retrieving a date value

This example demonstrates accessing thevalueAsDate property on an<input> of typeweek.

HTML

We include an<input> of typeweek:

<label for="date">Pick a date and time:</label><input name="date" type="week" /><pre></pre>

JavaScript

When no date or time is selected, the empty input resolves tonull. Each time a selection is made, achange event is fired, updating the<pre> content showing theHTMLInputElement.value of the form control compared to that value as a date.

const logElement = document.getElementById("log");const inputElement = document.getElementById("date");logElement.innerText = `Initial value: ${inputElement.valueAsDate}`;inputElement.addEventListener("change", () => {  logElement.innerText = `${inputElement.value} resolves to ${inputElement.valueAsDate}`;});

#log {  height: 20px;  padding: 0.5rem;  background-color: #ededed;}

Results

Using Date methods

This example demonstrates applyingDate methods directly to thevalueAsDate property of an<input> of typedate.

HTML

We include an<input> of typedate:

<label for="date2">Pick a date:</label><input name="date2" type="date" /><pre></pre>

JavaScript

When no date is selected, the empty string resolves tonull. Each time a selection is made, achange event is fired. We then populate the log with the date selected, formatted using theDate object'stoLocaleDateString() method.

const logElement = document.getElementById("log");const inputElement = document.getElementById("date2");const options = {  weekday: "long",  year: "numeric",  month: "long",  day: "numeric",};logElement.innerText = `Initial value: ${inputElement.valueAsDate}`;inputElement.addEventListener("change", () => {  if (inputElement.valueAsDate !== null) {    logElement.innerText = `You selected ${inputElement.valueAsDate.toLocaleDateString("en-US", options)}`;  } else {    logElement.innerText = `${inputElement.value} resolves to ${inputElement.valueAsDate}`;  }});

#log {  height: 20px;  padding: 0.5rem;  background-color: #ededed;}

Results

The date may be a day off due to your local timezone.

Specifications

Browser compatibility

See also

• <input>
• HTMLInputElement.value
• HTMLInputElement.valueAsNumber