Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Mobile Date Validation Not Working #1312

Open
2 tasks
fazissa opened this issue Aug 3, 2019 · 1 comment
Open
2 tasks

Mobile Date Validation Not Working #1312

fazissa opened this issue Aug 3, 2019 · 1 comment

Comments

@fazissa
Copy link

fazissa commented Aug 3, 2019

What kind of issue is this? (put 'x' between the square brackets)


Hello,

I am using Flatpickr as my date UI. Everything is working fine on a desktop application, however, when I test my site on a mobile browser I get a bug.

Steps

  1. Pick a date
  2. Hit the submit form; this validates all inputs
  3. The date input html is as follows:

<input class="input datepicker-dob" placeholder="Select Date" type="text" name="dateOfBirth" data-parsley-date data-parsley-validate-if-empty data-parsley-required="true">

"datepicker-dob" is simply the class to which Flatpickr attaches. I get the below error even if I remove the data-parsley-* attributes.

IMG_3100

Flatpickr is set up as below:

     const currDate = new Date();
    const newdate = new Date(currDate);
    newdate.setYear(currDate.getFullYear() - 17);

    flatpickr(".datepicker-dob", {
        dateFormat: "d-M-Y",
        maxDate: newdate
    });

This error goes away when I request the mobile site, so I am not sure what is going on here.

I have recreated this issue on safari, and chrome, both on an iphone device.

Any ideas on what could cause this issue?

Thanks

@fazissa fazissa closed this as completed Aug 3, 2019
@fazissa fazissa reopened this Aug 3, 2019
@fazissa fazissa changed the title Mobile Date Validation Not Workign Mobile Date Validation Not Working Aug 3, 2019
@fazissa
Copy link
Author

fazissa commented Aug 3, 2019

I think I understand what is going on;

a max="2002-08-03" gets added which conflicts with the date format I specify for Flatpickr. Seems like I will have to use something like moment.js to validate dates.

Edit:

Looking further into the issue, it seems Parsley is not comparing the dates properly. If I simply add max="2002-08-03" then the validation passes even if I enter a date beyond the maximum.

@fazissa fazissa closed this as completed Aug 4, 2019
@fazissa fazissa reopened this Aug 4, 2019
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

1 participant