How To Change Date Format In HTML
Last Updated : Mar 11, 2024
IN - HTML | Written & Updated By - Pragati
In this tutorial we will show you the solution of how to change date format in HTML, in HTML today our topic is about how to change date format in html. Here, one thing to notice is that it is not possible to change or customize date format with the help of html only.
We need to get the help of JavaScript, jQuery in html to done this. But as from our questions, it is compulsory to do this in html.
So, today we show you how we are able to change date format in html.
Step By Step Guide On How To Change Date Format In HTML :-
As, we already said that there is not any way to change date format in html. But it is possible that you can get the format of date which you want in html.
It means that if we show a placeholder in date format and use some tags and attributes in html, then it is possible that you are able to get the format of date which you want.
Here, below is the code which helps you to understand what we want to say.
<!DOCTYPE html>
<html>
<head>
<title> Title of the document<title>
</head>
<body>
<form action="" method="get">
<h1>
<label for="">
Enter your date of birth in specified formats
</label>
</h1>
<input type="date" name="" id="">
<!-- this is the default pattern of input type date -->
<br><br>
<input type="number" name="" id="" placeholder="mmddyyyy" pattern="[0-9]{2}[0-9]{2}[0-9]{4}" required>
<br><br>
<input type="text" name="" id="" placeholder="yyyy-dd-mm" pattern="[0-9]{4}-[0-9]{2}-[0-9]{2}" required>
<br><br>
<input type="text" name="" id="" placeholder="dd/mm/yyyy" pattern="[0-9]{2}/[0-9]{2}/[0-9]{4}" required>
<br><br>
<input type="text" name="" id="" placeholder="dd/mm/yy" pattern="[0-9]{2}/[0-9]{2}/[0-9]{2}" required>
<br><br>
<input type="submit" value="Click here to submit">
</form>
</body>
</html>
- First, we write <! DOCTYPE html> which we used as an instruction to the web browser about what version of HTML file is written in.
- Secondly, the <html> tag is used to indicate the beginning of an HTML document.
- As above now <head> tag is used to contain information about web page. In this tag a <title> tag is used which helps us to specify a webpage title. Both <head> and <title> tags are Paired tags. So, both have </head> and </title> ending tags respectively.
- Thirdly, <body> tag is used to define the webpage body. All the contents to show on website are written here. Hence, first here we create a form for user. Then we create a simple heading.
- Under form in first step, we use input with type date which is the default tag and you can see on browser that it uses the format of dd-mmm-yyyy.
- And we want to change this format. So, in next step we make some changes in this. And in next steps we create input type of number and text with placeholders to show the user that what type of pattern of date we want.
- But the main job here is of the pattern attribute we use. And the value of pattern is the required format which we want.
- At last, the <body> and <html> tags are closed with </body> and </html> respectively.
Conclusion :-
In conclusion, here we can say that after this article we are able to change the date format in html.
But this is not the way used by professional, so in next session we will also talk about date format in html with the help of jQuery. I hope this tutorial on how to change date format in HTML helps you.
About Pragati
