Jquery UI Datepicker Works, but unable to select date

Question

I am using Jquery UI datepicker the code I am using is as follows

ps_jquery( ".datefield " ).datepicker({
changeMonth: true,
changeYear: true,
yearRange: "-100:+10",
});

This code is working fine half of the time. When all elements with the class .datefield initially load the script works fine. When I use ajax to return more elements and reinitialize the datepicker everything working before still works. The odd thing is that the new elements on the page open up with the datepicker but when picking on the date it doesn't populate the input field. I am currently unable to find an answer to this problem and hoping someone knows how to fix this.

Answer 1

Try rebinding datepicker after ajax updates. So you call on document.ready:

ps_jquery( ".datefield " ).datepicker({
changeMonth: true,
changeYear: true,
yearRange: "-100:+10",
});

//later you do ajax

 $.ajax({
        type: "GET",
        url: 'foo.php',
        data: "id=" + id,
        success: function(data) {
           //then rebind datepicker:
           ps_jquery( ".datefield " ).datepicker({
           changeMonth: true,
           changeYear: true,
           yearRange: "-100:+10",
           });
        }
    });

This is good opportunity to put your datepicker logic and options in a function and just call that function when needed.