Mobile support incompatible with jQuery Validation

[NOTE: This is probably more for the docs or as a gotcha for anyone else who might experience this issue with the popular validation plugin.]

When Flatpickr detects a mobile it’s default action is to fallback to use the native datetime picker along with changing type attribute for the original input element from text to hidden and then inserting a new input element with the type attribute set to date (or time, depending on your usage I guess).

<input type="hidden" name="dob" class="date flatpickr-input" readonly="readonly" aria-required="true">
<input class="date required flatpickr-input flatpickr-mobile" step="any" tabindex="1" type="date" max="2017-07-18" aria-required="true">

The inclusion of the step attribute on the newly inserted input date type is where jQuery Validation chokes with:

Uncaught Error: Step attribute on input type date is not supported.

If you refer to the jQuery Validation (v1.16.0) L1432 of the library you’ll see it only has support for the step attribute where the input has a type attribute equal to either text, number or range. L1455 indicates support for types date, datetime, datetime-local, month, time and week is still on the way.

Workaround

At the moment, I’m using a workaround which is to use the onClose callback to remove the step attribute altogether:

{
  onClose: function (selectedDates, dateStr, instance) {
    if (instance.isMobile) {
      $('form input[type="date"][step="any"]').removeAttr('step');
    }
  }
}

The alternative, is forcing the unrecommended option of forcing the use of the non-native picker even on mobile:

{
  disableMobile: true
}

I’m posting this to get some feedback as to whether there is a better way to achieve harmony between these two libraries so they’ll play nice together.

Other routes might be to add an option to omit the step attribute for mobiles unless one exists on the input already in Flatpickr or at least until jQuery Validation gets round to adding support for the step attribute in relation to datetime input types.

Reproduction Link

https://jsfiddle.net/jfkpqsk3/

Your Environment

• flatpickr version used: 3.0.6
• Browser name and version: Browser (Default, Chrome WebView 59), Chrome (59.0.3071.125)
• OS and version: Android 6.0.0; Elephone S7

[jongbelegen]

Nice solution would be:

onReady: function(selectedDates, dateStr, instance){
  if (instance.isMobile) {
    $(instance.mobileInput).attr('step', null);
  }
},

[chmln]

Hello @Dreyer

Thanks for the note. This seems more like an issue with jquery validation than flatpickr itself.

The only thing I’d perhaps recommend is using onReady instead of onClose as you only need to remove the attribute once.