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 .

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.

Table of Content

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.
    <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 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
    <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 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:
    <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>
                
How to validate if input date (end date) in input field must be after a given date (start date) using express-validator ?
                
In HTML forms, we often required validation of different types. Validate existing email, validate password length, validate confirm password, validate to allow only integer inputs, these are some examples of validation. In certain cases, we want the user to type a date that must come after some given date(Ex. 'end date' must be after 'start date')
                
How to validate if input date (start date) in input field must be before a given date (end date) using express-validator ?
                
In HTML forms, we often required validation of different types. Validate existing email, validate password length, validate confirm password, validate to allow only integer inputs, these are some examples of validation. In certain cases, we want the user to type a date that must come before some given date (Ex: 'start date' must come before 'end da
                
How to set input type date in dd-mm-yyyy format using HTML?
                
To set and get the input type date in dd-mm-yyyy format , use the &lt;input&gt; type attribute , allowing date selection. The &lt;input&gt; type attribute is used to define a date picker or control field. In this attribute, you can set the range from which day-month-year to which day-month-year date can be selected from. Define the date range with
                
Difference between &lt;input type='button' /&gt; and &lt;input type='submit' /&gt;
                
In HTML, &lt;input&gt; elements are widely used to create various form controls. Two common types of &lt;input&gt; elements used for buttons are &lt;input type='button' /&gt; and &lt;input type='submit' /&gt;. While both appear similar at first glance, they serve different purposes and have distinct behaviors when used in web forms, &lt;input type=
                
How to format current date in MM/DD/YYYY HH:MM:SS format using JavaScript ?
                
Given a date and the task is to format the current date in MM/DD/YYYY HH:MM:SS format. Here are a few of the most techniques discussed with the help of JavaScript. Approach 1: Store the current date in variable.Use the string concatenation technique to insert / and : in between the month-day and day-year.Use .slice() method to format the day, month
                
How to format the current date in MM/DD/YYYY HH:MM:SS format using Node?
                
The current date can be formatted by using Nodejs modules like Date Object or libraries like moment.js. Table of Content Using Node.js Date ObjectUsing Moment.js LibraryMethod 1: Using Node.js Date Object:The JavaScript Date Object can be used in the program by using the following command. const date = new Date();Now on this variable date, we can a
                
HTML | DOM Input Date type Property
                
The Input Date type property is used for returning the type of form element the date field is. The Input Date type property returns a string that represents the type of form element the date field is. Syntax: inputdateObject.type Return Values: It returns a string value that represents the type of form element of the date field. The below program i
                
Which input type is used to choose the date in HTML ?
                
In this article, we will learn how to choose the date from the calendar on the webpage. As we know that HTML 5 introduced many inputs types for the better functionality of the form. The &lt;input type="date"&gt; input type is used to choose the date in HTML. It is used to develop input fields that tend the user enters a date, or use a textbox that
                
HTML &lt;input type="date"&gt;
                
The HTML &lt;input type="date"&gt; 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&lt;input type="date"&gt;Example: In this example, the HTML &lt;input type="date"&gt; displays a date input field. [GF
                
How to set placeholder value for input type date in HTML 5 ?
                
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 input type from text to date when the field gain
          
Company
About Us
Legal
In Media
Contact Us
Advertise with us
GFG Corporate Solution
Placement Training Program
GeeksforGeeks Community
Languages
Python
Java
C++
PHP
GoLang
SQL
R Language
Android Tutorial
Tutorials Archive
DSA
Data Structures
Algorithms
DSA for Beginners
Basic DSA Problems
DSA Roadmap
Top 100 DSA Interview Problems
DSA Roadmap by Sandeep Jain
All Cheat Sheets
Data Science & ML
Data Science With Python
Data Science For Beginner
Machine Learning Tutorial
ML Maths
Data Visualisation Tutorial
Pandas Tutorial
NumPy Tutorial
NLP Tutorial
Deep Learning Tutorial
Web Technologies
HTML
CSS
JavaScript
TypeScript
ReactJS
NextJS
Bootstrap
Web Design
Python Tutorial
Python Programming Examples
Python Projects
Python Tkinter
Web Scraping
OpenCV Tutorial
Python Interview Question
Django
Computer Science
Operating Systems
Computer Network
Database Management System
Software Engineering
Digital Logic Design
Engineering Maths
Software Development
Software Testing
DevOps
Git
Linux
AWS
Docker
Kubernetes
Azure
GCP
DevOps Roadmap
System Design
High Level Design
Low Level Design
UML Diagrams
Interview Guide
Design Patterns
OOAD
System Design Bootcamp
Interview Questions
Inteview Preparation
Competitive Programming
Top DS or Algo for CP
Company-Wise Recruitment Process
Company-Wise Preparation
Aptitude Preparation
Puzzles
School Subjects
Mathematics
Physics
Chemistry
Biology
Social Science
English Grammar
Commerce
World GK
GeeksforGeeks Videos
DSA
Python
Java
C++
Web Development
Data Science
CS Subjects
         
        We use cookies to ensure you have the best browsing experience on our website. By using our site, you
        acknowledge that you have read and understood our
        Cookie Policy &
        Privacy Policy
        Got It !
                    
Please go through our recently updated Improvement Guidelines before submitting any improvements.
                    
This improvement is locked by another user right now. You can suggest the changes for now and it will be under 'My Suggestions' Tab on Write.
                    
You will be notified via email once the article is available for improvement.
                        Thank you for your valuable feedback!
                        Suggest changes
                  
Please go through our recently updated Improvement Guidelines before submitting any improvements.
                      
Suggest Changes
                      
Help us improve. Share your suggestions to enhance the article. Contribute your expertise and make a difference in the GeeksforGeeks portal.