A date from the Date Picker is an invalid date!

Wappler General How To
#1

Hi , I have a text input box with a date picker, I have set the format to DD-MMM-YY.

image

I also have set Date Validation on the same text input box.

On the page the date picker works well, but the date validation does not recognize the picked date as valid.

image

Note: if I set the format to YYYY-MM-DD in the date picker, the validation sees the picked date as valid, but this format is considered not the best for user friendliness. I have tried a few experiments DD/MM/YY also does not work, DD/MM/YYYY and many others do not work.

Any ideas on how to get DD-MMM-YY to be accepted.

Datepicker returning time
#2

The validator expects a date in yyyy-mm-dd or yyyy/mm/dd format.

You can just remove the validation from the front end (from the input) and only add it to the backend (in your server action) as the input always sends the date in yyyy-mm-dd hh:mm:ss to the server action no matter what the date format is set to. The date format option of the date picker component is only for displaying date to the users.

#3

I did remove the date validation, thinking it would be a work around.

If the user ignores the date picker and types in a date that is invalid , I do like wappler’s method of signifying that, ie red border and little message, I think that is good, and i will not get that if I remove the validation.

Anyway this is a small thing and I can leave the validation off as 99% of time the date picker is too obvious and will be used by the user.

#4

So just add the date validation to the server-side only. On form submit if the date enetered is invalid, the server-side validation will be triggered and form won’t be submitted.
Another workaround is to make the input read only, by clicking the read only checkbox in the properties.

#5

Ok, i like the readonly idea, will go with that.

#6

I forgot that read only greys the input box, so looks like the server side validation is the way to go, unless there is a way to keep read-only as white background

#7 
.form-control[readonly] {
    background-color: #fff;
}
#8

Thank you