jQuery UI Datepicker altField .change function not working?

Question

Can anyone tell me why the console.log line isn't getting run when I select a date with the jQuery UI Datepicker? Thanks for reading.

<script type="text/javascript">
    $(window).ready(function() {
        $(function() {
            $("#datepicker").datepicker({ altField: '#dateIntermediate'});
        });
        $('#dateIntermediate').change(function(){ 
            console.log("dateIntermediate changed");
        });
    });
</script>
<p>Date: <input id="datepicker" type="text"></p>
<input type="hidden" id="dateIntermediate" />

Answer 1

The browser just doesn't fire the change event in these cases (setting the value by script), if you want to know when it happens though, you can use the onSelect handler for the datepicker, like this:

$(function() {
  $("#datepicker").datepicker({ 
    altField: '#dateIntermediate',
    onSelect: function() { 
      alert('Current #dateIntermediate value: ' + $("#dateIntermediate").val());
    }
  });
});

You can test it here. Or, alternatively you can trigger the change handler you currently have in the same way:

$(function() {
  $("#datepicker").datepicker({ 
    altField: '#dateIntermediate',
    onSelect: function() { 
      $("#dateIntermediate").change();
    }
  });
  $('#dateIntermediate').change(function(){ 
    console.log("dateIntermediate changed");
  });
});​

You can test that here

---

As an aside, you don't need the $(window).ready(function() { }); wrapper on there, it's equivalent to $(document).ready(function() { }); which is already handled by your $(function() { }); wrapper. Your current method works because $(anything).ready() all goes to the same place, but there's no need for more than one wrapper, so just remove the outer one :)