Press "Enter" to skip to content

Simple JQuery DatePicker with Month and Year Change

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:

JQuery 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:

JQuery date picker black theme

You can also change the date format as you wish by re arraing dd-mm-yy

dateFormat: 'yy-mm-dd',

Be First to Comment

Leave a Reply