Flatpickr on django template not working on mobile device

I have interesting problem. Have this template:

{# date picker #}
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/flatpickr/dist/flatpickr.min.css"/>
<script src="https://cdn.jsdelivr.net/npm/flatpickr"></script>
<script src="https://cdn.jsdelivr.net/npm/flatpickr/dist/l10n/bg.js"></script>
<link rel="stylesheet" type="text/css" href="{% static "custom/date_picker.css" %}"/>

<script>
document.addEventListener("DOMContentLoaded", function () {
// Ensure Flatpickr's localization is loaded before modifying
if (flatpickr.l10ns && flatpickr.l10ns.bg) {
    flatpickr.l10ns.bg.rangeSeparator = " до ";
} else {
    console.warn("Bulgarian locale not found, continuing without modifying rangeSeparator.");
}

const dateTimePickers = ["#fromInput", "#toInput"];

dateTimePickers.forEach(selector => {
    flatpickr(selector, {
        enableTime: true,
        time_24hr: true,
        locale: "bg",
        dateFormat: "H:i ч. на d M Y г.",
        enableSeconds: false,  // Ensure seconds are not required
        disableMobile: true  // Forces Flatpickr UI on mobile
    });
});

</script>

Then I have this two inputs:

            <div style="margin-top: 15px" id="fromDiv">
                <label for="fromTime">От</label>
                <input type="text" id="fromInput" name="fromTime"
                       placeholder="Избери дата и час" style="margin: auto">
            </div>

            <div style="margin-top: 15px" id="toDiv">
                <label for="dateTimeInput">До</label>
                <input type="text" id="toInput" name="toTime"
                       placeholder="Избери дата и час" style="margin: auto">
            </div>

Everything works perfectly on desktop browser, but when is used on mobile device, inputs change, want seconds, but in choice pop up it's not possible to be selected seconds.

Examples on desktop browser:

how looks input and choice pop-up on desktop browser

Examples on mobile:

pop-up choice on mobile browser and date-time input on mobile browser.. how they look

My question is how to make mobile browser input and pop-up same as browser one? Try a lot of things, but nothing works...

Now on mobile device do not work, and can not proceed, because on mobile browser wants seconds, but client can not choose one. Also i want pop-up and input to looks the same on web and mobile browser.

Вернуться на верх