jquery datepicker with onclick event

becouse textboxes are stored in viewstate i cannot use this JS code

<script type="text/javascript">
$(function() {
    $.datepicker.setDefaults($.datepicker.regional["sl"]);
    $(".inputTypeDate").datepicker({
        dateFormat: "dd.mm.yy",
        changeMonth: true,
        changeYear: true
    });
});
</script>

becouse code of textboxes are not visible in source code.

so i try to use this with onlcick event.

html exa开发者_JAVA百科mple:

<p>Date: <input type="text" id="datepicker" onClick="$(function() {$( '#datepicker' ).datepicker({changeMonth: true,    changeYear: true});});"></p>

which works but only when i click second time on textbox. How to enable calendar on first click?

If you are having multiple textboxes with the same id it will be invalid.

Add a class name for the textboxes and bind the handler to those objects. Something like

$(function(){
    $("input:text.inputTypeDate").datepicker({
        dateFormat: "dd.mm.yy",
        changeMonth: true,
        changeYear: true
    });
});


<input type="text" class="inputTypeDate" />

Edit

I don't know why you are not able to view the element in the source code. Are you dynamically generating the element(AJAX response). If it is a dynamically created element then you will need to add the handlers using a plugin like livequery

Or you could try by changing the click event handler of the text box as below.

$(function(e) {e.preventDefault();$( '#datepicker' ).datepicker({changeMonth: true,    changeYear: true}).show();});

But I would suggest that you follow the technique specified by Rahul if possible