How to set arrival and departure date in jquery datepicker

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


No comments :

Post a Comment