New features Apply a Theme In Line Events From To Button Panel Week Numbers Date and Time Misc

With both of these scripts you can set the first mindate relative to today,  and the second mindate relative to the first date .

Example: If you you booking accommodation but you want the first date to be from  tomorrow onwards, set the mindate for the first datepicker to +1d. If your minimum length of stay is two nights, set the mindate  on the second datepicker to +2

Important:

1. Set calendar size by  top menu bar  Edit > Site Properties > Datepicker > Font Size. The smaller the font, the smaller the calendar.

2. Do not use Insert>HTML.

The two scripts  on this page and all other scripts in this tutorial, unless otherwise stated , must be pasted into <!--Page  Start-->.

Use Alt-S or right click>Attach HTML

3. The options in the first part of the scripts can be varied to suit. Each of the option lines has a comma at the end EXCEPT the last item. If you delete any  lines make sure that you follow this pattern.



Use From / To and calculate days (or nights) between dates

Show code Show code

Depart

Arrive

From

To

Days

Select Date Select Date


<script type="text/javascript">

$(function() {


 $("#from").datepicker({ // first datepicker

       showAnim:'slideDown',

       duration: 'slow',

       showButtonPanel: true,

       numberOfMonths: 3,

       showWeek: true,

       firstDay: 1,

       defaultDate: "0",

       maxDate: '+2Y',

       minDate:'+1d',

       

        onSelect: function(dateText, inst)

        {

           test = $(this).datepicker('getDate');

           testm = new Date(test.getTime());

           testm.setDate(testm.getDate() +2);//set minDate for 2nd datepicker

           $("#to").datepicker("option", "minDate", testm);// second datepicker

        }     

 });

 $("#to").datepicker({ // second datepicker

      showAnim:'slideDown',

      duration: 'slow',

      showButtonPanel: true,

      numberOfMonths: 3,

      firstDay: 1,

      maxDate: '+2Y',

 

        onSelect: function()

       {

   

        var d1 = $('#from').datepicker('getDate'); // firstdatepicker

       var d2 = $('#to').datepicker('getDate');   // second datepicker

       var oneDay = 1000*60*60*24;

       var diff = 0;

       if (d1 && d2) {

           diff = Math.ceil((d2.getTime() - d1.getTime()) / oneDay);

       }

      $('#days').val(diff); //edit box for calculated days or nights

  

  }

 });


});

</script>


<script type="text/javascript">

$(function() {


 $("#arrive").datepicker({ // first datepicker

 

         showAnim:'slideDown',

        duration: 'slow',

        showButtonPanel: true,

        numberOfMonths: 3,

        showWeek: true,

        firstDay: 1,

        defaultDate: "0",

        maxDate: '+2Y',

        minDate:'+1d',

        onSelect: function(dateText, inst)

        {

         test = $(this).datepicker('getDate');

           testm = new Date(test.getTime());

           testm.setDate(testm.getDate() +2);//set minDate for 2nd datepicker


  $("#depart").datepicker("option", "minDate", testm); // second datepicker

  }     

 });      

 $("#depart").datepicker({ // second datepicker

        showAnim:'slideDown',

        duration: 'slow',

        showButtonPanel: true,

        numberOfMonths: 3,

        showWeek: true,

        firstDay: 1,

        defaultDate: "0",

        maxDate: '+2Y',

 

   onSelect: function()

  {

   }

 });


});

</script>

From/To/Days  datepicker code

Arrive/Depart  datepicker code

Back to top Back to top


First Datepicker ID

Second Datepicker ID

Edit Box ID

From/To/Days

from

to

days

Arrive/Depart

Arrive

depart


Select Date Select Date