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.

<link href="" rel = "stylesheet">
<script src =""></script>
<script src =""></script>
Date of birth : <input type="text" class="form-control" id = "datepicker" >
 $(function() {
              $( "#datepicker" ).datepicker({
                 prevText:"click for previous months",
                 nextText:"click for next months",
                 dateFormat: 'yy-mm-dd',
                 changeMonth: true,
                 changeYear: true

Live Demo:

Picke a date:

Custom Styles

File ‘‘ is customizable.
You can choose any css from this link:
Each link change the theme of the date picker.

Default theme:

JQuery date picker default theme

If you use the 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