Use FormValidator on DateRangePicker

[Dan Johnson]

Any guidance on how to use the DateRangePicker with the FormValidator?  Binding to value on the component does not seem to apply changes to the underlying value which leaves startDate and endDate to bind too, but I can't find a way to line up the name of the validation rule with the component given that it is 2 properties.

[Christopher Issac Sunder K]

Hi Dan, 

Thank you for contacting Syncfusion support. 

To use the form validator with DateRangePicker component, We have prepared the sample based on your requirement. Please refer the below code example to use the DateRangePicker with form validator.  

[index.vue] 

<template> 

    <div class="wrap"> 

        <form id="form-element" class="form-horizontal"> 

            <div class="form-group"> 

                <div class="col-sm-3 control-label">Select Range</div> 

                <div class="col-sm-6"> 

                    <ejs-daterangepicker id="daterangepicker" width="450px" name="date" class="form-control" placeholder="Select a range"></ejs-daterangepicker> 

                    <div class="error-element"></div> 

                </div> 

            </div> 

        </form> 

    </div> 

</template> 

<script> 

import Vue from 'vue'; 

import { DateRangePickerPlugin } from '@syncfusion/ej2-vue-calendars'; 

import { FormValidator } from "@syncfusion/ej2-vue-inputs"; 

import { queryParams } from "@syncfusion/ej2-base"; 

import { throws } from "assert"; 

 

Vue.use(DateRangePickerPlugin); 

export default { 

  mounted() { 

      var options = { 

      rules: { 

        date: { required: true } 

      }, 

      customPlacement: function(element, errorElement) { 

        document.querySelector(".error-element").appendChild(errorElement); 

      }, 

    }; 

     // defines FormValidator to validate the dateRangePickerPicker 

        var formObject = new FormValidator("#form-element", options); 

  } 

} 

</script> 

 

Please check the sample from the below link. 

Sample Link:  http://www.syncfusion.com/downloads/support/directtrac/general/ze/quickstart-785168886  

 

To know more about form validator in the Vue platform, please refer the below UG documentation link. 

UG link: https://ej2.syncfusion.com/vue/documentation/form-validator/validation-rules/  

 

Note: Please download and extract the sample from the above link. And run the command “npm install” to install the required packages and “npm run dev” command to launch the sample in the browser.  

Please let us know if you require any further assistance. 

Thanks, 

Christo