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 float input type in HTML5 ?
HTML5 is the latest version of Hypertext Markup Language (HTML), the standard language for creating web pages and web applications. With HTML5, new input types were introduced to make web form creation easier and more accessible. These input types include text, password, checkbox, radio, submit, res
3 min read
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 Change Date Format in Excel
You know that Excel is one of the best spreadsheets you can work on. Excel is the first preference of many users to create an impressive data set. Have you tried filling in the Date on the sheet? Date with the data is a common practice done by users in Excel to get information timeline. To help orga
8 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 Format a Date in JavaScript?
Here are different ways to format the date in JavaScript.1. Using the toDateString() MethodThe toDateString() method formats the date object into a human-readable format as Day Month Date Year.SyntaxdateObj.toDateString();JavaScriptconst date = new Date(); const formatDate = date.toDateString(); con
2 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 Format Date in TypeScript ?
Formatting dates is important especially when displaying them to the users or working with date-related data. TypeScript provides various ways to achieve this. Below are the methods to format the date data type in TypeScript:Table of ContentUsing toLocaleString() methodUsing toLocaleDateString() met
3 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
How to change the <input> type?
Changing the <input> type in HTML involves dynamically modifying the type attribute of an <input> element using JavaScript or jQuery. By altering the type (e.g., from text to password), the behavior and appearance of the input field are instantly updated.Syntax:The selected input type wi
1 min read