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',
 });

组件与输入字段相关联。 当我选择日期时，输入字段的值不会改变。 因此，当我提交包含此输入的表单时，我始终获取默认值。

我查看了默认的jQuery日期选择器，它也不会更改输入字段的值。https://jqueryui.com/datepicker/ 我在哪里出错了？

- spike07

---

你的 jsfiddle 示例在 Firefox 中运行正常。你是在哪个浏览器上测试的？ - Vivek Gupta

在 Chrome 上也运行良好。 - Maurice Perry

这里 http://jsfiddle.net/tkay/j5rkbnrt/2/ 运行良好。 - tkay

在Firefox和Chrome中运行良好。您是否使用IE7或更低版本？ - Bhushan Kawadkar

我在使用Chrome浏览器，但它无法正常工作。版本号为39.0.2171.99，操作系统为Linux 3.13.0-35-generic。我已经尝试在Firefox 32.0上运行，那里一切正常。 - spike07

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()已经返回了该值，那么您需要执行以下操作：

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

因此"每次更改deliveryTime时，将value属性设置为输入值"。Fiddle！

正如我所说的那样，这种表述是有歧义的。我建议只使用$('#deliveryTime').val()来实现相同的目的。

- Rizky Fakkel

---

嗨Rizky，感谢你澄清这个问题。我明白我不应该查找实际属性值的更改。问题是，当我提交表单时，我的Chrome版本实际上没有发送正确的值。但在Firefox上可以正常工作。 发送的值仍然是旧的。即使console.log记录了正确的值更改。 - spike07

不客气。这很奇怪，即使您在Chrome的开发者控制台中使用$（'#deliveryTime'）.val（），您也无法获得值吗？ - Rizky Fakkel

@spike07 你尝试过我的小提琴和你正在工作的网站了吗？ - Rizky Fakkel

现在看起来在Chrome中也可以工作了。可能是一些缓存问题，我不确定，很奇怪。无论如何，非常感谢关于value属性的解释！ - spike07

Answer 2

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

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

演示

- Rohil_PHPBeginner

Answer 3

它可以工作！它正在更新输入的值，但在Chrome开发工具中不显示这些更新。尝试提交此表单并检查网络，然后您将看到所有数据已正确发送：）

- vladymy