How to clear value?

[Dennis]

I've been searching through documentation and fourms with no luck.

When you create a calendar, it has a default value of null. No date is selected. I want to clear the calendar to no selection progrmaticly. If I send null via the value method it errors out and I couldn't find any other clear method.

is this possible?

[Kiril Nikolov]

Hello Dennis,

There is not built-in functionality to remove the selection of the Kendo UI Calendar. But I have tested this code and it seems to work without errors:

$("#calendar").data('kendoCalendar').value("")

You can test it on this demo:

http://demos.kendoui.com/web/calendar/index.html
 
Regards,
Kiril Nikolov
Telerik

[Nithya]

 

<div class="col-sm-6 col-md-6 col-lg-6">
                @(Html.Kendo().DatePickerFor(Model => Model.ACTPayeezyGatewayEffectiveDate).Name("ACTPayeezyGatewayEffectiveDate").HtmlAttributes(new { title = "ACTPayeezyGatewayEffectiveDate" , data_fieldName = "ACT_PayeezyGatewayEffectiveDate", @disabled ="disabled" }))
            </div>

<script>

 $("[data-fieldName=ACT_PayeezyGatewayEffectiveDate]").val('');

</script>

[Alex Hajigeorgieva]

Hi, Nithya,

The Kendo UI DatePicker has a value() method which should be used in addition to triggering the change event. The approach that you have demonstrated will only clear the element value but the widget valu and the model value will not be updated. Instead, you should do this:

https://dojo.telerik.com/@bubblemaster/omoNADOp

var datepicker = $("#ACTPayeezyGatewayEffectiveDate").data("kendoDatePicker");
datepicker.value(null);
datepicker.trigger("change");

Also, when using the EditorForModel syntax, a Name() should not be defined, it will be generated out of the box.

Kind Regards,
Alex Hajigeorgieva
Progress Telerik

[todd]

This doesn't work for me.  The code does clear the displayed value in the datepicker but it doesn't show the placeholder text that appears before the datepicker has a value and clicking the calendar button shows that the selected value is still there.

[Tsvetomir]

Hi Todd,

I have investigated the provided example and I have noticed that there is no placeholder initially. Therefore, when the actual value of the widget is cleared, an empty input is depicted. Also, upon opening the calendar, the "Today" date is always highlighted, while, the widget has no value. 

Could you let me know if you are using a variation of the example below? And, perhaps modify it in order to resemble your scenario:

https://dojo.telerik.com/oRiZexEV

Looking forward to your reply.

 

Kind regards,
Tsvetomir
Progress Telerik

[todd]

The code I'm using to clear the value of the date picker is essentially the same as yours.  My datepicker starts with placeholder text.  The clear function clears the value, but does not show the placeholder text (which is the more important part for me) and the calendar popup still shows the selected value that was supposed to be cleared.

I've illustrated this in the attached images.

[Tsvetomir]

Hi Todd,

Thank you for taking the time to share the additional details. Indeed, the focus of the previously selected date is a behavior of the picker that is applied always - regardless of the fact that it is programmatically updated. 

However, I have noticed that the placeholder value is shown after the value is cleared. Can you confirm the same in the example below:

https://dojo.telerik.com/uhAqEKIM

 

Regards,
Tsvetomir
Progress Telerik

[todd]

I'm doing exactly what you're doing but the placeholder text does not appear after running this:

    var dp=jQuery("[hsname='clientfilter_dateopen1']").data("kendoDatePicker");
    dp.value(null);
    dp.trigger("change");

[Tsvetomir]

Hi Dennis,

Is it possible for you to share a demo in which the defect can be observed? I have tried to replicate the described behavior to no avail.

You could use the example from my previous response as a base. Whenever you share a sample, I will have the chance to debug and investigate the case, hence, I will get back to you with my observations and suggestions.

 

Kind regards,
Tsvetomir
Progress Telerik

[todd]

My code is in the context of a product called Handshake.  It's possible the problem is at their end.  I'll consult them next.