Найти в Дзене

Поле для ввода даты

На одном из проектов по работе (проект был для банковской сферы, не в открытом доступе) мы делали элемент для ввода периода. Но заказчика не устраивал тот компонент который мы взяли разработку airbnb/react-dates (сейчас этот пакет уже не относится к airbnb и перестал развиваться). Ему не нравился формат ввода даты и времени вручную, нужно было прописывать все знаки - точки, двоеточие вручную. И я сделала компонент для ввода даты и времени по формату дд.мм.гггг чч:мм с использование компонента react-input-mask (к сожалению проект тоже не обновляется). Эта библиотека позволяет задавать маску, по которой будет осуществляться ввод данных пользователем. В чем его отличие от других похожих библиотек - если удалить символ то не происходит смещение всех элементов, вместо удаленного символа отображается placeholder символ. Также в нем есть проверка корректности ввода символа, например если мы вводим день, то нельзя начать вводить с цифр 4-9, если ввели 3 то дальше можем ввести только 1 или 0. Е

На одном из проектов по работе (проект был для банковской сферы, не в открытом доступе) мы делали элемент для ввода периода. Но заказчика не устраивал тот компонент который мы взяли разработку airbnb/react-dates (сейчас этот пакет уже не относится к airbnb и перестал развиваться). Ему не нравился формат ввода даты и времени вручную, нужно было прописывать все знаки - точки, двоеточие вручную.

И я сделала компонент для ввода даты и времени по формату дд.мм.гггг чч:мм с использование компонента react-input-mask (к сожалению проект тоже не обновляется). Эта библиотека позволяет задавать маску, по которой будет осуществляться ввод данных пользователем. В чем его отличие от других похожих библиотек - если удалить символ то не происходит смещение всех элементов, вместо удаленного символа отображается placeholder символ. Также в нем есть проверка корректности ввода символа, например если мы вводим день, то нельзя начать вводить с цифр 4-9, если ввели 3 то дальше можем ввести только 1 или 0. Если ввести 29.02.2001 то день автоматически изменится на 28.02.2001, так как такого дня не существует.

Выбор дат в проекте для банка
Выбор дат в проекте для банка

Этот компонент мигрировал в мой другой проект "Работа без границ". Разница была только в том что тут не нужен был период в виде двойного календаря и время. Использовала только саму механику ввода и корректировки даты.

Ввод даты в проекте "Работа без границ"
Ввод даты в проекте "Работа без границ"

И был еще один проект, в который я перенесла ту же логику, мой самый самый - социальная сеть SkillsNet, на котором я проработала 3 года. Но в конце 2021 года пришлось с ним расстаться.

Выбор дат в проекте SkillsNet
Выбор дат в проекте SkillsNet

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

Выбор дат в админке для рассылочного сервиса
Выбор дат в админке для рассылочного сервиса

Этот же компонент я буду добавлять в свой новый проект планировщика.