How to set From and To date in jQuery datepicker

By | August 8, 2020
In booking related projects or in date wise report generation, we need to set from and to date for getting exact results as we want. So in this tutorial, I am going to explain you how to create from and to date using popular jQuery datepicker plugin in a very simple way.

First of all, create a index.php file and add two text boxes and set name and id with from_date and to_date respectively.

<input type="text" id="from_date" name="from_date" value="" />
<input type="text" name="to_date" id="to_date" value="" />
And add below Jquery code in footer area as below.

<script type="text/javascript">
$(function() {
 $( "#from_date" ).datepicker({dateFormat: 'd-M-yy',numberOfMonths: 2,minDate: 0,onSelect: function (selected) {
 var dt = new Date(selected);
 dt.setDate(dt.getDate() + 1);
 setTimeout(function() {
 $('#to_date').datepicker('show');
 }, 300)
 $("#to_date").datepicker("option", "minDate", dt);
 }});
 $( "#to_date" ).datepicker({dateFormat: 'd-M-yy',numberOfMonths: 2,onSelect: function (selected) {
 var dt = new Date(selected);
 dt.setDate(dt.getDate() - 1);
 $("#from_date").datepicker("option", "maxDate", dt);
 }});

 });
<script>

That’s it. Thank you for taking interest in my blog.

Leave a Reply

Your email address will not be published. Required fields are marked *