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

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)

      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.

        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]

          You're always welcome!