We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date

DateTimePicker validation

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?



5 Replies

VD Vinitha Devi Murugan Syncfusion Team October 23, 2019 05:46 AM

Hi Ivan, 
 
Syncfusion Greetings. 
 
We have prepared the sample to validate the datetimepicker and same can be available in below link. 
 
 
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 
 



IV Ivan replied to Vinitha Devi Murugan October 23, 2019 06:04 AM

Hi Ivan, 
 
Syncfusion Greetings. 
 
We have prepared the sample to validate the datetimepicker and same can be available in below link. 
 
 
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!


VD Vinitha Devi Murugan Syncfusion Team October 24, 2019 06:59 AM

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. 


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


Regards, 
M.Vinitha devi 



IV Ivan October 24, 2019 07:02 AM

Thanks for the answer, everything is clear now!


Btw. great support!


VD Vinitha Devi Murugan Syncfusion Team October 25, 2019 01:09 AM

Hi Ivan, 
 
You are most welcome 😊. 
 
Regards, 
M.Vinitha devi 


Loader.
Live Chat Icon For mobile
Up arrow icon