Grid Custom Validation in DatePicker fields

Question

Hello,

Can you please let me know how I can set up a validation rule that could compare two grid fields while editing?

Both fields have editType='datePickerEdit', and they represent Date From and Date To respectively.

What I want is to have a validation rule in the last one that would display validation error if date on Date From field is greater than the date on Date To field.

I have tried following the instructions in documentation but I was not able to access other fields' value in order to do the comparison.

Thank you in advance.

Best regards!

Ajith Govarthan · Accepted Answer

Hi Spyros, 
  
Thanks for contacting Syncfusion support. 
  
Query: What I want is to have a validation rule in the last one that would display validation error if date on Date From field is greater than the date on Date To field. I have tried following the instructions in documentation but I was not able to access other fields' value in order to do the comparison. 
  
Based on your query you want to access the other columns data to compare the values in the custom validation function. So, we have prepared sample and in that we have used the custom validation for OrderDate and ShippedDate column and in the custom validation function we have taken the other column data using the form element with the help of input element id and performed the validation.  
  
For your convenience we have attached the sample please refer them for your reference. 
  
Code Example: 




Index.js 
  
customFn(args) { 
    let startDate = new Date( 
      this.gridInstance.editModule.formObj.element.querySelector( 
        '#GridOrderDate' 
      ).value 
    ); 
    let endDate = new Date( 
      this.gridInstance.editModule.formObj.element.querySelector( 
        '#GridShippedDate' 
      ).value 
    ); 
  
    if ( 
      startDate.getFullYear() < endDate.getFullYear() || 
      (startDate.getFullYear() === endDate.getFullYear() && 
        startDate.getMonth() < endDate.getMonth()) || 
      (startDate.getFullYear() === endDate.getFullYear() && 
        startDate.getMonth() === endDate.getMonth() && 
        startDate.getDate() < endDate.getDate()) 
    ) { 
      return true; 
    } else { 
      return false; 
    } 
  } 
  
Sample Link: https://stackblitz.com/edit/react-jtfagf 
  
Please get back to us if you need further assistance. 
  
Regards, 
Ajith G.