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

6How to manage your Telegram channel? How to Create a Private or Public Channel on Telegram? Public channels are public to the internet, regardless of whether or not they are subscribed. A public channel is displayed in search results and has a short address (link). Matt Hussey, editorial director of NEAR Protocol (and former editor-in-chief of Decrypt) responded to the news of the Telegram group with “#meIRL.” The Standard Channel
from us


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