JQuery 日期选择器不更改输入值

Question

我正在使用 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',
 });

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

我查看了默认的 jquery 日期选择器，它也没有改变输入的值。 https://jqueryui.com/datepicker/

我在这里错过了什么？

Answer 1

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

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

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

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

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

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

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

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

所以"On each change of the deliveryTime, set the value attribute to the input value"。 Fiddle!

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

Answer 2

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

Answer 3

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

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

Demo

JQuery 日期选择器不更改输入值

JQuery Datepicker doesn't change input value

javascript

jquery

jquery-ui

datepicker