Been trying to find the cause of this issue but I have an input field for the Flatpickr date time but it doesn't open the native Iphone date picker.

This only happens when the field is required, on Iphone 11 and below versions no matter if it's Safari or Chrome.

Another strange thing is that we have other environments too and the date picker opens up in those but the HTML for the input is the same.

Here's the input html:

<div class="form__field-group u-full-width  dw-mod">
    <div class="u-full-width"> 
        <label for="DateOfBirth" class="u-pull--left">Date Of Birth <span class="required dw-mod">*</span></label>
    </div>
    <input id="DateOfBirth" required="true" name="DateOfBirth" type="hidden" value="2004-01-01" class="u-full-width dw-mod flatpickr-input">
    <input class="u-full-width dw-mod flatpickr-input flatpickr-mobile" step="any" tabindex="1" type="date" required="" placeholder="" value="2004-01-01" max="2004-10-03">
</div>

And the Flatpickr script:

document.addEventListener("DOMContentLoaded", function () {
  flatpickr("#DateOfBirth", {
    mode: 'single',
    maxDate: '1/10/2004 10:03:44 AM'
  });
});

Video of the issues: screencast.com/t/JOnB4CpZvg

Did anyone had the same issue before? How to solve this bug?

Thanks