Press "Enter" to skip to content

Using Multiple jQuery DatePicker on Same Page

On previous article we learnt how to add a simple datepicker using jQuery. Now let’s see how to add more than one datepicker on a same page without any conflict or errors.

Just adding a textbox with datepicker id will not work properly, you need separate id or class with separate jQuery functions.

Multiple jQuery datepicker on same page without any error
<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 1 : <input type="text" size="20" class="form-control" id = "datepicker1" >
<br/><br/>
Date 2 : <input type="text" size="20" class="form-control" id = "datepicker2" >
<script>
 $(function() {
              $( "#datepicker1" ).datepicker({
                 prevText:"click for previous months",
                 nextText:"click for next months",
                 dateFormat: 'yy-mm-dd',
                 changeMonth: true,
                 changeYear: true
              });
          
              $( "#datepicker2" ).datepicker({
                 prevText:"click for previous months",
                 nextText:"click for next months",
                 dateFormat: 'yy-mm-dd',
                 changeMonth: true,
                 changeYear: true
              });
          
           });
</script>
</body>
</html>

Where two jQuery datepicker functions are used, ie, first datepicker is for text input with id “datepicker1” and second datepicker for text input with id “datepicker2”.

Live Output:

Date 1 :

Date 2 :

Be First to Comment

Leave a Reply