DatePicker Validator Required Not Working

2 Answers 92 Views
Date/Time Pickers
Lee
Top achievements
Rank 2
Bronze
Bronze
Bronze
Lee asked on 31 Jul 2023, 06:36 PM

I have a kendo datepicker that is required, however when it is not filled out and the dateInput format is set to true, the required message does not display.

Here is a dojo

https://dojo.telerik.com/ucOdILoT

2 Answers, 1 is accepted

Sort by
0
Lee
Top achievements
Rank 2
Bronze
Bronze
Bronze
answered on 03 Aug 2023, 09:05 PM

I found a workaround for this that required overwriting the default date validation and knowing the text date format from the start. I have a function that is getting the user's short date format and converting that to letters (i.e. if their date is 12/20/2020, it changes that to mm/dd/yyyy so it matches the date input's mask. Then I create the element with a class of js-date-picker and a property of "required". Next I do the following in the validator: 

localizedShortDate = "mm/dd/yyyy";

                rules: {
                    date: function (input) {
                        // Checks if date is in the right format when dateInput set to true
                        if ($(input).hasClass("js-date-picker")) {
                            var validDate = kendo.parseDate($(input).val());
                            if (input.val() === localizedShortDate) {
                                return true;
                            }
                            if (!validDate) {
                                return false;
                            }
                        }
                        return true;
                    },
                    dateRequired: function (input) {
                        // Checks if date is required and present when dateInput set to true
                        if ($(input).hasClass("js-date-picker") && $(input).prop("required")) {
                            if (input.val() === localizedShortDate) {
                                return false;
                            }
                        }
                        return true;
                    },

In the messages I do this: 

"required" is there for non-date fields since they behave as expected. "dateRequired" is for date fields since they don't behave as expected.
                messages: {
                    date: function () {
                        return "This is not a date";
                    },
                    required: function () {
                        return "Required";
 },
                    dateRequired: function () {
                        return "Required";
 },

Neli
Telerik team
commented on 08 Aug 2023, 12:58 PM

Hi Lee,

Thank you very much for sharing your approach with the community. We really appreciate sharing solutions. I am sure the information you have posted will be of great help to the other users in the forum.

Regards,

Neli

-1
Nikolay
Telerik team
answered on 03 Aug 2023, 02:06 PM

Hi Lee,

The required validation will not work with enabled DateInput for the DatePicker. This is due to the rendered mask in the input, which is what the DataInput is designed for.

I have to say that the only option for applying the required validation would be to add custom validation and compare the current value in the input with the format specified in the DateInput (or the default one)". 

Below I am posting the Custom validation documentation:

Regards,
Nikolay
Progress Telerik

Stay tuned by visiting our public roadmap and feedback portal pages! Or perhaps, if you are new to our Kendo family, check out our getting started resources
Lee
Top achievements
Rank 2
Bronze
Bronze
Bronze
commented on 03 Aug 2023, 08:54 PM

This seems like a bug that should be fixed. 
Tags
Date/Time Pickers
Asked by
Lee
Top achievements
Rank 2
Bronze
Bronze
Bronze
Answers by
Lee
Top achievements
Rank 2
Bronze
Bronze
Bronze
Nikolay
Telerik team
Share this question
or