Как реализовать подобный Timepicker?
Всех приветствую, подскажите пожалуйста как реализовать подобный Timepicker, пробовал поискать ничего не подобного не нашел, пытался костомизировать инпуты не получилось, пробовал тоже не смог может не так делал. Приложение на Angular, выбранным временем должно быть то, что попало в область оранжевого Bordera
Ответы (1 шт):
Хорошая идея. Его не сложно сделать.
Я бы использовал 2 дива: для прокрутки часов и минут. Ну у вас все так и изображено. Конечно обычная прокрутка не такая дискретная как нам надо. Я бы поискал кастомную, настраиваемую. Если нет такой прокрутки, то написал бы свою.
Пример хорошей кастомной прокрутки: ngx-perfect-scrollbar Не знаю позволит ли она добится нужной нам дискретности, но это не беда: самому сделать на события скроллинга не так сложно. Вы будете хранить stepHour и stepMinute в ней и относительно них делать трансформацию одного и второго дива соответсвенно: transform: translateY(...). А значениями stepHour и stepMinute управлять в событии при скроллинге. Дефолтные скроллинги надо скрыть.
Весь компонент имплементировал бы от ControlValueAccessor, чтобы потом его использовать с NgModel:
<app-time-picker formControlName="time"></app-time-picker>
<app-time-picker [(ngModel)]="form.time"></app-time-picker>