Недавно я получил запрос на компонент, который может выбирать диапазон между двумя датами. Довольно обычная задача.
Поскольку я использую платформу пользовательского интерфейса@angular/material, я бросился к документации, пытаясь выяснить, как активировать эту функцию.
Материал имеет мощный компонент datepicker, но, к сожалению, функция диапазона еще не реализована, что шокирует!
Дальнейшее расследование обнаруживает эту проблему GitHub, в которой обсуждается этот вопрос, и хорошая кастомная реализация компонента datepicker с нуля, включая функцию диапазона.
Внедрение должно было стать официальным пиаром, но в итоге было отказано членом команды по нескольким причинам.
Обидно, я бы не хотел использовать внешний компонент, который в какой-то момент может оказаться устаревшим.
Вместо этого я решил посмотреть, насколько сложно может быть интегрировать эту функцию в материал, принимая во внимание примечания и комментарии члена команды, отказывающегося от PR.
Оказывается, это довольно просто, если принять проектное предположение, упрощающее весь процесс.
Для диапазона не используйте маскировку в пределах 1 входного компонента, используйте 2 входа. Потому что весь компонент уже реализует большую часть логики обработки даты. Таким образом мы сохраняем код, избегаем регрессий и делаем все намного проще.
В этом блице стека вы можете увидеть демонстрацию, реализацию кода и подробное описание процесса.
Тот факт, что это было сделано с использованием наследования материальных компонентов datepicker, означает, что это должна быть простая задача!
Я также опубликовал комментарий о проблеме в исходном выпуске GitHub, если вы думаете, что это решение хорошее, +1, чтобы убедить команду в продвижении этой функции.
Спасибо за чтение!
