Question

I have used a calendar from so called DateTimePicker.js and also used it on my html e.g:

<input id="startDate" name="startDate" id="startDate" type="text" size="20" value="">
    <a href="javascript:NewCssCal('startDate','ddMMyyyy','arrow')">
        <img src="images/cal.gif" width="16" height="16" border="0" alt="Pick a date"/></a>
</input>

The question is, how can i detect any changes on calendar since I tried to test with the following jQuery but apparently it didn’t work:

   <input id="startDate" name="startDate" id = "startDate" type="text" size="20"  value="">
   <script type="text/javascript">$(document).ready(function() {
        $("#startDate").bind('change', function(e) {
            alert('changing date!');
        });
    });
   </script>
   <a href="javascript:NewCssCal('startDate','ddMMyyyy','arrow')">
      <img src="images/cal.gif" width="16" height="16" border="0" alt="Pick a date"/>
   </a>
   </input>

Answer 1

The output(viewsource) is something like

<input id="startDate" readonly="readonly" name="startDate" id = "startDate" type="text" size="20"  value="">

Which contains readonly=”readonly” which makes your input readonly due to which change event is not raised.

Solution:

1) On Page load, create a variable and store the startDate textbox value in it, use settimeout function to periodically check the textbox value with the variable and call a function to do your task on change of textbox.

2) Once document is ready and dom is loaded, write code to set the textbox readonly property to FALSE and set disabled=true. and then bind and use the change event.

$(document).ready(){function(){  your code here });

3) Use jquery UI datepicker, its easy to use and implement.