Launch datepicker code on page load - 【StackMirror】|php|jquery|datepicker

I have two datepickers. When start date is selected, end date is automatically assigned x days later through php. This works fine, but I have one problem. The jQuery code that does this job, I want it to be launched also when the page is refreshed/loaded (start date is saved in a php session). This is my code:

$(document).ready(function(){
    $("#txtStartDate").datepicker({
        onSelect: function(){
        var datum = $(this).datepicker('getDate');
        datum.setDate(datum.getDate() + <?php echo $nights; ?>);
        $("#txtEndDate").datepicker("setDate", new Date(datum.getTime()));
        }
    });
    $("#txtEndDate").datepicker();
});

I was thinking along the lines of using "onSelect, onLoad: funct...".

How is this achieved?

2012-04-04 03:25
by Marcus Edensky

Create a seperate function to set end date, then call it on onLoad event.

function setEndDate(){
    var datum = $("#txtStartDate").datepicker('getDate');
    datum.setDate(datum.getDate() + <?php echo $nights; ?>);
    $("#txtEndDate").datepicker("setDate", new Date(datum.getTime()));
}

then <body onLoad="setEndDate();">

2012-04-04 04:50
by subroutines

Thanks for this solution, works perfectly - Marcus Edensky 2012-04-04 14:05

Add $("#txtStartDate").trigger('focus'); to the end

$("#txtStartDate").datepicker({
    onSelect: function() {
        var datum = $(this).datepicker('getDate'),
            days = 2,
            d = new Date(datum.getTime() + (days * 86400000)),
            month = parseInt(d.getMonth(), 10)+1 < 10 ? '0'+ (parseInt(d.getMonth(), 10)+1) : parseInt(d.getMonth(), 10)+1,
            day = d.getDate() < 10 ? '0'+ d.getDate() : d.getDate(),
            year = d.getFullYear();
        $("#txtEndDate").val(month+'/'+day+'/'+year);
    }
});
$("#txtEndDate").datepicker();
$("#txtStartDate").trigger('focus');

Updated. Change the variable days to set end date that many days in advance.

2012-04-04 03:44
by Adam Merrifield

Thanks for your answer, but what this does is to automatically open up the calendar for #txtStartDate when the page loads. What I want is for #txtEndDate to get it's date automatically assigned (X days after first date, according to my code in the onSelect function) when the page loads, and not only when the first date is selected. Is this achievable - Marcus Edensky 2012-04-04 03:50

I updated it, it should work now - Adam Merrifield 2012-04-04 04:45

I'm sorry, but I couldn't get your code to work. The datepicker simply didn't work anymore with this code - Marcus Edensky 2012-04-04 14:01

Try removing document.ready and just place within the script tag.

<script type="text/javascript">

 $("#txtStartDate").datepicker({
        onSelect: function(){
        var datum = $(this).datepicker('getDate');
        datum.setDate(datum.getDate() + <?php echo $nights; ?>);
        $("#txtEndDate").datepicker("setDate", new Date(datum.getTime()));
        }
    });
    $("#txtEndDate").datepicker();

 </script>

if above does not solve your problem try to set defaultDate: new Date in start date picker as below

$(function () {
    $.datepicker.setDefaults({
        //Set your common attributes here for both date pickers
    });

    var dateFrom = $('#txtStartDate').datepicker({ defaultDate : new Date,
        onSelect: function (selectedDate) {
            dateTo.datepicker('option', 'defaultDate', dateFrom.datepicker('getDate')+[ x days //add days according to your need]);
        }
    });  

    var dateTo = $('#txtEndDate').datepicker();  
});

2012-04-04 04:22
by NoName

get help from http://jqueryui.com/demos/datepicker/#option-defaultDate to set default dat - NoName 2012-04-04 04:42

Unfortunately I couldn't get this code to work neither, but I'm very thankful for your effort - Marcus Edensky 2012-04-04 14:04