javascript - DatePicker 不尊重表单重置

Question

我有一个带有各种文本框和剑道日期选择器的 asp.net 表单。我允许用户填写表格，如果他们决定重新开始，我有一个重置按钮。

重置按钮应将表单重置为其原始模型数据。需要明确的是，我不想将表单重置为空白值，我想将所有输入重置为其原始模型值。

这对于文本框来说效果很好，但是在点击重置按钮后，日期选择器仅显示“d”而不是原始模型值。

我使用以下 javascript/jquery 来重置表单:

$(this).closest('form')[0].reset();

这是我使用日期选择器的提取表单代码:

<tr>
    <td><label asp-for="Aircraft.SerialNumber" class="frm-label"></label></td>
    <td>
        <input asp-for="Aircraft.SerialNumber" autocomplete="off" class="k-textbox k-state-disabled" style="width:400px" disabled />
        <span asp-validation-for="Aircraft.SerialNumber" class="text-danger"></span>
    </td>
</tr>
<tr>
    <td><label asp-for="Aircraft.ManufactureDate" class="frm-label"></label> 
    </td>
    <td>
        <kendo-datepicker name="DatePicker" for="Aircraft.ManufactureDate" class=""  style='width: 400px;' />
        <span asp-validation-for="Aircraft.ManufactureDate" class="text-danger"></span>
    </td>
</tr>

我不确定这个问题是否出在 telerik 小部件或我的 jquery/javascript 代码上，所以我还发布了 here

Answer 1

我尝试使用代码示例:https://demos.telerik.com/aspnet-core/datepicker/tag-helper

并使用:

$("#FormID").trigger("reset");

它可以成功地将 datetimepicker 重置为默认模型值:

  <kendo-datepicker name='datepicker'
                      for="OrderDate" 
                      style='width: 100%;'></kendo-datepicker>

但不适用于使用静态值设置的日期时间选择器(更改为格式字符串):

  <kendo-datepicker name="monthpicker"
                      start="CalendarView.Year"
                      depth="CalendarView.Year"
                      format="MMMM yyyy"
                      value='DateTime.Parse("November 2011")'
                      style="width: 100%;"></kendo-datepicker>

但是您始终可以为其设置值(在隐藏字段中存储模型/viewbag 的值):

$("#monthpicker").val("November 2013")

编辑:

因此，作为解决方法，您可以添加隐藏字段:

<input type="hidden" id="DeOrderDate" asp-for="OrderDate"/>

然后使用Jquery重新绑定(bind)值:

$("#FormID").trigger("reset");
$("#OrderDate").data('kendoDatePicker').value($("#DeOrderDate").val())

这应该适用于特殊场景。