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

Question

我在从 table 行获取日期值时遇到问题，并通过 jQuery 将其 post 发送到具有日期类型 HTML 输入字段的日期选择器.我正在使用 MVC 来填充 table 数据。这是我的代码。 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);
});

所以问题是如何从 table 和 post 日期中读取正确的日期值到日期选择器。

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

参考 this fiddle 以获取同时使用无效格式和 ISO 日期格式的示例

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

Answer 2

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

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

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

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

Get date from table and set it to a datepicker jQuery

asp.net-mvc

jquery

datetimepicker