CODEWITHSUNDEEP
phpjquerydatepicker
Marcus Edensky
Marcus Edensky

Reputation: 944

Launch datepicker code on page load

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?

Upvotes: 0

Views: 461

Answers (3)

subroutines
subroutines

Reputation: 1458

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();">

Upvotes: 1

Adam Merrifield
Adam Merrifield

Reputation: 10407

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.

Upvotes: 0

user1097560
user1097560

Reputation:

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();  
});

Upvotes: 0

Related Questions