JQuery Datepicker doesn't change input value

Question

I'm using a Jquery UI Datepicker addon as DateTimePicker http://jsfiddle.net/j5rkbnrt/1/

<input id="deliveryTime" name="deliveryTime" type="text" value="08/05/2015 10:00">

 $('#deliveryTime').datetimepicker({
     dateFormat: 'dd/mm/yy',
     timeFormat: 'HH:mm',
 });

The DateTimePicker is associated to the input field. When I select the date the value of the input field is not changed. So when I submit the form containing this input I always get the default value.

I had a look at the default jquery datepicker and that also doesn't change the value of the input. https://jqueryui.com/datepicker/

What am I missing here?

Answer 1

You are confusing the inline value attribute with the actual value that the input field contains.

By the attribute value, I mean the following:

<input id="deliveryTime" name="deliveryTime" type="text" value="08/05/2015 10:00">

The value attribute is value="08/05/2015 10:00". The value could be whatever date you picked that is entered into the input field.

So even if the attribute is value="08/05/2015 10:00", the input's actual value, meaning whatever text is in the input field, is the real value.

When you do enter a new value into your input and then use $('#deliveryTime').val() you will see that your new value is the actual value of the text inside the input field.

If you are keen on changing the attribute of your input field, which I find kind of ambiguous since val() already returns that value, then you need to do the following:

$('#deliveryTime').change(function(){
    $(this).attr('value', $('#deliveryTime').val());
});

So "On each change of the deliveryTime, set the value attribute to the input value". Fiddle!

As I said, this is ambiguous. I would recommend just using $('#deliveryTime').val() to fulfill the same purpose.