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. (Last updated on: June 24, 2019).
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

DateTimePicker validation

Thread ID:

Created:

Updated:

Platform:

Replies:

148497 Oct 22,2019 03:18 PM UTC Oct 25,2019 06:09 AM UTC JavaScript - EJ 2 5
loading
Tags: FormValidator
Ivan
Asked On October 22, 2019 03:18 PM UTC

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 [Syncfusion]
Replied On October 23, 2019 10:46 AM UTC

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 
 


Ivan
Replied On October 23, 2019 11:04 AM UTC

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!

Vinitha Devi Murugan [Syncfusion]
Replied On October 24, 2019 11:59 AM UTC

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 


Ivan
Replied On October 24, 2019 12:02 PM UTC

Thanks for the answer, everything is clear now!


Btw. great support!

Vinitha Devi Murugan [Syncfusion]
Replied On October 25, 2019 06:09 AM UTC

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


CONFIRMATION

This post will be permanently deleted. Are you sure you want to continue?

Sorry, An error occured while processing your request. Please try again later.

Please sign in to access our forum

This page will automatically be redirected to the sign-in page in 10 seconds.

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon

Live Chat Icon For mobile
Live Chat Icon