Некорректно отображается поля

Некорректно отображается поля

22.01.2020 01:38:45 Просмотров 23 Источник

Использую в своей форме поле type На windows в обычных браузерах это поле имеет формат, по которому надо вводить дату. Там вводимые данные подстраиваются в нужный формат автоматически. Странно, что параметр HTML не поддерживается Safari

Пожалуйста, предлагайте конкретные фрагменты кода или ссылки на ресурсы. Спасибо

У вопроса есть решение - Посмотреть?

https://ru.stackoverflow.com/questions/1072771/%d0%9d%d0%b5%d0%ba%d0%be%d1%80%d1%80%d0%b5%d0%ba%d1%82%d0%bd%d0%be-%d0%be%d1%82%d0%be%d0%b1%d1%80%d0%b0%d0%b6%d0%b0%d0%b5%d1%82%d1%81%d1%8f-%d0%bf%d0%be%d0%bb%d1%8f#comment1848544_1072771
Зачем вандалить?
https://ru.stackoverflow.com/questions/1072771/%d0%9d%d0%b5%d0%ba%d0%be%d1%80%d1%80%d0%b5%d0%ba%d1%82%d0%bd%d0%be-%d0%be%d1%82%d0%be%d0%b1%d1%80%d0%b0%d0%b6%d0%b0%d0%b5%d1%82%d1%81%d1%8f-%d0%bf%d0%be%d0%bb%d1%8f#comment1848549_1072771
Не следует вандализировать собственные вопросы. Особенно, если уже дан ответ.
https://ru.stackoverflow.com/questions/1072771/%d0%9d%d0%b5%d0%ba%d0%be%d1%80%d1%80%d0%b5%d0%ba%d1%82%d0%bd%d0%be-%d0%be%d1%82%d0%be%d0%b1%d1%80%d0%b0%d0%b6%d0%b0%d0%b5%d1%82%d1%81%d1%8f-%d0%bf%d0%be%d0%bb%d1%8f#comment1848581_1072771
Имею право. Всё-таки мой вопрос
https://ru.stackoverflow.com/questions/1072771/%d0%9d%d0%b5%d0%ba%d0%be%d1%80%d1%80%d0%b5%d0%ba%d1%82%d0%bd%d0%be-%d0%be%d1%82%d0%be%d0%b1%d1%80%d0%b0%d0%b6%d0%b0%d0%b5%d1%82%d1%81%d1%8f-%d0%bf%d0%be%d0%bb%d1%8f#comment1848585_1072771
@Владислав.С уже нет. Вопрос теперь принадлежит сообществу. Своим вандализмом вы мешаете другим участникам.

Ответы - Некорректно отображается поля / Некорректно отображается поля

Является ответом!
adudnik.ru

22.01.2020 01:54:20

Доброй ночи.

Вот таблица совместимости HTML элементов с браузерами:

https://caniuse.com/#search=datetime-local

Как видите поле не работает с сафари, IE и firefox десктопных.

Вам потребуется связка https://modernizr.com/ (для определения что браузер не может обработать datetime-local) и плагина jquery для реализации функционала выбора даты и времени.

UPD. (ответ на комментарий)

Я только не очень понял, как использовать modernizr

  • Идете сюда: https://modernizr.com/download?inputtypes-setclasses&q=form%20input%20types
  • Вводите в поиск form input types, жмете на плюсик в найденном для добавления функционала в build
  • Жмете BUILD
  • Если вы работаете без CMD или GRUNT - жмете download напротив build
  • Получаете скрипт минимального веса для проверки конкретно вашей задачи.
  • Подключаете его в свой код.
  • Используете как показано ниже.

Вот, как мне кажется, приемлемый вариант плагина выбора даты времени. Он позволяет настроить нужное форматирование: https://xdan.ru/samij-udobnij-datetimepicker.html

UPD. (ответ на комментарий)

Плагин интересный, правда боюсь его ставить, вдруг страницу сильно нагрузит. И я так понял, что он не задаёт жёсткую рамку для ввода, как datetime-local, а просто её считывает?

Страницу он сильно не нагрузит. Он проверяет форматирование. Т.е. можно ввести глупость вида "asd", но она заменится после ввода.

Посмотрите демо чтобы лучше понять: https://xdsoft.net/jqplugins/datetimepicker/ Можете любой другой выбрать, например вот платный с масками где не дают вводить глупости: Демо: https://xdsoft.net/jqplugins/calendar-popup/

Код в итоге будет примерно таким:

<script>
    <!--
    if(!Modernizr.inputtypes['datetime-local']) {
        $('input[type=datetime-local]').datetimepicker();
    }
    -->
</script> 

В datetimepicker() нужно через опции передать требуемое вам форматирование даты и времени + задать нужные вам языковые настройки. По ссылке выше есть вся необходимая документация и примеры.

Использовать webshim polyfill к сожалению не получится для этого формата т.к он не обеспечивает правильную работу datetime-local http://afarkas.github.io/webshim/demos/

$.webshims.polyfill('forms forms-ext');

Вот ссылка на песочницу где можно поиграться с параметрами polifyll и убедиться что он не обеспечивает нужного функционала в firefox:

https://afarkas.github.io/webshim/demos/demos/cfgs/input-datetime-local.html#min=&max=&list=&step=&value=&startView=0&minView=0&stepfactor=&useDecadeBase=0&startValue=&calculateWidth=on&popover=&popover=&popover=

Ссылки по теме

Обсуждение проблемы на англоязычном стаке: https://stackoverflow.com/questions/33028108/html-5-input-datetime-local-any-browser-ios-9-native-date-time-picker-how-to-s?rq=1

Мысли разработчиков Mozilla: https://developer.mozilla.org/ru/docs/Web/HTML/Element/Input/datetime-local

https://ru.stackoverflow.com/questions/1072771/%d0%9d%d0%b5%d0%ba%d0%be%d1%80%d1%80%d0%b5%d0%ba%d1%82%d0%bd%d0%be-%d0%be%d1%82%d0%be%d0%b1%d1%80%d0%b0%d0%b6%d0%b0%d0%b5%d1%82%d1%81%d1%8f-%d0%bf%d0%be%d0%bb%d1%8f/1072777#comment1841675_1072777
Можно заранее уточнить, пока я не углубился в тему. Этот элемент поможет мне сделать кроссбраузерность этому элементу или он сможет мне заменить это поле, но оставить ввод данных с него в таком формате. А то уже очень много алгоритмов на моём сайте связано именно с таким форматом даты, который выдаёт поле Datetime-local. Можно ли как-то сделать всё безболезненно?)
https://ru.stackoverflow.com/questions/1072771/%d0%9d%d0%b5%d0%ba%d0%be%d1%80%d1%80%d0%b5%d0%ba%d1%82%d0%bd%d0%be-%d0%be%d1%82%d0%be%d0%b1%d1%80%d0%b0%d0%b6%d0%b0%d0%b5%d1%82%d1%81%d1%8f-%d0%bf%d0%be%d0%bb%d1%8f/1072777#comment1841700_1072777
@Владислав.С Я перепроверил всё, после вашего комментария. В конкретно вашем случае вебшим не подойдет. Перепишу сейчас ответ под рабочее решение.
https://ru.stackoverflow.com/questions/1072771/%d0%9d%d0%b5%d0%ba%d0%be%d1%80%d1%80%d0%b5%d0%ba%d1%82%d0%bd%d0%be-%d0%be%d1%82%d0%be%d0%b1%d1%80%d0%b0%d0%b6%d0%b0%d0%b5%d1%82%d1%81%d1%8f-%d0%bf%d0%be%d0%bb%d1%8f/1072777#comment1841709_1072777
@adudnik.ru Спасибо, буду ждать рабочее решение)
https://ru.stackoverflow.com/questions/1072771/%d0%9d%d0%b5%d0%ba%d0%be%d1%80%d1%80%d0%b5%d0%ba%d1%82%d0%bd%d0%be-%d0%be%d1%82%d0%be%d0%b1%d1%80%d0%b0%d0%b6%d0%b0%d0%b5%d1%82%d1%81%d1%8f-%d0%bf%d0%be%d0%bb%d1%8f/1072777#comment1841711_1072777
@Владислав.С посмотрите, надеюсь это то, что вы ищите.
https://ru.stackoverflow.com/questions/1072771/%d0%9d%d0%b5%d0%ba%d0%be%d1%80%d1%80%d0%b5%d0%ba%d1%82%d0%bd%d0%be-%d0%be%d1%82%d0%be%d0%b1%d1%80%d0%b0%d0%b6%d0%b0%d0%b5%d1%82%d1%81%d1%8f-%d0%bf%d0%be%d0%bb%d1%8f/1072777#comment1841741_1072777
@adudnik.ru Плагин интересный, правда боюсь его ставить, вдруг страницу сильно нагрузит. И я так понял, что он не задаёт жёсткую рамку для ввода, как datetime-local, а просто её считывает? Я только не очень понял, как использовать modernizr.
https://ru.stackoverflow.com/questions/1072771/%d0%9d%d0%b5%d0%ba%d0%be%d1%80%d1%80%d0%b5%d0%ba%d1%82%d0%bd%d0%be-%d0%be%d1%82%d0%be%d0%b1%d1%80%d0%b0%d0%b6%d0%b0%d0%b5%d1%82%d1%81%d1%8f-%d0%bf%d0%be%d0%bb%d1%8f/1072777#comment1841767_1072777
@Владислав.С обновил ответ под ваши вопросы.
https://ru.stackoverflow.com/questions/1072771/%d0%9d%d0%b5%d0%ba%d0%be%d1%80%d1%80%d0%b5%d0%ba%d1%82%d0%bd%d0%be-%d0%be%d1%82%d0%be%d0%b1%d1%80%d0%b0%d0%b6%d0%b0%d0%b5%d1%82%d1%81%d1%8f-%d0%bf%d0%be%d0%bb%d1%8f/1072777#comment1842115_1072777
@adudnik.ru Почти разобрался. Осталось только вот что. Мне надо, чтобы пользователь вводил данные в таком формате 20.02.2020 18:30, но значение из этого поля передавалось как 20.02.2020T18:30 Как это сделать, чтобы пользователю не было видно этого Т?
https://ru.stackoverflow.com/questions/1072771/%d0%9d%d0%b5%d0%ba%d0%be%d1%80%d1%80%d0%b5%d0%ba%d1%82%d0%bd%d0%be-%d0%be%d1%82%d0%be%d0%b1%d1%80%d0%b0%d0%b6%d0%b0%d0%b5%d1%82%d1%81%d1%8f-%d0%bf%d0%be%d0%bb%d1%8f/1072777#comment1842117_1072777
@Владислав.С обычный replace пробела на букву Т должен решить эту проблему. Можете прям в modernizr дописать изменение перед отправкой формы или настроить маску так, чтобы между данными стояла буква Т (если работаете с данными через JS).
https://ru.stackoverflow.com/questions/1072771/%d0%9d%d0%b5%d0%ba%d0%be%d1%80%d1%80%d0%b5%d0%ba%d1%82%d0%bd%d0%be-%d0%be%d1%82%d0%be%d0%b1%d1%80%d0%b0%d0%b6%d0%b0%d0%b5%d1%82%d1%81%d1%8f-%d0%bf%d0%be%d0%bb%d1%8f/1072777#comment1842131_1072777
@adudnik.ru. Возможно, я не до конца понял суть скрипта, возможно установил не правильно, хотя сделал всё по документации, но если ввести 20.12.2020 18:30, то не конвертирует введенную строчку в 2020.12.20 18:30
https://ru.stackoverflow.com/questions/1072771/%d0%9d%d0%b5%d0%ba%d0%be%d1%80%d1%80%d0%b5%d0%ba%d1%82%d0%bd%d0%be-%d0%be%d1%82%d0%be%d0%b1%d1%80%d0%b0%d0%b6%d0%b0%d0%b5%d1%82%d1%81%d1%8f-%d0%bf%d0%be%d0%bb%d1%8f/1072777#comment1842134_1072777
@Владислав.С напишите мне в whatsapp 904 689 20 81 ссылку на ресурс - попробую помочь.
https://ru.stackoverflow.com/questions/1072771/%d0%9d%d0%b5%d0%ba%d0%be%d1%80%d1%80%d0%b5%d0%ba%d1%82%d0%bd%d0%be-%d0%be%d1%82%d0%be%d0%b1%d1%80%d0%b0%d0%b6%d0%b0%d0%b5%d1%82%d1%81%d1%8f-%d0%bf%d0%be%d0%bb%d1%8f/1072777#comment1842138_1072777
@adudnik.ru А у вас случайно нет телеграмма?
https://ru.stackoverflow.com/questions/1072771/%d0%9d%d0%b5%d0%ba%d0%be%d1%80%d1%80%d0%b5%d0%ba%d1%82%d0%bd%d0%be-%d0%be%d1%82%d0%be%d0%b1%d1%80%d0%b0%d0%b6%d0%b0%d0%b5%d1%82%d1%81%d1%8f-%d0%bf%d0%be%d0%bb%d1%8f/1072777#comment1842140_1072777
@Владислав.С тот же номер.
https://ru.stackoverflow.com/questions/1072771/%d0%9d%d0%b5%d0%ba%d0%be%d1%80%d1%80%d0%b5%d0%ba%d1%82%d0%bd%d0%be-%d0%be%d1%82%d0%be%d0%b1%d1%80%d0%b0%d0%b6%d0%b0%d0%b5%d1%82%d1%81%d1%8f-%d0%bf%d0%be%d0%bb%d1%8f/1072777#comment1842149_1072777
@adudnik.ru Написал в телеграмм
Закрыть X