Restrict user input in HTML
Multi tool use
Clash Royale CLAN TAG#URR8PPPRestrict user input in HTML
Hello guys I want to restrict user from entering date manually in an input field in HTML. I want user to select date from the date-picker provided to avoid input date entry
Here is the my code in which I've used date-picker.
<!DOCTYPE html>
<html class="html">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"> </script>
<link rel="stylesheet" href="https://ajax.aspnetcdn.com/ajax/jquery.ui/1.10.4/themes/redmond/jquery-ui.css">
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"> </script>
<script>
$(function() {
$("#datepicker").datepicker(
{
dateFormat:'dd-mm-yy',
changeMonth: true,
changeYear: true,
});
});
</script>
<style>
.date-picker{
width: 250px;
height: 30px;
font-size: 18px;
padding-left: 7px;
margin-top: 10px;
margin-left: 145px;
border: 1px solid grey;
border-radius: 5px;
}
</style>
</head>
<body class="body">
<div class="date-picker-container">
<input class="date-picker" id="datepicker" placeholder="Date Of Birth">
</div>
</form>
</body>
</html>
Please help me I'm stuck with this date validation issue.
readonly
<input readonly />
thank you so much Girish
– Joel Mathews
26 mins ago
2 Answers
2
You can simply add the readonly attribute to your input :
readonly
<input class="date-picker" id="datepicker" placeholder="Date Of Birth" readonly>
Demo:
$(function() {
$("#datepicker").datepicker({
dateFormat: 'dd-mm-yy',
changeMonth: true,
changeYear: true,
});
});
.date-picker {
width: 250px;
height: 30px;
font-size: 18px;
padding-left: 7px;
margin-top: 10px;
margin-left: 145px;
border: 1px solid grey;
border-radius: 5px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">
</script>
<link rel="stylesheet" href="https://ajax.aspnetcdn.com/ajax/jquery.ui/1.10.4/themes/redmond/jquery-ui.css">
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js">
</script>
<div class="date-picker-container">
<input class="date-picker" id="datepicker" placeholder="Date Of Birth" readonly>
</div>
thank you so much Zenoo
– Joel Mathews
27 mins ago
All what you need is to add readonly='true' attribute to your input field
<!DOCTYPE html>
<html class="html">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"> </script>
<link rel="stylesheet" href="https://ajax.aspnetcdn.com/ajax/jquery.ui/1.10.4/themes/redmond/jquery-ui.css">
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"> </script>
<script>
$(function() {
$("#datepicker").datepicker(
{
dateFormat:'dd-mm-yy',
changeMonth: true,
changeYear: true,
});
});
</script>
<style>
.date-picker{
width: 250px;
height: 30px;
font-size: 18px;
padding-left: 7px;
margin-top: 10px;
margin-left: 145px;
border: 1px solid grey;
border-radius: 5px;
}
</style>
</head>
<body class="body">
<div class="date-picker-container">
<input class="date-picker" id="datepicker" placeholder="Date Of Birth" readonly='true'>
</div>
</form>
</body>
</html>
thank you so much Ruming
– Joel Mathews
28 mins ago
By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.
Add
readonlyto your input<input readonly />this will avoid entering date manually by user.– Girish
29 mins ago