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.
<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