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
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback


Thread ID:





143693 Apr 1,2019 12:06 PM UTC Apr 5,2019 10:24 AM UTC Vue 3
Tags: DatePicker
Isabelle Fuchs
Asked On April 1, 2019 12:06 PM UTC

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

Ashokkumar Balasubramanian [Syncfusion]
Replied On 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. 

Isabelle Fuchs
Replied On 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 :-)

Ashokkumar Balasubramanian [Syncfusion]
Replied On 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. 


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