Javascript JQuery Datepicker 不会更改输入值

JQuery Datepicker doesn't change input value

提问by spike07

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

我正在使用 Jquery UI Datepicker 插件作为 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.

DateTimePicker 与输入字段相关联。当我选择日期时，输入字段的值不会改变。所以当我提交包含这个输入的表单时，我总是得到默认值。

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

我查看了默认的 jquery datepicker，它也不会更改输入的值。https://jqueryui.com/datepicker/

What am I missing here?

我在这里缺少什么？

回答by Rizky Fakkel

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

您将内联value属性与输入字段包含的实际值混淆了。

By the attribute value, I mean the following:

通过属性值，我的意思是：

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

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

值属性是value="08/05/2015 10:00"。该值可以是您在输入字段中选择的任何日期。

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.

因此，即使属性是value="08/05/2015 10:00"，输入的实际值，即输入字段中的任何文本，都是实际值。

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.

当您在输入中输入新值然后使用时，$('#deliveryTime').val()您将看到新值是输入字段内文本的实际值。

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

如果您热衷于更改输入字段的属性，我觉得这有点模棱两可，因为val()已经返回该值，那么您需要执行以下操作：

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

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

所以“在每次更改 deliveryTime 时，将value属性设置为输入值”。小提琴！

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

正如我所说，这是模棱两可的。我建议仅使用$('#deliveryTime').val()来实现相同的目的。

回答by vladymy

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 :)

其作品！它更新输入的值，但在 chrome devtools 中它不显示此更新。尝试提交此表单并检查网络，然后您会看到所有数据都已正确发送:)

回答by Rohil_PHPBeginner

You can use onSelectevent of datetimePicker plugin.

您可以使用datetimePicker 插件的onSelect事件。

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

Demo

演示