Validating number to date

[Bernhard]

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

 

[Georgi Krustev]

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

[Bernhard]

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?

[Bernhard]

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.

[Bernhard]

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