Jquery datepicker with onclick event

Question

becouse textboxes are stored in viewstate, i can't 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 for text fields does not appear in source code.

so I'm trying to use this with the onlcick event.

Example

html:

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

which works, but only when I click a second time on the text box. How to enable the calendar on first press?

Answer 1

If you have multiple text fields with the same identifier, this will be invalid.

Add a class name for text fields and bind a handler to these objects. Sort of

 $(function(){ $("input:text.inputTypeDate").datepicker({ dateFormat: "dd.mm.yy", changeMonth: true, changeYear: true }); }); <input type="text" class="inputTypeDate" /> 

Edit

I do not know why you cannot view the element in the source code. You dynamically generate an element (AJAX response). If this is a dynamically created element, you will need to add handlers using a plugin like livequery

Answer 2

Or you can try changing the click event handler in the text box as shown below.

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

But I would advise you to follow the method indicated by Rahul, if possible