This is a migrated thread and some comments may be shown as answers.

DatePicker Does Not Respect Javascript Form Reset

5 Answers 1128 Views
Date/Time Pickers
This is a migrated thread and some comments may be shown as answers.
Reafidy
Top achievements
Rank 1
Reafidy asked on 26 Nov 2018, 08:21 PM

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>

 

5 Answers, 1 is accepted

Sort by
0
Angel Petrov
Telerik team
answered on 29 Nov 2018, 03:49 PM
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
Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
0
Reafidy
Top achievements
Rank 1
answered on 30 Nov 2018, 11:55 PM

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"

0
Konstantin Dikov
Telerik team
answered on 05 Dec 2018, 02:28 PM
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
Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
0
Reafidy
Top achievements
Rank 1
answered on 17 Dec 2018, 08:02 AM
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.
0
Konstantin Dikov
Telerik team
answered on 19 Dec 2018, 02:54 PM
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
Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
Tags
Date/Time Pickers
Asked by
Reafidy
Top achievements
Rank 1
Answers by
Angel Petrov
Telerik team
Reafidy
Top achievements
Rank 1
Konstantin Dikov
Telerik team
Share this question
or