DateTimePicker validation

[Ivan]

Hello, 


I have DateTimePicker component in Schedule dialog where I need some validation. 

After popupOpen event i have setup DateTimePicker component and add validation. 

init of DateTimePicker:

let endElement = args.element.querySelector('#EndTime');
if (!endElement.classList.contains('e-datetimepicker')) {
   _endTimeDatePicker = new ej.calendars.DateTimePicker({
         value: new Date(endElement.value) || new Date(),
         format: 'yyyy-MM-dd HH:mm',
         // readonly: true
   }, endElement);
}

adding validation:

var formElement = args.element.querySelector('.e-schedule-form');
_validator = ((formElement).ej2_instances[0]);

_validator.addRules('Note', { required: true });
_validator.addRules('StartTime', { minDate: [customFn, 'Enter valid date'] });
_validator.customPlacement = function (inputElement, errorElement) {
   console.log('input', inputElement);
   inputElement.parentNode.parentNode.appendChild(errorElement);
};

After changing anything in StartTime, customFn is not triggered.

Do yo have any advice?

[Vinitha Devi Murugan]

Hi Ivan, 

 

Syncfusion Greetings. 

 

We have prepared the sample to validate the datetimepicker and same can be available in below link. 

 

https://stackblitz.com/edit/4a3eli-zx1fiu?file=index.js  

 

eventSettings: { 

    dataSource: data, 

    fields: { 

      endTime: { name: 'EndTime', validation: { required: true, range: [customFn, "Please select a date between years from 2019 to 2020"] } }, 

      startTime: { name: 'StartTime', validation: { required: true, range: [customFn, "Please select a date between years from 2019 to 2020"] } }, 

    } 

  }, 

 

Kindly try the sample and Please let us know if you need any further assistance on this.   

 

Regards, 

M.Vinitha devi 

 

[Ivan]

Hi Ivan, 

 

Syncfusion Greetings. 

 

We have prepared the sample to validate the datetimepicker and same can be available in below link. 

 

https://stackblitz.com/edit/4a3eli-zx1fiu?file=index.js  

 

eventSettings: { 

    dataSource: data, 

    fields: { 

      endTime: { name: 'EndTime', validation: { required: true, range: [customFn, "Please select a date between years from 2019 to 2020"] } }, 

      startTime: { name: 'StartTime', validation: { required: true, range: [customFn, "Please select a date between years from 2019 to 2020"] } }, 

    } 

  }, 

 

Kindly try the sample and Please let us know if you need any further assistance on this.   

 

Regards, 

M.Vinitha devi 

 

Hello,

dates are now ok!

is there any way to add custom fields validation in eventSettings:fields config or they need to be added separately as new rules (field Note in example).

Tnx!

[Vinitha Devi Murugan]

Hi Ivan, 

Thanks for the update. 

We can’t add the custom field validation within eventSettings.fields we need to handle it separately. We have prepared the below sample for your reference. 

https://stackblitz.com/edit/4a3eli-fawqut?file=index.js 

In the above sample we have used DropdownList as custom field and added the validation for this element using formValidator. 

Kindly try with the above sample and let us know, if you need any further assistance on this. 

Regards, 

M.Vinitha devi 

[Ivan]

Thanks for the answer, everything is clear now!

Btw. great support!

[Vinitha Devi Murugan]

Hi Ivan, 

 

You are most welcome 😊. 

 

Regards, 

M.Vinitha devi