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

DatePicker Custom Validation Styling

4 Answers 558 Views
DatePicker
This is a migrated thread and some comments may be shown as answers.
Alex
Top achievements
Rank 1
Veteran
Iron
Iron
Alex asked on 30 Sep 2020, 04:29 PM

I have a native DatePicker that I am using in an application with many components that use the Kendo wrapper validation widget. I am trying to get the behavior and appearance of the DatePicker to match that of the existing components. Validation should occur when a field loses focus and an invalid field should have a red outline and red error message below it. I tried to use the native DatePicker validation functionality, but I was unable to make validation consistent with all of the other components.

I am able to use the Kendo wrapper validation widget to perform validation when a field loses focus and display an error message, but I have been unable to get a red outline on an DatePicker in the invalid state. How can I accomplish this? 

See https://stackblitz.com/edit/esiptm for an example.

4 Answers, 1 is accepted

Sort by
0
Aleksandar
Telerik team
answered on 05 Oct 2020, 01:04 PM

Hi Alex,

When the DatePicker input is validated the k-invalid class will be added in case the validation fails. You can add the following styling rule to add a red border around the input element in case validation fails:

.k-input.k-invalid {
        border: 1px solid red;
      }

Let me know if this suggestion works for you.

Regards,
Aleksandar
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
Alex
Top achievements
Rank 1
Veteran
Iron
Iron
answered on 06 Oct 2020, 05:48 PM

Aleksandar,

Thanks for your reply. The wrapper datepicker and other components do not do any validation until losing focus, so I used some CSS to disable the built-in date format validation and rely on the custom validation methods for all validation. This makes the validation behavior match, but I was not able to highlight the entire datepicker red on error (instead of just the input) to match the other components.

You can compare this StackBlitz to the validator example from the Kendo wrapper documentation to see the difference in appearance that still exists.

I am planning on resolving the inconsistency issue by using CSS to make the Kendo wrapper datepicker only outline the input element in red instead of the whole element although I would prefer to have both datepickers outlined in red when in an error state. If anybody knows a good way to do this, please let me know.

::v-deep span.k-widget.k-datepicker.k-state-invalid .k-picker-wrap {
  border-color: $button-border;
  &.k-state-focused {
    border-color: $input-focused-border;
  }
  &:hover {
    border-color: $hovered-border;
  }
}
 
::v-deep .k-input.k-invalid {
  border: $input-border-width solid $error;
}

 

 

0
Accepted
Aleksandar
Telerik team
answered on 09 Oct 2020, 12:37 PM

Hi Alex,

If you disable the default validation styles as demonstrated here:

https://www.telerik.com/kendo-vue-ui/components/dateinputs/datepicker/forms/#disabling-the-validation-styling

you can add a custom class and add the corresponding styling:

<datepicker id="RetireDate" 
                              :validity-styles="false" 
                              :class="validClass"
                              style="width: 250px"
                              name="RetireDate"
                              required="required">
            </datepicker>
computed: {
      validClass(){
        return this.valid ? 'invalid': 'valid'
      }
    },

Here is an example of the above suggestion.

Regards,
Aleksandar
Progress Telerik

Five days of Blazor, Angular, React, and Xamarin experts live-coding on twitch.tv/CodeItLive, special prizes, and more, for FREE?! Register now for DevReach 2.0(20).

0
Alex
Top achievements
Rank 1
Veteran
Iron
Iron
answered on 09 Oct 2020, 07:45 PM
That worked, thank you Aleksandar. I used the validate() and validateInput() validator callbacks to set the state of this.valid.
Tags
DatePicker
Asked by
Alex
Top achievements
Rank 1
Veteran
Iron
Iron
Answers by
Aleksandar
Telerik team
Alex
Top achievements
Rank 1
Veteran
Iron
Iron
Share this question
or