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

Error Message for all the dates Kendo Date Time Picker

4 Answers 149 Views
Date/Time Pickers
This is a migrated thread and some comments may be shown as answers.
Mayurbhai
Top achievements
Rank 1
Veteran
Mayurbhai asked on 30 Mar 2021, 04:11 AM

Hi Team,

I am using the Kendo DateTimePicker and validator to validate the dates. Please find the below code. The issue I am having is that I see the "error message" for all the fields even thought rules returns true for those field. For example, I see the error message for the fields that have return value "false" which is fine. However, after running the validator, once I click on each field, I see the error message for that field. Even though these field have return value "true" from the function I have attached. I do not understand why I see the error message for all the fields. 

1) What I want is I have two conditions in the function (if, else if). If these conditions get true, I want to display the error message. Otherwise, no error message needs to display because those dates are valid.

2) Is there a way to clear/reset the error message if there is any for a specific date field.

I really appreciate your help team. Please get back to me as soon as you can, I am waiting for your relpy.

function executeMaxMinValidationOnEachDate(datesArray) {

    //$("#validateEditableFields").kendoValidator({
    var minDate = 0;
    var maxDate = 2;
    var validator = $("#validateEditableFields").kendoValidator({
        rules: {
            datepicker: function (input) {
                var currDate = kendo.parseDate(input.val()).getTime();
                if (maxDate === 10) {
                    if (input.is("[data-role=datetimepicker]") && currDate < datesArray[minDate]) {
                        return false;
                    }
                }
                else if (input.is("[data-role=datetimepicker]") &&
                    (currDate < datesArray[minDate] || currDate > datesArray[maxDate])) {
                    minDate++;
                    currentDate++;
                    maxDate++;
                    return false;
                    //return input.data("kendoDateTimePicker").value();
                } else {
                    minDate++;
                    currentDate++;
                    maxDate++;
                    return true;
                }
            }
        },
        messages: {
            datepicker: "Please enter valid date!$$$$"
        }
    }).data("kendoValidator");
    validator.validate();
}


4 Answers, 1 is accepted

Sort by
0
Ivan Danchev
Telerik team
answered on 01 Apr 2021, 05:22 PM

Hi Mayurbhai,

The messages showing under the wrong field can be avoided by making sure all fields have their "name" attribute set. So for example if you are initializing a DateTimePicker from this input element:

 <input name="date1" id="date1" />

Note that both the "id" and the "name" attributes are set.

Here's a dojo example in which 3 DateTimePickers are used: https://dojo.telerik.com/ihofAsOg

A valid date is between June 6 2021 and August 6 2021. If you set a valid date in the first picker and then set an invalid date in one of the others, the error message will be correctly shown below the picker that has an invalid date set.

Give this a try and let us know the results.

Regards,
Ivan Danchev
Progress Telerik

Virtual Classroom, the free self-paced technical training that gets you up to speed with Telerik and Kendo UI products quickly just got a fresh new look + new and improved content including a brand new Blazor course! Check it out at https://learn.telerik.com/.

0
Mayurbhai
Top achievements
Rank 1
Veteran
answered on 01 Apr 2021, 05:26 PM
Thank you for getting back to me! Can you please post your code here on this forum since I could not access the link you sent me. I will definitely try out your approach. Thanks for your help! 
0
Ivan Danchev
Telerik team
answered on 01 Apr 2021, 05:48 PM

Mayurbhai,

Sure, here it is:

<!DOCTYPE html>
<html>
<head>
    <base href="https://demos.telerik.com/kendo-ui/validator/index">
    <style>html { font-size: 14px; font-family: Arial, Helvetica, sans-serif; }</style>
    <title></title>
    <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2021.1.330/styles/kendo.default-v2.min.css" />

    <script src="https://kendo.cdn.telerik.com/2021.1.330/js/jquery.min.js"></script>
    
    
    <script src="https://kendo.cdn.telerik.com/2021.1.330/js/kendo.all.min.js"></script>
    
    

</head>
<body>
    <div id="example">
    <div class="demo-section k-content">
        <div id="validation-summary">
        </div>
        <form id="validateEditableFields" class="k-form k-form-vertical">
            <ul class="k-form-group">
                <li class="k-form-field">
                    <label for="date1" class="k-form-label">DateTimePicker1</label>
                    <span class="k-form-field-wrap">
                        <input name="date1" id="date1" />
                    </span>
                   <span class="k-invalid-msg" data-for="date1"></span>
                </li>
                 <li class="k-form-field">
                    <label for="date2" class="k-form-label">DateTimePicker2</label>
                    <span class="k-form-field-wrap">
                        <input name="date2" id="date2" />
                    </span>
                   <span class="k-invalid-msg" data-for="date2"></span>
                </li>
               <li class="k-form-field">
                    <label for="date3" class="k-form-label">DateTimePicker3</label>
                    <span class="k-form-field-wrap">
                        <input name="date3" id="date3" />
                    </span>
                 <span class="k-invalid-msg" data-for="date3" ></span>
                </li>
               <li class="k-form-buttons">
                    <button class="k-button k-primary" type="submit">Submit</button>
                </li>
            </ul>
        </form>
    </div>
</div>


<style>
</style>

<script>
    $(document).ready(function() {
      var validationSummary = $("#validation-summary");

      $("#date1").kendoDateTimePicker({
        value: new Date("2021/10/6"),
        dateInput: true
      });
      
      $("#date2").kendoDateTimePicker({
        value: new Date("2021/6/6"),
        dateInput: true
      });
      
      $("#date3").kendoDateTimePicker({
        value: new Date("2021/6/6"),
        dateInput: true
      });

      var datesArray = [
        1622926800000,
        1622926800000,
        1628197200000
      ];
      
      var currentDate = 0;
      
      $("form").submit(function(event) {
        event.preventDefault();

        executeMaxMinValidationOnEachDate(datesArray)
      });
      
   
      	function executeMaxMinValidationOnEachDate(datesArray) {
            //$("#validateEditableFields").kendoValidator({
            var minDate = 0;
            var maxDate = 2;
            var validator = $("#validateEditableFields").kendoValidator({
                rules: {
                    datepicker: function (input) {
                        var currDate = kendo.parseDate(input.val()).getTime();
                        if (maxDate === 10) {
                            if (input.is("[data-role=datetimepicker]") && currDate < datesArray[minDate]) {
                                return false;
                            }
                        }
                        else if (input.is("[data-role=datetimepicker]") &&
                            (currDate < datesArray[minDate] || currDate > datesArray[maxDate])) {
                           //minDate++;
                           //currentDate++;
                           //maxDate++;
                            return false;
                            //return input.data("kendoDateTimePicker").value();
                        } else {
                            //minDate++;
                            //currentDate++;
                            //maxDate++;
                            return true;
                        }
                    }
                },
                messages: {
                    datepicker: "Please enter valid date!$$$$"
                }
            }).data("kendoValidator");
          
          if (validator.validate()) {
                validationSummary.html("<div class='k-messagebox k-messagebox-success'>Success! All dates are between 2021/6/6 and 2021/8/6!</div>");
            } else {
                validationSummary.html("<div class='k-messagebox k-messagebox-error'>At least one date is not in the 2021/6/6-2020/8/6 interval.</div>");
            }
        }
    });
</script>


    

</body>
</html>

Regards,
Ivan Danchev
Progress Telerik

Virtual Classroom, the free self-paced technical training that gets you up to speed with Telerik and Kendo UI products quickly just got a fresh new look + new and improved content including a brand new Blazor course! Check it out at https://learn.telerik.com/.

0
Mayurbhai
Top achievements
Rank 1
Veteran
answered on 01 Apr 2021, 05:53 PM
Thank you for your help friend!
Tags
Date/Time Pickers
Asked by
Mayurbhai
Top achievements
Rank 1
Veteran
Answers by
Ivan Danchev
Telerik team
Mayurbhai
Top achievements
Rank 1
Veteran
Share this question
or