On enter key date validation should happen

[Arun]

I have a date picker in kendo react grid, and when a user enter a invalid date(01/01/0000) 

and press ENTER  key, the data is saving.

we already have the validation in  onblur function, and the error pop up will show while user enters the invalid date.

we need the solution as "The validation should happen similar as onblur function while user enter the invalid date and press enter key."

Could anyone help on this would be great.

 

 

<DatePicker
                    calendar={CustomDateCalendar}
                    id='dtDOB'
                    name='DOB'
                    style={{ height: "36px" }}
                    format='MM/dd/yyyy'
                    formatPlaceholder={{ year: "YYYY", month: "MM", day: "DD" }}
                    value={props.dataItem.dob}
                    focusedDate={new Date()}
                    onChange={this.handleDOBChange.bind(this, props)}
                    onBlur={this.onBlurDOBDateValidation.bind(props.dataItem, props, this)}
                    //validate={this.dobDateValidation(props.dataItem.dob)}
                    valueField='value'
                    textField='text'
                    
                />

[Konstantin Dikov]

Hi Arun,

If you are using the DatePicker in the context of a Form, you can add the validation within the submit of the form and prevent it if the validation fails. You can also add the validation within the onChange event of the DatePicker.

If further assistance is needed, please share a simplified version of the scenario demonstrating the behavior, so we can test it locally.

 

Regards,
Konstantin Dikov
Progress Telerik

[Arun]

HI Dikov,

Can you please advice how the  invalid date (01/01/0000) validation can be done in onchange event.

<DatePicker
                    calendar={CustomDateCalendar}
                    id='dtDOB'
                    name='DOB'
                    style={{ height: "36px" }}
                    format='MM/dd/yyyy'
                    formatPlaceholder={{ year: "YYYY", month: "MM", day: "DD" }}
                    value={props.dataItem.date}
                    focusedDate={new Date()}
                    onChange={this.handleDateChange.bind(this, props)}
                   
                   
                    valueField='value'
                    textField='text'
                />

 

handleDateChange = (event, e) => { 
       
                this.setState(
                    {
                        data: this.state.data.map((item) =>
                            item.inEdit === true && item.rowNo === event.dataItem.rowNo
                                ? {
                                    ...item,
                                   
                                    datefield: e.target.value,
                                    
                                }
                                : { ...item }
                        ),
                    },
                    
                )                    
    }

 

[Konstantin Dikov]

Within the "onChange" event, the "e.target.value" is the current selection of the DatePicker, which means that you can check what is the JavaScript Date object before changing the state. Please note that 01/01/0000 is a valid date, so if you want to put a min and max values for that field, you can do this by setting the "min" and "max" properties of the DatePicker, which will make the validation automatic:

• https://www.telerik.com/kendo-react-ui/components/dateinputs/datepicker/date-ranges/

Hope this helps.

[Arun]

Thanks!!!

The validation is already happening in date field for onchange function , but for clearing the fields we do it in onBlur function.

It there is any possible to do clear the invalid date in onChange .

We have parent and child grid, when the user  click on parent grid, the child grid data will be refreshed.

due to validation happening in onblur function, the refreshment  on the child grid data  is not happening when user click on parent grid.it seems to be the timing issue between onblur and other function event.

 

 

 

[Konstantin Dikov]

Hi Arun, 

It seems that you have more complex scenario, so in order for us to be able to give the best suggestion for it, could you please try create a simplified version in stackblitz example, so that we can test and debug it locally?

Looking forward to your reply with the example.