How to set arrival and departure date in jquery datepicker

Last Modified at 2019-06-25 21:29:27

In travel related projects or in date wise report generation, we need to set arrival and departure date or 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 date-picker script 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>

DEMO DONLOAD

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