DatePicker Does Not Respect Javascript Form Reset

[Reafidy]

I have an asp.net form with various textboxes and datepickers.   I allow the user to fill in the form and if they decide to start again I have a reset button for them.

The reset button should reset the form to its original model data.  To be clear I don't want to reset the form to blank values, I want to reset all the inputs to their original modal values.

This works nicely for the textboxes however after hitting reset button the datepicker simply displays a "d" and not the original model value.

I use the following javascript/jquery to reset the form:

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

 

Here is my extract form code with the datepicker:

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

 

[Angel Petrov]

Hello,

Generally the datepicker has logic that will set a value on reset of the form. For that purpose the input element defaultValue will be used. Can you please send  us a sample which demonstrates the issue? You can upload it to Google Drive for example and provide us with a download link.

Regards,
Angel Petrov
Progress Telerik

[Reafidy]

Hello Angel,  

Thanks for your reply.   To make it easier for you I modified the tag helper in your own Telerik.MVC.Examples project found under C:\Program Files (x86)\Progress\Telerik UI for ASP.NET Core R2 2018\wrappers\aspnetcore\Examples\AspNet.Core\VS2017 to give you a demonstration. 

@addTagHelper *, Kendo.Mvc
@addTagHelper *, Microsoft.AspNetCore.Mvc.TagHelpers
@model OrderViewModel

<form asp-controller="datepicker" asp-action="tag-helper" method="post" role="form">
    <div class="demo-section k-content">
        <h4>Show e-mails fromm:</h4>
        <kendo-datepicker name='datepicker'
                          for="OrderDate"
                          format="dd/MM/yyyy"
                          style='width: 100%;'></kendo-datepicker>
        <br />
        <br />
        <span asp-validation-for="OrderDate" style="color:red"></span>
        <h4 style="margin-top: 2em;">Add to archive mail from:</h4>
        <kendo-datepicker name="monthpicker"
                          start="CalendarView.Year"
                          depth="CalendarView.Year"
                          format="MMMM yyyy"
                          value='DateTime.Parse("November 2011")'
                          style="width: 100%;"></kendo-datepicker>
        <br />
        <br />
        <button id="btnTest" type="button" class="k-button">Submit</button>
    </div>
</form>
<script>
    $("#btnTest").click(function () {
        $(this).closest("form").trigger("reset");
    });
</script>

 

On hitting the reset button the first taghelper is reset to "dd/MM/yyyy" when it should be reset to "06/05/1998"

The only difference with mine is that I have my model annotated with [DataType(DataType.Date)] which makes it reset to "d"

[Konstantin Dikov]

Hello Reafidy,

The "format" property is being set to the "value" property of the rendered input element used for initializing the DatePIcker, which means that the format will be used as default value when the form is cleared. Removing the "format" property from the configuration demonstrates how the default value will be changed to the initial date. We will investigate this on our side to see if its possible to change it, but meanwhile you could try the following workaround:

@addTagHelper *, Kendo.Mvc

<form asp-controller="datepicker" asp-action="tag-helper" method="post" role="form">
    <div class="demo-section k-content">
        <h4>Show e-mails fromm:</h4>
        <kendo-datepicker name='datepicker'
                          format="dd/MM/yyyy"></kendo-datepicker>
        <br />
        <br />
        <span asp-validation-for="OrderDate" style="color:red"></span>
        <h4 style="margin-top: 2em;">Add to archive mail from:</h4>
        <kendo-datepicker name="monthpicker"
                          start="CalendarView.Year"
                          depth="CalendarView.Year"
                          format="MMMM yyyy"
                          value='DateTime.Parse("November 2011")'></kendo-datepicker>
        <br />
        <br />
        <button id="btnTest" type="button" class="k-button">Submit</button>
    </div>
</form>
<script>
    $(document).ready(function(){
        $("#monthpicker").attr("value", kendo.toString($("#monthpicker").data("kendoDatePicker").value(), "MMMM yyyy"));

    })
    $("#btnTest").click(function () {
        $(this).closest("form").trigger("reset");
    });
</script>

Hope this helps.


Regards,
Konstantin Dikov
Progress Telerik

[Reafidy]

Hi Konstantin,  Thanks for your response.  Have you had a chance to investigate things at your end.   Unfortunately due to the amount of datepickers throughout my application your workaround feels rather hacky.

[Konstantin Dikov]

Hi Reafidy,

After some debugging it seems that passing the date format in the following syntax will pass the formatted value as the default value of the input element:

format="{0:MMMM yyyy}"

The above seems to be applicable only for the DatePicker Tag helper and we will definitely consider unifying it with the format used in the HTML helpers and the Kendo UI widget. 

Please try the above format on your side and let me know if it resolves the issue.


Regards,
Konstantin Dikov
Progress Telerik