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


how can i set a date-picker on required. text-field is easy but i cant find an easy way for date picker....

3 Replies

AB Ashokkumar Balasubramanian Syncfusion Team April 4, 2019 01:12 PM UTC

Hi Isabelle, 
We have checked your query at our end. We suspect that, you have tried to integrate the DatePicker validation functionality in your application. For this scenario, you can our FormValidator plugin to validate our input components (DatePicker). 
var options = { 
   rules: { 
      date: { required: true } 
   customPlacement: function(element, errorElement) { 
// defines FormValidator to validate the DatePicker 
var formObject = new FormValidator("#form-element", options); 
We have prepared the simple sample for your requirement, please find it in below location. 
Please let us know, if the provided information’s are helpful to achieve your requirement or not. 
Ashokkumar B. 

IF Isabelle Fuchs April 4, 2019 02:19 PM UTC

thanks for your help - i will try to make it like this with the rules...
but is it possible to design the date like this: date* when it is required? for Text Input it is possible - but for date i have the problem that i get double lines!

and i also would like to show the min - max Value under the line:

          range: 1-8

or the Error Message not as a tooltip - also under the line:

error Message - out of range

thanks for your help...sorry for the questions but I'm beginner...

in javafx it is like this - and i must tell i like this :-)

AB Ashokkumar Balasubramanian Syncfusion Team April 5, 2019 10:24 AM UTC

Hi Isabelle, 
Query: i have the problem that i get double lines!. 
We suspect the cause of the problem is the input element parent element class set to “e-float-input” and the css class based active border added. So double border added your application. The input component only is css component, so the class based floating label and border added. Please remove the e-float-input class element into DatePicker component. 
We have checked your requirements for validation for min and max value input components. We have provided form validation custom element to display the error message and check the min and max date range, show the custom error message. Please find the sample for your reference. 
Please let us know, if the provided information’s are helpful to resolve your problems or not. 
Ashokkumar B. 

Live Chat Icon For mobile
Up arrow icon