从表中获取日期并将其设置为日期选择器 jQuery

Question

我在从表格行获取日期值并通过 jQuery 将其发布到带有日期类型的 HTML 输入字段的日期选择器时遇到问题。我正在使用 MVC 用数据填充表格。这是我的代码。 Invoice.DueDate 是 datetime 类型，现在被读取为空字符串。有什么建议吗？

<tbody>
    @foreach (var invoice in Model.InvoiceList)
    {
        <tr>
            <td id="InvoiceN" class="change align-center">
                <a href="#backdropreport" class="btn-sm btn-primary  UpdateInvoice"  
                    data-invoiceDueDate="@(invoice.DueDate)">Ändra</a>
            </td>
        </tr>
    }
</tbody>

 <div class="form-group">
     <label for="date">Förfallodatum</label>
     <input type="date" id="date" name="start"/>
 </div>

$(".UpdateInvoice").click(function () {
    var invoiceDueDate = $(this).attr("data-invoiceDueDate");
    $("#date").val(invoiceDueDate);
});

所以问题是如何从表中读取正确的日期值并将日期发布到日期选择器。

Answer 1

您使用 HTML5 数据选择器（请注意，这仅在 Chrome 中受支持）因此您需要将日期格式化为 ISO 格式 - 即 yyyy-MM-dd

你可以这样做

data-invoiceDueDate="@invoice.DueDate.ToString("yyyy-MM-dd")"

或通过使用DisplayFormat 属性并设置DisplayFormatString 属性（然后使用data-invoiceDueDate="@Html.DisplayFor(m => invoice.DueDate)"

有关同时使用无效格式和 ISO 日期格式的示例，请参阅 this fiddle

旁注：您正在通过使用无效的 html 的 <td id="InvoiceN" ... 在 foreach 循环中创建重复的 id 属性

Answer 2

我找到了解决问题的方法，即在日期时间对象上获取正确的格式并将其发布到日期选择器，

我的解决方案是使用 moment.js 来获得正确的格式。

 $(".UpdateInvoice").click(function () {
        var invoiceDueDate = $(this).attr("data-invoiceDueDate");
        var date = moment(invoiceDueDate).format("YYYY-MM-DD");
        $("#date").val(date);
    });