jQuery Datepicker .val() 是空白但显示日期？

Question

这是我的第一个问题。

我一直在寻找答案，但我的搜索似乎带回了很多方法来强制 datepicker 值为空，或者能够访问此处不是选项的选定值。

问题的背景

我有一个包含动态行数的表，每行包含几个日期选择器（我们称它们为 A 日期选择器、B 日期选择器、C 日期选择器）。它还包含一个隐藏的子行，直到单击“展开以获得更多详细信息”按钮，此时会出现更多字段。其中一个字段是“评论”字段。

我的要求是，当更改 A 日期选择器时，必须同时要求“注释”。我能够判断日期选择器何时更改，因此可以通过“评论”的验证器发送一条消息，告诉用户现在需要它。

要求

在 cmets 部分输入详细信息时，我需要能够检查是否在 A 日期选择器中选择了一个日期，以便我们可以动态警告用户 cmets 部分需要 X 个字符，如果有A 日期选择器中的日期。

问题

看起来，当 jQuery 日期选择器更改时，.value 没有更新。填充该行时，A 日期选择器可能为空，并非所有字段都需要设置特定日期，因此也不需要设置所有“评论”字段。

所以我可以知道日期选择器何时更改并获得需要的“评论”字段。但是，用户随后可以使用空白条目填写“评论”字段，或输入不符合 X 字符数限制的值。当没有选择日期时，此行为是可以的。 So when a date is selected I need to enforce the rule.

我的问题是我无法判断是否选择了日期！

在下面的示例中，我有一个空白日期选择器，然后我选择了一个日期并打开了开发人员工具。在网页概览中，我们可以看到日期设置为 2018 年 1 月 20 日。

Overview of the web page

但是通过开发者工具我们可以看到该值实际上是空的。

Datepicker value is set to ""

当日期选择器最初不是空白时，这种行为也是正确的，而不是新日期的值仍然保留旧日期。在下面的示例中，我将日期从 2017 年 12 月 23 日更改为 2017 年 12 月 31 日。

Pre-Populated datepicker

在开发者工具中，该值仍设置为之前的值。

Changed to new date

技术

我正在使用 MVC 和 jQuery，我不是在寻找涉及必须返回控制器的解决方案，因为这通常需要用户必须按下提交按钮，而我的要求是它需要能够响应选择日期并输入 cmets。我只是想要一种能够从日期选择器中获取显示日期而不是以前的值的方法。

这很重要，因为如果它从以前的日期变为现在的空白日期，则会影响要求，因此不再需要 cmets，因为没有日期。如果从空白日期转到选定日期，反之亦然。

我尝试过的事情

我正在尝试将其写入“评论”的 OnChange 方法中，以便检查是否选择了日期。

我尝试在我的 .js 文件中直接调用它，如下所示。对于选项 4 和 5，它包含在 .each 循环中，该循环遍历表中的所有行并找到与已更改的“评论”字段相关的行。

（请注意，parentRow 是指选定的包含日期的表行（包含 cmets 字段的行是子行）。

1) var dateValue = $(parentRow).find("input[name$='datepicker_A']").datepicker("getDate");

2) var dateValue = $(parentRow).find("input[name$='datepicker_A']").val();

3) var datepicker_A = document.getElementById('datepicker_A');

var dateValue = datepicker_A.val();

4) var dateValue = $.datepicker.parseDate("d/M/y", $(this).find("input[name$='datepicker_A']").val());

5) var dateValue = $(this).find("input[name$='datepicker_A']").val();

以上所有内容都返回日期选择器的先前值，而不是新选择的值。所以我的问题是..我如何让它识别新值？

TL:DR

jQuery datepicker 在选择新日期时似乎不会更改输入字段的 .val() 属性，而 .val() 始终是以前的值。如何通过 javascript/jQuery 访问新值？

Answer 1

您的代码应如下所示：

<div>
   Select date: <input id="thedate" type="text" class="date-pick" />
</div>

还有你的 JavaScript（我在这里也使用 jQuery 1.9.1 和 jQuery UI 1.9.2）

$(function() {
    $('.date-pick').datepicker({
        dateFormat: 'dd-mm-yy',
        onSelect: function(dateText, inst) {
            alert(dateText); // Put your code in here
        }
    });
});

Here's a JsFiddle