STARTPOINT_DEV Telegram 108
Кастомизация ввода даты с помощью showPicker()

Иногда нам может понадобиться использовать стандартный ввод даты с помощью элемента input[type='date'], но при этом хочется кастомизировать триггер, который будет по клику открывать календарь для выбора даты.

Тут на помощь может прийти метод showPicker() – относительно новая возможность определённых видов элемента input открывать пикер программно. Таким образом, можно скрыть сам инпут за стилизованной кнопкой, но при клике на неё вызывать открытие календаря.

Данный метод существует для множества видов инпутов – datemonthweektimedatetime-localcolor и file. Однако для каждого вида есть свои ограничения в поддержке различными браузерами. Например, выбор времени, недели и месяца не будет работать в Firefox. Подробнее с поддержкой можно ознакомиться на caniuse.

Для выбора даты в некоторых старых браузерах можно использовать обходной вариант с эмуляцией фокуса и клика по инпуту. Однако этот подход всё ещё может быть рискованным, поэтому всегда советуем тестировать решение на разных платформах, которые поддерживает ваше приложение.



tgoop.com/startpoint_dev/108
Create:
Last Update:

Кастомизация ввода даты с помощью showPicker()

Иногда нам может понадобиться использовать стандартный ввод даты с помощью элемента input[type='date'], но при этом хочется кастомизировать триггер, который будет по клику открывать календарь для выбора даты.

Тут на помощь может прийти метод showPicker() – относительно новая возможность определённых видов элемента input открывать пикер программно. Таким образом, можно скрыть сам инпут за стилизованной кнопкой, но при клике на неё вызывать открытие календаря.

Данный метод существует для множества видов инпутов – datemonthweektimedatetime-localcolor и file. Однако для каждого вида есть свои ограничения в поддержке различными браузерами. Например, выбор времени, недели и месяца не будет работать в Firefox. Подробнее с поддержкой можно ознакомиться на caniuse.

Для выбора даты в некоторых старых браузерах можно использовать обходной вариант с эмуляцией фокуса и клика по инпуту. Однако этот подход всё ещё может быть рискованным, поэтому всегда советуем тестировать решение на разных платформах, которые поддерживает ваше приложение.

BY Настя Котова // Frontend & Node.js




Share with your friend now:
tgoop.com/startpoint_dev/108

View MORE
Open in Telegram


Telegram News

Date: |

Don’t publish new content at nighttime. Since not all users disable notifications for the night, you risk inadvertently disturbing them. 4How to customize a Telegram channel? “[The defendant] could not shift his criminal liability,” Hui said. ZDNET RECOMMENDS The channel also called on people to turn out for illegal assemblies and listed the things that participants should bring along with them, showing prior planning was in the works for riots. The messages also incited people to hurl toxic gas bombs at police and MTR stations, he added.
from us


Telegram Настя Котова // Frontend & Node.js
FROM American