I'm using a Jquery UI Datepicker addon as DateTimePicker /
<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. /
What am I missing here?
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?
Share Improve this question asked May 6, 2015 at 11:46 spike07spike07 8692 gold badges12 silver badges21 bronze badges 5- 1 You jsfiddle example is working fine in firefox. which browser you are testing on?? – Vivek Gupta Commented May 6, 2015 at 11:51
- Works fine on chrome too – Maurice Perry Commented May 6, 2015 at 11:52
- jsfiddle.net/tkay/j5rkbnrt/2 works fine here. – tkay Commented May 6, 2015 at 11:52
- working fine in firefox and chrome. Are you using IE7 or less? – 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 Commented May 6, 2015 at 12:02
3 Answers
Reset to default 12You 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.
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 :)
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