Question

I have the following script which works fine:

$(".txtDate").datepicker( {
    changeMonth: true,
    changeYear: true,
    yearRange: "+0:+1",
    showButtonPanel: false,
    dateFormat: "dd/mm/yy",
    onSelect: function(dateText, obj){
        test_function( dateText );
    }
} );

$('.txtDate').datepicker( "setDate" , new Date() );

function test_function( strDate ) {
    alert( strDate );
}

It datepicker enables the HTML control .txtDate, it displays todays’ date in .txtDate by default when the webpage loads, and it also displays an alert if I choose another date from the datepicker.

My question is, how do I get the datepicker to execute test_function when the page loads so it displays the default date in an alert set by the datepicker when the page loads?

The alert test_function is just a test to see when the datepicker executes other functions, the end result will be a lot more complex.

Also, I have a widget based website, which lets people add many of the same widget on the page at once, which means I will have many .txtDate controls. So I can’t just get the value of .txtDate, I will need to find the closest one based on $(this).

Answer 1

You try to call this test_function() function in page load, so you can able to get the datepicker default value in page load like,

<script type="text/javascript" language="javascript">
$(function(){
   $('.txtDate').datepicker( "setDate" , new Date() );     
   test_function();
});

function test_function() {
   alert( $("#txtDate").val() );
 }
</script>

You dont need to pass any parameter values to this js function.