Date validation doesn't work as expected

Wappler General How To
#1

Hello,

Current time is Sep 10th, 2020 11:25 AM in my region.
but the validation error shows up like this.

スクリーンショット 2020-09-10 11.11.44

By the way, I set date input as below (I’m not using datepicker here because there are other issues)

<input name="entrystartdate" type="date" id="entrystartdate" required="required" dmx-bind:min="var1.datetime">

スクリーンショット 2020-09-10 11.20.54
スクリーンショット 2020-09-10 11.20.54470×683 39.6 KB

The validation error should not show up, because currenttime < Sep 11th definitly.
How can I solve this?

#2

This is a really old bug.
Try this: Invalid Error in DMX Date Validator for HTML5 Date Input

#3

Thank you, I added it but still not working.

スクリーンショット 2020-09-10 19.55.33

#4

Sorry… missed the part about it being a date-time comparision.
Here is an updated version of the DMX Formatter to handle both date & datetime-local types:

 dmx.rules.max.validity = function (element, param) {
    if (element.type == 'date' || element.type == 'datetime-local') {
        return element.value <= param;
    }
    return +element.value <= param;
};
dmx.rules.min.validity = function (element, param) {
    if (element.type == 'date' || element.type == 'datetime-local') {
        return element.value >= param;
    }
    return +element.value >= param;
};
#5

Thanks a lot,

I added this one after dmxdatevalidator.js part.

but it is not working yet…

スクリーンショット 2020-09-10 20.04.15

#6

Are the time & date two separate fields?

If not, have you tested by setting the time value too?

#7

I have another problem with single field of date and time now

so I would like to use them as they are…

#8

The post is about validation not showing up correctly from the server side to client side. I don’t have any such configuration right now to test this.

But, I did try to test your issue of “two” pickers. I could not replicate it. Simple date picker is working fine.

image

#9

Please have a look at this. two calendars for one input show up…

doublecalendar

#10

I see that you have set the “type” property to “date” or “datetime-local”. Which is why you are seeing the browser date picker, as well as Wappler’s. Just remove the type property from the input and try.

You can use only 1 of the two.
As for validation, you have to set the min/max date values using the “dynamic events > date picker” options.

#11

I could make only one calendar show up. But I can’t pick a date on the calendar, the input data disappears even if I pick some…

I could set min date on dynamic attribute > date picker. Thanks

#12

Are you doing something else on the date picker input field? Some click event or some other JS stuff?
Can you share the code or a link to the page would be better.

I am not seeing any issue with selecting a date using Wappler’s date picker.

#13

It seems quite simple though…

please have a loot at this

<input is="dmx-date-picker" dmx-bind:mindate="var1.datetime">
#14

<input id="date1" name="date1" is="dmx-date-picker">

This is what I get when I add a new date picker. Please try adding an ID & NAME to your code.

1 Like
#15 
<input is="dmx-date-picker" dmx-bind:mindate="var1.datetime" id="entrystart" name="entrystart">

now it worked!!! thanks a lot for taking your time!!!

1 Like