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

datepicker stops functioning properly after setting value('')

6 Answers 349 Views
Date/Time Pickers
This is a migrated thread and some comments may be shown as answers.
James
Top achievements
Rank 1
James asked on 15 Mar 2012, 05:54 AM
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()?

6 Answers, 1 is accepted

Sort by
0
James
Top achievements
Rank 1
answered on 17 Mar 2012, 11:38 PM
Figured it out - pass null to value() instead of an empty string to clear the field and it works fine.
0
Dimitris
Top achievements
Rank 1
answered on 20 May 2013, 07:00 AM
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 ?
0
Georgi Krustev
Telerik team
answered on 21 May 2013, 07:54 AM
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
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
Dimitris
Top achievements
Rank 1
answered on 23 May 2013, 07:06 AM
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
0
Georgi Krustev
Telerik team
answered on 27 May 2013, 11:42 AM
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
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
Dimitris
Top achievements
Rank 1
answered on 27 May 2013, 01:53 PM
That was really helpful.

Thank you very much Georgi.
Tags
Date/Time Pickers
Asked by
James
Top achievements
Rank 1
Answers by
James
Top achievements
Rank 1
Dimitris
Top achievements
Rank 1
Georgi Krustev
Telerik team
Share this question
or