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

Validating number to date

4 Answers 545 Views
Date/Time Pickers
This is a migrated thread and some comments may be shown as answers.
Bernhard
Top achievements
Rank 1
Bernhard asked on 02 Dec 2016, 12:29 PM

Hello,

I have a datepicker with validation rule that calculates a new date, if the input is a number.

E.g. if today is 12/24/2016 and I type in 2 I get the date 12/26/2016.

This works fine. By validation the right date is set.

But if the datefield is in a grid, the date is not always set, only every second time.

This happens if I type in a number and after that i click on another gridcolumn.

It works, if I type in a number and then press enter-key or tab-key or click outside the gid.

Does the validation works different by clicking on the grid and hitting the enter/tab key, ?

 

The validation function is:

01.var customDateValidation = function(e, field) {
02.  var input = $(e).val();
03.  if(!isNaN(input)) {
04.    var noOfDays = parseInt(input);
05.    if(noOfDays > -366 && noOfDays < 366) {
06.    var newDate = new Date();
07.    newDate.setDate(newDate.getDate() + noOfDays);
08. 
09.    var item = $("#myGrid").data("kendoGrid").dataItem($(e).closest("tr"));
10.    item[field] = newDate;
11.    item.dirty = true;
12. 
13.    return true;
14.    }
15.    return false;
16.  }
17. 
18.  var date = kendo.parseDate(input, "dd.MM.yyyy");
19.  if(date) {
20.       return true;
21.  }
22. 
23.  if(input == null || input == "") {
24.    return true;
25.  }
26.  return false;
27.};

 

Or is there another way to turn integers to date with a grid datefield?

Thanks in advance

 

4 Answers, 1 is accepted

Sort by
0
Georgi Krustev
Telerik team
answered on 06 Dec 2016, 08:38 AM
Hello Bernhard,

The best place to enhance the parsing logic of the widget is in the widget itself. Mutating the model/widget value inside the validator logic is not a stable solution and could have many side effects.

What I would suggest you is to incorporate the same logic used in this how-to demo:

http://docs.telerik.com/kendo-ui/controls/editors/datepicker/how-to/datejs-integration

On blur just apply the custom logic and update the widget's value whenever it is needed.

Regards,
Georgi Krustev
Telerik by Progress
Kendo UI is ready for Visual Studio 2017 RC! Learn more.
0
Bernhard
Top achievements
Rank 1
answered on 07 Dec 2016, 02:42 PM

Hello and thanks for the advice,

I registered an editor on the column for the date field like this:

01.getDatePicker : function(minVal, maxVal) {
02.     
03.    return function(container, options) {
04.         
05.        var datePicker = $('<input name="' + options.field
06.                                + '" data-text-field="' + options.field
07.                                + '" data-value-field="' + options.field
08.                                + '" data-bind="value:' + options.field
09.                                + '" data-format="' + options.format + '"/>')
10.                            .appendTo(container)
11.                            .kendoDatePicker({});
12.         
13.        $('<span class="k-invalid-msg" data-for="'+options.field+'"></span>').appendTo(container);
14.         
15.        datePicker.on("blur", function() {
16.               var element = $(this);
17.               var widget = element.data("kendoDatePicker");
18.               var input = element.val();
19.                
20.               if(isInt(input)) {
21.                var noOfDays = parseInt(input);
22.                 
23.                if(noOfDays > minVal && noOfDays < maxVal) {
24.                    var newDate = new Date();
25.                    newDate.setDate(newDate.getDate() + noOfDays);
26.                     
27.                    var dateString = kendo.toString(newDate, 'dd.MM.yyyy');
28.                     
29.                    widget.value(dateString);
30.                    widget.trigger("change", {value: widget.value()});
31.                }
32.            }
33.           });
34.    }
35.}

 

This works as expected but the datepicker doesn't validate the input like usual.

When I deliberately put an invalid string in the input, like random letters, usually the datepicker would show the invalid-message. Now it just closes the cell and leaves the date field null.

It also doesn't pick up the "required" message as defined in the grid's dataSource definition. I can of course add the "required" attribute in the html as needed.

 

Do I have to register a validator to the custom datepicker (if so, how?) or can I use the grid's validation?

0
Bernhard
Top achievements
Rank 1
answered on 07 Dec 2016, 03:08 PM
To clarify: I removed my custom logic from the validation and solved the problem with the custom editor. This is now only about the 'standard' validation not picking up on the custom editor.
0
Bernhard
Top achievements
Rank 1
answered on 08 Dec 2016, 11:33 AM

I registered my function on the datepickers blur event now differently, using the edit event on the grid (when the datepicker is created). This works better than my previous solution and solves the issue for me.

 

01.edit : function(e) {
02.    var datePickerElement = e.container.find("[data-role='datepicker']");
03.     
04.    if(datePickerElement.length) {
05.        var datePicker = datePickerElement.kendoDatePicker();
06.        datePicker.on("blur", function() {
07.            var element = $(this);
08.            var widget = element.data("kendoDatePicker");
09.            var input = element.val();
10.             
11.            if(isInt(input)) {
12.                var noOfDays = parseInt(input);
13.                 
14.                if(noOfDays > -366 && noOfDays < 366) {
15.                    var newDate = new Date();
16.                    newDate.setDate(newDate.getDate() + noOfDays);
17.                     
18.                    var dateString = kendo.toString(newDate, 'dd.MM.yyyy');
19.                     
20.                    widget.value(dateString);
21.                    widget.trigger("change", {value: widget.value()});
22.                }
23.            }
24.        });
25.    }
26.}

Tags
Date/Time Pickers
Asked by
Bernhard
Top achievements
Rank 1
Answers by
Georgi Krustev
Telerik team
Bernhard
Top achievements
Rank 1
Share this question
or