# Bad value X for attribute “value” on element “input”: The literal did not satisfy the date format.

> Canonical HTML version: https://rocketvalidator.com/html-validation/bad-value-x-for-attribute-value-on-element-input-the-literal-did-not-satisfy-the-date-format
> Attribution: Rocket Validator (https://rocketvalidator.com)
> License: CC BY 4.0 (https://creativecommons.org/licenses/by/4.0/)

The `value` of an `<input type="date">` must be a full date written as `YYYY-MM-DD`, so keywords like `today` and localized dates like `15/03/2025` are rejected.

HTML has no relative date keywords. A date input's `value` has to be a valid date string: a four-digit year, a two-digit month and a two-digit day, joined by hyphens, as in `2025-03-15`. Months and days need their leading zero (`2025-3-5` fails), and the value can't include a time, because `2025-03-15T10:00` belongs to `type="datetime-local"`. The `min` and `max` attributes of a date input follow the same format. An empty `value` is allowed and leaves the field blank.

Browsers discard a `value` they can't parse, so the field shows up empty instead of showing the date you meant. The date picker displays the date in the user's own locale, but the markup always uses `YYYY-MM-DD`, whatever language the page is written in.

To prefill today's date, write the actual date into `value` when the server renders the page. On a static page, leave `value` out and set it from a script after the page loads.

## Invalid example

```html
<label for="start">Start date</label>
<input type="date" id="start" name="start" value="today">
```

## Valid example

```html
<label for="start">Start date</label>
<input type="date" id="start" name="start" value="2025-03-15">
```

### Setting today's date with JavaScript

```html
<label for="end">End date</label>
<input type="date" id="end" name="end">
<script>
  const now = new Date();
  const month = String(now.getMonth() + 1).padStart(2, "0");
  const day = String(now.getDate()).padStart(2, "0");
  document.getElementById("end").value = now.getFullYear() + "-" + month + "-" + day;
</script>
```