SitePoint Sponsor

User Tag List

Results 1 to 2 of 2
  1. #1
    Non-Member
    Join Date
    May 2013
    Posts
    6
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

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

    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. #2
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    5,343
    Mentioned
    179 Post(s)
    Tagged
    9 Thread(s)
    Hi there,

    In the jQuery UI Datepicker docs you will find info about the 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:

    HTML Code:
    <!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.


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •