How to clear value?

2 Answers 4231 Views
Calendar
Dennis
Top achievements
Rank 2
Dennis asked on 22 Aug 2013, 09:19 PM
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?

2 Answers, 1 is accepted

Sort by
0
Accepted
Kiril Nikolov
Telerik team
answered on 23 Aug 2013, 12:52 PM
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
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
Nithya
Top achievements
Rank 1
commented on 13 Sep 2019, 09:28 PM

 

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

0
Alex Hajigeorgieva
Telerik team
answered on 17 Sep 2019, 08:58 AM
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
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.
todd
Top achievements
Rank 1
commented on 17 Aug 2020, 04:28 PM

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
Telerik team
commented on 19 Aug 2020, 12:32 PM

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
Top achievements
Rank 1
commented on 19 Aug 2020, 01:14 PM

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
Telerik team
commented on 21 Aug 2020, 07:55 AM

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

Five days of Blazor, Angular, React, and Xamarin experts live-coding on twitch.tv/CodeItLive , special prizes and more, for FREE?! Register now for DevReach 2.0(20).

todd
Top achievements
Rank 1
commented on 01 Sep 2020, 02:53 PM

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
Telerik team
commented on 02 Sep 2020, 11:50 AM

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

Virtual Classroom, the free self-paced technical training that gets you up to speed with Telerik and Kendo UI products quickly just got a fresh new look + new and improved content including a brand new Blazor course! Check it out at https://learn.telerik.com/.

todd
Top achievements
Rank 1
commented on 02 Sep 2020, 05:57 PM

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.
Tags
Calendar
Asked by
Dennis
Top achievements
Rank 2
Answers by
Kiril Nikolov
Telerik team
Alex Hajigeorgieva
Telerik team
Share this question
or