Update a DIV when jQueryUI Datepicker is changed?

0
votes

I am experimenting with the jQueryUI Date Picker.

My end goal is to use it with a Project Task management app which shows a Tasks Data in a popup Modal window for each Task record. It then will show a Due Date field as text like this... Due Date: <div id="due-date">05/23/2015</div>

I then want to be able to click on the Due Date #due-date DIV and have it reveal an in-line Date picker calendar.

The user can pick a Date value and it will then update the Due Date: <div id="due-date">05/23/2015</div> to show the new picked Date value. (As well as make an AJAX update post).

The demo below is a start to this process as it has a text input filed that i updated when the calendar date picker value is clicked on. Also changing the text value updates the selected calendar value (2-way).

The problem is that it does not let me update or run other code when the value is selected and changed...

Demo: http://jsfiddle.net/jasondavis/KRFCH/268/

HTML... 

<input type="text" id="d" />

<div id="due-date">05/23/2015</div>

<div id="due-date-cal"></div>

JavaScript...

$('#due-date-cal').datepicker({
    inline: true,
    altField: '#d'
});

$('#d').change(function(){

    // does not work!
    alert($(this).val());
    $('#due-date').html($(this).val());

    // works
    $('#due-date-cal').datepicker('setDate', $(this).val());

});
2
jqueryjquery-uijquery-ui-datepicker

2 Answers

2
votes

Use the onSelect function

JSFiddle

$('#due-date-cal').datepicker({
  inline: true,
  altField: '#d',
  onSelect: function(dateText, inst) {
    $('#due-date').html($(this).val());
  }
});
1
votes

Your event is firing when #d is being changed, not the datepicker.

$(document).on('change', '#due-date-cal', function(){
    //Code Here
});

//Instead of:

$('#d').change(function(){
    //code here
});