Flatpicker в шаблоне django не работает на мобильном устройстве

У меня интересная проблема. У меня есть этот шаблон:

{# 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>

Тогда у меня есть эти два входных сигнала:

            <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>

В настольном браузере все работает отлично, но при использовании на мобильном устройстве вводимые данные меняются, требуются секунды, но во всплывающем окне выбора невозможно выбрать секунды.

Примеры в настольном браузере:

pop-up and input on desktop device

как выглядит всплывающее окно ввода и выбора в браузере на рабочем столе

Примеры на мобильных устройствах:

pop-up choice on mobile browser

выбор всплывающего окна в мобильном браузере и ввод даты и времени в мобильном браузере.. как они выглядят

date-time input with seconds on mobile browser

Мой вопрос в том, как сделать так, чтобы ввод данных в мобильном браузере и всплывающие окна были такими же, как в браузере one? Перепробовал много чего, но ничего не работает...

Теперь на мобильном устройстве не работает, и я не могу продолжить, потому что в мобильном браузере требуются секунды, но клиент не может их выбрать. Также я хочу, чтобы всплывающее окно и ввод данных выглядели одинаково в веб-браузере и мобильном браузере.

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