Validating number to date

5 posts, 0 answers
  1. Bernhard
    Bernhard avatar
    4 posts
    Member since:
    Jul 2015

    Posted 02 Dec 2016 Link to this post

    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

     

  2. Georgi Krustev
    Admin
    Georgi Krustev avatar
    3723 posts

    Posted 06 Dec 2016 Link to this post

    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.
  3. Bernhard
    Bernhard avatar
    4 posts
    Member since:
    Jul 2015

    Posted 07 Dec 2016 Link to this post

    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?

  4. Bernhard
    Bernhard avatar
    4 posts
    Member since:
    Jul 2015

    Posted 07 Dec 2016 in reply to Bernhard Link to this post

    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.
  5. Bernhard
    Bernhard avatar
    4 posts
    Member since:
    Jul 2015

    Posted 08 Dec 2016 Link to this post

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

Back to Top