Question T14108
Visible to All Users

Error message in validation - Datepicker

created 2 years ago

Hi,
I built a datepicker, and I setted min value (02/08/2023). When I want to pick a date in calendar, values below 02/08/2023 is blocked, this is OK. But If I write , is allowed to put 01/08/2023, and when I want to save the form, appear the error message, this is PERFECT, but the problem is the message, should be: "The estimate must not be less than Tue Aug 02 2023 no 01 2023 because the user shoul not be able to pick 01/08/2023.is there a way to correct this, and also customize the error message, because for example I prefer to put a different date format like 02/08/2023 than Tue Aug 02 2023.

Than you!!

Clipboard-File-1.png

Sign in to comment on this post

Answers approved by surveyjs Support

created 2 years ago

Hello Claurey,
I tested a single-line input with the date input type and confirmed that it correctly shows the error message indicating that the specified date should not exceed Aug 02 2023:

JSON
{
 "logoPosition": "right",
 "pages": [
  {
   "name": "page1",
   "elements": [
    {
     "type": "text",
     "name": "question2",
     "inputType": "date",
     "min": "2023-08-02"
    }
   ]
  }
 ]
}

Clipboard-File-1.png
View Demo

If you wish to customize the error message and change the date format, handle the survey.onErrorCustomText and modify the options.text property. For instance:

JavaScript
const json = {
 "logoPosition": "right",
 "pages": [
  {
   "name": "page1",
   "elements": [
    {
     "type": "text",
     "name": "question2",
     "inputType": "date",
     "min": "2023-08-02"
    }
   ]
  }
 ]
}

survey.onErrorCustomText.add((sender, options) => {
        if(options.obj.name === 'question2'){
            const dateObject = new Date(options.obj.min);
       const monthNames = [
         "January", "February", "March", "April", "May", "June", 
         "July", "August", "September", "October", "November", "December"
      ];

      // Extract the day, month, and year from the date object
      const day = dateObject.getDate();
      const month = dateObject.getMonth();
      const year = dateObject.getFullYear();

      // Create the formatted date string
      const formattedDate = `${monthNames[month]} ${day}, ${year}`;
      options.text = `The estimate must not be less than ${formattedDate}`
   }
});

View Demo

Clipboard-File-1.png

Thank you

P.S. Please let me reiterate that technical support are available under a commercial developer license. To receive further tech support, please consider purchasing a developer license.

    Show previous comments (3)
    Jane 2 years ago

      Hello Claurey,
      You're always welcome. In a Survey Creator, you can use the creator.onSurveyInstanceCreated event and access the previewed survey via the options.survey property. Please consider this demo:

      JavaScript
      creator.onSurveyInstanceCreated.add((sender, options) => {
    if (options.reason === "test") {
      survey.onErrorCustomText.add((sender, options) => {
        if (options.obj.name === "question2") {
          const dateObject = new Date(options.obj.min);
          const monthNames = [
            "January",
            "February",
            "March",
            "April",
            "May",
            "June",
            "July",
            "August",
            "September",
            "October",
            "November",
            "December"
          ];

          // Extract the day, month, and year from the date object
          const day = dateObject.getDate();
          const month = dateObject.getMonth();
          const year = dateObject.getFullYear();

          // Create the formatted date string
          const formattedDate = `${monthNames[month]} ${day}, ${year}`;
          options.text = `The estimate must not be less than ${formattedDate}`;
        }
      });
    }
});

      I hope this code helps. Should you have any questions or require further assistance, we are always here to help.

      C C
      claurey 2 years ago

        Hello Jane,

        Thank you for your help :)

        De: support=surveyjs.io@mg.surveyjs.io <support=surveyjs.io@mg.surveyjs.io> en nombre de Jane [surveyjs Support] <support@surveyjs.io>
        Enviado: viernes, agosto 11, 2023 3:32:36 a. m.
        Para: reynah.claudiae@live.com <reynah.claudiae@live.com>
        Asunto: RE: Error message in validation - Datepicker [T14108]

        Jane 2 years ago

          You're always welcome!

          Sign in to comment on this post