How to Change input type="date" Format in HTML ?
Last Updated :
11 Jan, 2024
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.
HTML
<!DOCTYPE html>
<html>
<body>
<h1 style="text-align: center; color: green;">
GeeksforGeeks
</h1>
<form style="text-align: center;">
<label for="name"
style="display: block; margin-bottom: 10px;">
Name:
</label>
<input type="text" name="name" id="name" required
style="padding: 5px; border-radius: 5px;
border: 1px solid #ccc; margin-bottom: 10px;">
<label for="class"
style="display: block; margin-bottom: 10px;">
Class:
</label>
<input type="text" name="class" id="class" required
style="padding: 5px; border-radius: 5px;
border: 1px solid #ccc; margin-bottom: 10px;">
<label for="date" style="display: block; margin-bottom: 10px;">
Enter a date (YYYY-MM-DD):
</label>
<input type="text" name="date" id="date"
pattern="\d{4}-\d{2}-\d{2}" required
style="padding: 5px; border-radius: 5px;
border: 1px solid #ccc; margin-bottom: 10px;">
<input type="submit" value="Submit"
style="background-color: green; color: #fff;
padding: 10px 20px; border-radius: 5px;
border: none; cursor: pointer;">
</form>
</body>
</html>
Using pattern attributeUsing 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
HTML
<!DOCTYPE html>
<html>
<body>
<h1 style="text-align: center; color: green;">
GeeksforGeeks
</h1>
<form style="text-align: center;">
<label for="name"
style="display: block; margin-bottom: 10px;">
Name:
</label>
<input type="text" name="name" id="name" required
style="padding: 5px; border-radius: 5px;
border: 1px solid #ccc; margin-bottom: 10px;">
<label for="class"
style="display: block; margin-bottom: 10px;">
Class:
</label>
<input type="text" name="class" id="class" required
style="padding: 5px; border-radius: 5px;
border: 1px solid #ccc; margin-bottom: 10px;">
<label for="date"
style="display: block; margin-bottom: 10px;">
Enter a date (YYYY-MM-DD):
</label>
<input type="date" name="date" id="date"
placeholder="YYYY-MM-DD" required
style="padding: 5px; border-radius: 5px;
border: 1px solid #ccc; margin-bottom: 10px;">
<input type="submit" value="Submit"
style="background-color: green; color: #fff;
padding: 10px 20px; border-radius: 5px;
border: none; cursor: pointer;">
</form>
</body>
</html>
Using placeholder attributeUsing 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:
HTML
<!DOCTYPE html>
<html>
<body>
<h1 style="text-align: center; color: green;">
GeeksforGeeks
</h1>
<form style="text-align: center;">
<label for="name"
style="display: block; margin-bottom: 10px;">
Name:
</label>
<input type="text" name="name" id="name" required
style="padding: 5px; border-radius: 5px;
border: 1px solid #ccc; margin-bottom: 10px;">
<label for="class"
style="display: block; margin-bottom: 10px;">
Class:
</label>
<input type="text" name="class" id="class" required
style="padding: 5px; border-radius: 5px;
border: 1px solid #ccc; margin-bottom: 10px;">
<label for="date"
style="display: block; margin-bottom: 10px;">
Enter a date (YYYY-MM-DD):
</label>
<input type="date" name="date" id="date"
value="2022-01-01" required
style="padding: 5px; border-radius: 5px;
border: 1px solid #ccc; margin-bottom: 10px;">
<input type="submit" value="Submit"
style="background-color: green; color: #fff;
padding: 10px 20px; border-radius: 5px;
border: none; cursor: pointer;">
</form>
</body>
</html>
By default, date has been set using the value attributeTo 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.
Similar Reads
How to Set input type date in dd-mm-yyyy format using HTML? In HTML, you can use the <input> element with the type date to allow users to pick a date. However, the format used for displaying the date may vary depending on the browser and the user's locale settings. By default, the browser uses the ISO format (yyyy-mm-dd), which is not the same as dd-mm
2 min read
How to use moment.js to change date format in jQuery ? Using Moment.js to change date format in jQuery involves importing the Moment.js library and utilizing its functions to parse, manipulate, and format dates. You can easily convert dates into various formats by calling moment(date).format(desiredFormat) to display the date in your preferred format.mo
2 min read
HTML <input type="date"> The HTML <input type="date"> element provides a date picker interface for selecting dates. It allows users to input dates using a calendar widget, ensuring standardized date input across different browsers and devices. Syntax<input type="date">Example: In this example, the HTML <inpu
1 min read
How to set Placeholder Value for Input Type Date in HTML? To set a placeholder value for the input type date in HTML5, use the placeholder attribute. The placeholder attribute doesn't work well with input type "date." Use onfocus="(this.type='date')" for a custom placeholder, enabling a date selection dropdown.Using OnfocusThe On-focus approach changes the
2 min read
How to Change Date Format in jQuery UI DatePicker ? In this article, we are going to learn about the Datepicker in jQuery. jQuery is the fastest and lightweight JavaScript library that is used to simplify the interactions between an HTML/CSS document, or more precisely the Document Object Model (DOM), and JavaScript. jQuery is widely famous for its m
2 min read