How to Change input type=”date” Format in HTML ?

The <input> element with type=”date” is used to allow the user to choose a date. By default, the date format displayed in the input field is determined by the user’s browser and operating system settings. However, it is possible to change the format of the date displayed in the input field using HTML.

• JavaScript can be employed to enforce a specific format as browsers may not directly support changing the format.
• Include a placeholder attribute with the desired date format, like “dd-mm-yyyy.”

Syntax:

<input type="date" name="date" id="date">

Approaches: There are a few approaches to changing the format of the date displayed in the input field using HTML only.

Using the “pattern” attribute:

The “pattern” attribute allows you to specify a regular expression that the date input value must match. By using the “pattern” attribute, you can specify a custom date format that the user must enter. However, this approach does not change the format of the date displayed in the input field.

Syntax:

<label for="date">Enter a date (YYYY-MM-DD):</label>
<input type="date" name="date" id="date" pattern="\d{4}-\d{2}-\d{2}">

Example: Implementation of the “pattern” attribute.

Using pattern attribute

Using the “placeholder” attribute:

The “placeholder” attribute allows you to specify a hint that describes the expected value of the input field. By using the “placeholder” attribute, you can specify a custom date format that the user can use as a guide when entering the date.

Syntax:

<label for="date">Enter a date (YYYY-MM-DD):</label><input type="date" name="date" id="date" placeholder="YYYY-MM-DD">

Example: Implementation of the “placeholder” attribute

Using placeholder attribute

Using the “value” attribute:

The “value” attribute allows you to set the default value of the input field. By using the “value” attribute, you can set a custom date format that will be displayed in the input field by default. However, this approach does not allow the user to change the date format.

Syntax:

<label for="date">Enter a date (YYYY-MM-DD):</label>
<input type="date" name="date" id="date" value="2023-03-21">

Example : Implementation of the “value” attribute:

By default, date has been set using the value attribute

To use the “value” attribute you need to change the input type for the date field from “text” to “date”. In the above code, the “value” attribute of the date input field is set to “2022-01-01”, which pre-fills the input field with this date.