datepicker stops functioning properly after setting value('')

[James]

I have two date pickers, one for a start date and one for an end date. When a start date is selected, I check the value of the end date and if it occurs after the end date, I clear the value of the start date by calling .value('') After I do this, I can no longer select a date for that datepicker and have the date appear in the control. Am I doing something wrong? Is there another way to clear the value than passing an empty string to value()?

[James]

Figured it out - pass null to value() instead of an empty string to clear the field and it works fine.

[Dimitris]

I know that the main problem  has to do with the functionality of the datepicker if the value is set to "" .

My question is if we use value(null) why isn't the date data really set to null ? There is always a date in the datepicker no matter what i do.
I have created a JS Bin sample that introduces the problem i am mentioning.  When pressing the "Clear" button in the calendar the only thing that happens is setting the date to the current date.

JS Bin Datepicker

So is there something wrong i am doing here or is there any other workaround to set
the datepicker value to null ?

[Georgi Krustev]

Hello Dimitris,

 
The value(null) method clears the selected value. The footer template actually allows to define the content of the Today button. You can achieve your goal using setTimeout function. Check the updated jsBin demo.

All the best,
Georgi Krustev
the Telerik team

[Dimitris]

Thank you very much Georgi, it worked well for a single datepicker.

Unfortunately i have some issues on the datepickers that are inside a grid. I do replace the datepicker with an editor in the grid "editor: alterDate" and generate the following code for each date field inside the grid.

function alterDate(container, options) {
                        $("<input type='text' id='dateValue-"+ grid.select().index() +"' name='" + options.field + "' " +
                        "data-type='date' data-bind='value:" + options.field + "' " +
                        "data-role='datepicker' style='width: 100%;' " +
                        "class='k-input' role='textbox' aria-haspopup='true' " +
                        "aria-expanded='false' aria-disabled='false' " +
                        "aria-readonly='false' >").appendTo(container).kendoDatePicker({
                             footer: "<button id='clear' class='k-button' onclick=\"setDateToNull('\\#dateValue-"+ grid.select().index() +"\')\" >No value</button>"
                        }).attr("readonly","");
                    }


function setDateToNull(selectedIt) {
    setTimeout(function() {
        $(selectedIt).data("kendoDatePicker").value(null);
    });
}

With the above scenario, although the setDateToNull function works well with a datepicker that is not inside the grid, when i try to set a datefield to null in the grid, kendo  ends up setting again the current date.

Is there an extra workaround for this scenarion ?

Thank you in advance

[Georgi Krustev]

Hello,

 
The Grid's editing uses MVVM which expects from the widget to raise change event when value changes. In this case you will need to trigger change manually, because value method does not raise change event:

function setDateToNull(selectedIt) {
    setTimeout(function() {
        $(selectedIt).data("kendoDatePicker").value(null);
        $(selectedIt).data("kendoDatePicker").trigger("change");
    });
}

Regards,
Georgi Krustev
Telerik

[Dimitris]

That was really helpful.

Thank you very much Georgi.