Let’s see how to create a Date Picker with JQuery without any additional plugins. You just need common Jquery javascript file and Jquery UI script file as well as jquery css file for data picker styles.
<html>
<head>
<link href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.css" rel = "stylesheet">
<script src ="https://code.jquery.com/jquery-3.6.0.js"></script>
<script src ="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
</head>
<body>
Date of birth : <input type="text" class="form-control" id = "datepicker" >
<script>
$(function() {
$( "#datepicker" ).datepicker({
prevText:"click for previous months",
nextText:"click for next months",
dateFormat: 'yy-mm-dd',
changeMonth: true,
changeYear: true
});
});
</script>
</body>
</html>
Live Demo:
Picke a date:Custom Styles
File ‘https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.css‘ is customizable.
You can choose any css from this link: https://cdnjs.com/libraries/jqueryui.
Each link change the theme of the date picker.
Default theme:
If you use the css: https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/themes/black-tie/jquery-ui.min.css
Then theme will be:
You can also change the date format as you wish by re arraing dd-mm-yy
dateFormat: 'yy-mm-dd',
Be First to Comment