TWO eg pickup date & drop off date , if choose a date in 1st, then auto second go 3da

JavaScript
1

1.8.13 jQ UI
CALENDAR DAY PICKER
HOW IF HAVE TWO eg pickup date & drop off date , if choose a date in 1st, then auto second go 3days after 1st’s date?

2

Hi there,

In the jQuery UI Datepicker docs you will find info about the [URL=“http://api.jqueryui.com/datepicker/#option-onSelect”]onSelect event.

This event fires when you click in a date in a calendar. If you have 2 calendars (one for pick up and one for drop off), use the onSelect event to change the other with the setDate() method.

Like this:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>Datepicker range</title>
    <meta http-equiv="X-UA-Compatible" content="IE=9;FF=3;chrome=1;OtherUA=4" />
    <link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.23/themes/base/jquery-ui.css" rel="stylesheet" type="text/css"/>
  </head>

  <body>
    <input id="from" placeholder="Drop off date" />
    <input id="to" placeholder="Pick up date" />

    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.js"></script>
    <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.23/jquery-ui.js"></script>
    <script type="text/javascript">
      $( "#from" ).datepicker({
        dateFormat: 'dd-mm-yy',
        onSelect: function() {
          var fromDate = $('#from').datepicker("getDate");
          var toDate = new Date(fromDate.getFullYear(), fromDate.getMonth(),fromDate.getDate() + 3);
          $('#to').datepicker("setDate", new Date(toDate));
        }
      });

      $( "#to" ).datepicker({
        dateFormat: 'dd-mm-yy'
      });
    </script>
  </body>
</html>

Here’s a demo.

I hope that helps you.