jquery datepicker

Question

I've looked at a few question on here and online but i cant seem to find the answer im looking for or maybe i just cant implement it right. I have 2 datepickers...a check in date and a check out date. The check out date must always be within 30 days of the check in date. I've managed to use the code below to get this result however its on an onSelect therefore it dosent work when the page is loaded, only when u select a check in date. By default the check in date is today therefore the check out should only be selectable for up to 30 days from when the page loads. Any help would be appreciated.

    var today = new Date();
today.setHours(0,0,0,0);
$(function(){$( "#datepicker, #departure" ).datepicker({
    defaultDate: +1,
    minDate: 0,
    maxDate: '+12m',
    dateFormat: 'dd/mm/yy',
    numberOfMonths: 3,
    showOn: 'both',
    buttonImageOnly: true,
    buttonImage: 'http://images.aboutrooms.com/hotels/graphics/calendar.gif',
    //beforeShowDay: function(date){return [date.getTime() != today.getTime(), ''];}
    onSelect: function( selectedDate ) {
        if(this.id == 'datepicker'){
          var dateMin = $('#datepicker').datepicker("getDate");
          var rMin = new Date(dateMin.getFullYear(), dateMin.getMonth(),dateMin.getDate() + 1); // Min Date = Selected + 1d
          var rMax = new Date(dateMin.getFullYear(), dateMin.getMonth(),dateMin.getDate() + 31); // Max Date = Selected + 31d
          $('#departure').datepicker("option","minDate",rMin);
          $('#departure').datepicker("option","maxDate",rMax);                    
        }

    }
        });
});

score 0 · Answer 1 · answered Mar 19 '15 at 12:35

0

simply update field with end of date picker initialization like this

$('.date-pick').datePicker().val(new Date()).trigger('change')

answered Mar 19 '15 at 12:35

Gayan

2,750
5
47
88

score 0 · Accepted Answer · edited May 23 '17 at 12:06

do it like this:

move that onSelect function to external function
make call on it when $(document).ready();
point to it from onSelect in datepicker configuration object

fn:

function datepickerhandle( selectedDate ) {
        if(this.id == 'datepicker'){
          var dateMin = $('#datepicker').datepicker("getDate");
          var rMin = new Date(dateMin.getFullYear(), dateMin.getMonth(),dateMin.getDate() + 1); // Min Date = Selected + 1d
          var rMax = new Date(dateMin.getFullYear(), dateMin.getMonth(),dateMin.getDate() + 31); // Max Date = Selected + 31d
          $('#departure').datepicker("option","minDate",rMin);
          $('#departure').datepicker("option","maxDate",rMax);                    
        }

    }

onSelect:

onSelect: datepickerhandle,

onLoad:

$(document).ready(function(){ datepickerhandle([selected time]); });

to get selected time see this SO question: jQuery DatePicker: Get Selected Date

variant no. 2

jQuery datepicker set selected date, on the fly

when document loads, set the date for datepicker instance on-fly to fire onSelected event

Thanks for the response. just having troubles with the call. I'm guessing its to do with the selected time but I dont quiet understand it. If I just do datepickerhandle(); it just works as I had it initially. Any chance you can help me with that selected time. — Ghatzi, Aug 30 '11 at 16:11
use alternative field, which can be hidden http://jqueryui.com/demos/datepicker/#alt-field — Marek Sebera, Aug 30 '11 at 16:14

jquery datepicker

2 Answers2