Hi Toko,
Thanks for contacting Syncfusion support.
We understood your requirement to validate the Datepicker input to ensure if the date is selected in Datepicker input and if the selected Date falls in the range of 18 to 70 years.
This can be achieved by using our built-in form validator library by adding custom range validation as given in the below code.
<DatePickerComponent name="date" ref={calendar => this.datepickerInstance = calendar}
blur={this.onFocusOut.bind(this)} change={this.onChange.bind(this)}></DatePickerComponent>
rendereComplete() {
var customFn = function() {
this.todayDate = new Date().getFullYear();
this.valueYear = this.datepickerInstance.value.getFullYear()
let difference = this.todayDate - this.valueYear;
console.log(difference);
if(this.valueYear <= this.todayDate){
console.log(18 < difference && 70 > difference)
return ( 18 <= difference && 70 >= difference);
}
};
this.formValidator = {
// Defines the validation rules
rules: {
'date': {
required: [true, 'Value is required !']
}
},
// Custom validation takes place when value is changed.
customPlacement: (inputElement, errorElement) => {
inputElement.parentElement.parentElement.appendChild(errorElement);
}
};
this.formObject = new FormValidator('#formTemp', this.formValidator);
this.formObject.addRules('date', {
range: [customFn.bind(this), "Please select a date range of 18 to 70 years from current Date."]
});
this.formObject = new FormValidator('#formTemp', this.formValidator);
};
We have prepared a simple sample based on your requirement. Please check the below link.
Regards,
Deepa L.
