Input date in dd-mm-yyyy format using HTML
When we design a form to enter user information, there will be times when we need to enter data type dd / mm / yyyy, but how to make the user enter the correct format that we do not need to separate. 3 separate input boxes for day, month and year.
To do this is very simple, we use <input> tag with the type attribute "date" the browser will automatically assist us to do it all.
Check out the example input type date below
<!DOCTYPE html>
<html>
<head>
<title>Input date in dd-mm-yyyy format using HTML - HtmlcssDownload.com</title>
<style>
body{display: flex;align-items: center;justify-content: center;min-height: 100vh;background: #eee;font-family: Arial, Helvetica, sans-serif;}
.box{width: 500px;padding:20px;background: #fff;border-radius: 20px;}
.box .title{text-align: center;font-size: 19px;font-weight: bold;margin-bottom: 20px;}
.box .form-control{width: 100%;height: 40px;margin-bottom: 20px;}
.box .form-control input{width: 100%;max-width: 100%;height: 100%;background: none;outline:none;border:1px solid #e1e1e1;display: flex;padding:5px 10px;box-sizing: border-box;border-radius: 4px;}
</style>
</head>
<body>
<div id="app">
<div class="box">
<div class="title">Input type date</div>
<div class="form-control">
<input type="date" />
</div>
</div>
</div>
</body>
</html>
Limit date range in date type input
<!DOCTYPE html>
<html>
<head>
<title>Input date in dd-mm-yyyy format using HTML - HtmlcssDownload.com</title>
<style>
body{display: flex;align-items: center;justify-content: center;min-height: 100vh;background: #eee;font-family: Arial, Helvetica, sans-serif;}
.box{width: 500px;padding:20px;background: #fff;border-radius: 20px;}
.box .title{text-align: center;font-size: 19px;font-weight: bold;margin-bottom: 20px;}
.box .form-control{width: 100%;height: 40px;margin-bottom: 20px;}
.box .form-control input{width: 100%;max-width: 100%;height: 100%;background: none;outline:none;border:1px solid #e1e1e1;display: flex;padding:5px 10px;box-sizing: border-box;border-radius: 4px;}
</style>
</head>
<body>
<div id="app">
<div class="box">
<div class="title">Input type date</div>
<div class="form-control">
<input type="date" min="1997-01-01" max="2030-12-31" />
</div>
</div>
</div>
</body>
</html>
We are Recommending you:
Input number only show number keyboard on mobile browser.
Wednesday 6th of January 2021 03:58:01 PM
html
My website builds on the background knowledge accumulated from me personally with the desire to share and expand the developer community.
Copyright 2020 by Htmlcssdownload.com. All Rights Reserved. Powered by HV Team.
