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?

You jsfiddle example is working fine in firefox. which browser you are testing on?? — Vivek Gupta
– Vivek Gupta, Commented May 6, 2015 at 11:51
working fine in firefox and chrome. Are you using IE7 or less? — Bhushan Kawadkar
– Bhushan Kawadkar, Commented May 6, 2015 at 11:54
I'm on Chrome and it doesn't work. Version 39.0.2171.99 OSVersion Linux: 3.13.0-35-generic. I've tried on Firefox 32.0 and there it's working fine — spike07
– spike07, Commented May 6, 2015 at 12:02

Rizky Fakkel · Accepted Answer · 2015-05-06 12:05:23Z

12

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.

edited May 6, 2015 at 12:05

answered May 6, 2015 at 12:01

Rizky Fakkel

9,3331 gold badge16 silver badges20 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

spike07 Over a year ago

Hi Rizky thanks for clarifying this. I understand I should not look for changes at the actual attribute value. The problem is that my Chrome version doesn't actually send the correct value when I submit the form. It works on Firefox though. The value sent is still the old one. Even though the console.log is logging the correct value changes

Rizky Fakkel Over a year ago

You're welcome. That is strange, so even if you use $('#deliveryTime').val() in your developer console of Chrome, you don't get a value?

Rizky Fakkel Over a year ago

@spike07 Have you tried my fiddle and the website you are working on?

spike07 Over a year ago

It looks it's working now in Chrome as well. Maybe some caching issue I'm not sure, weird. Thanks a lot for the explanation regarding the value attribute anyway!

vladymy · Accepted Answer · 2015-05-06 12:03:30Z

0

it's works! Its updating input's value, but in chrome devtools it not shows this updates. Try submit this form and check network, then you will see that all data have been sent correctly :)

answered May 6, 2015 at 12:03

vladymy

3822 silver badges6 bronze badges

Comments

Rohil_PHPBeginner · Accepted Answer · 2015-05-06 12:04:35Z

0

You can use onSelect event of datetimePicker plugin.

 $('#deliveryTime').datetimepicker({
     dateFormat: 'dd/mm/yy',
     timeFormat: 'HH:mm',
     onSelect: function(dateText, inst) {
         $('#'+inst.id).attr('value',dateText);
    }
 });

Demo

answered May 6, 2015 at 12:04

Rohil_PHPBeginner

6,0802 gold badges24 silver badges32 bronze badges

Collectives™ on Stack Overflow

JQuery Datepicker doesn't change input value

3 Answers 3

4 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

4 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related