(Часть 2 здесь) (часть 3 здесь)
На полпути к созданию моего первого платного веб-приложения с использованием Angular, которое влечет за собой некоторые функции бронирования, я понял, что дать пользователю возможность выбрать дату - нетривиальная задача. Особенно, если некоторые даты доступны, а другие не зависят от существующих бронирований и другой сложной бизнес-логики. Так что нет, средство выбора даты HTML5 по умолчанию не помогает. Вообще. Отказавшись от надежды понять чужой код (например, this, this или this), после того, как почувствовал себя очень подавленным в течение нескольких очень долгих часов, и после прочтения документации Moment.js , Я решил создать свой собственный Angular datepicker. Чтобы сохранить мотивацию, я напишу учебник вживую, выковыривая код из своего мозга. Готовый? Давай сделаем это.
1 - Настройтесь сами
Сядьте в удобном месте или встаньте у стоячего стола, включите свой ноутбук с установленным Angular, подключитесь к Интернету, выключите мобильный и проиграйте эту мелодию в своей гарнитуре. Мы в порядке, приступим.
2 - Настройте проект
Создайте новый проект Angular из терминала:
ng new anguluar-bulma-datepicker
Перейдите в папку проекта и создайте новый компонент:
ng g c datepicker
Затем установите Bulma и Moment.js:
npm install --save bulma moment
Запустите редактор кода и первым делом включите bulma css, добавив эту строку «../node_modules/bulma/css/bulma.css» в массив «стилей» в angular-cli.json файл. Вот так:
Затем импортируйте Moment.js в свой datepicker.component.ts:
Теперь мы можем использовать Bulma и Moment.js в нашем проекте. Но мы также могли бы воспользоваться преимуществами другого расширения под названием Bulma Calendar, в частности, его кода CSS, чтобы добавить правильный стиль календаря в наше средство выбора даты из коробки. Для этого нам нужно взять этот код с GitHub и сохранить его в файле с именем bulma-calendar.min.css в нашей папке src, а затем сделать его доступным, добавив еще одну строку в наш angular-cli.json:
И все готово.
3 - Добавьте необходимый HTML-код для отображения даты
И снова мы будем использовать отличный код, предоставленный Wikiki в документации Bulma Calendar. Мы можем скопировать код из первого примера на эту страницу и вставить его в наш datepicker.component.html (никто не смотрит…):
Ой, он использует FontAwesome. Вам понадобится ссылка CDN в вашем index.html.
Если мы обслуживаем приложение, на этом этапе у нас должен быть красивый набор дат, где все, что мы видим, жестко запрограммировано в HTML. Теперь давайте превратим это в настоящий и полнофункциональный датпикер, добавляя по одной функции за раз.
4 - Месяц, год и навигация
Для начала покажем текущий месяц и год. Для этого мы создаем объект Moment.js (т.е. дату), имеющий в качестве значения текущую дату, и присваиваем его переменной (viewDate); Кроме того, чтобы убедиться, что мы согласованы с настройками локали, мы указываем локаль в виде строки (позже она будет свойством Input нашего компонента):
Милая. Поскольку теперь у нас есть текущая дата, мы можем заменить жестко запрограммированное «март 2017» фактическим месяцем и годом. Moment.js настолько упрощает форматирование дат, что все, что нам нужно ввести в наш шаблон, это {{viewDate.format (‘MMMM YYYY’)}}:
Легкий!! Теперь, когда я нажимаю на значок шеврона, я должен отображать предыдущий или следующий месяц, верно? Давайте добавим событие клика и функцию для его обработки:
Функция changeViewDate принимает два аргумента: число, указывающее количество, которое нужно изменить, и строку, указывающую, какая часть даты должна быть изменена. Таким образом, мы согласованы с тем, как все работает в Moment.js, что еще раз упрощает добавление или вычитание интервалов из дат. Код Moment.js для добавления месяца:
viewDate.add(1, 'month');
Почти глупо. Итак, наш changeViewDate будет таким:
Оно работает!! Итак, теперь мы можем перемещаться по времени, месяц за месяцем, используя кнопки шеврона. Но что, если по какой-либо причине мы хотим ограничить перемещение пользователя назад или вперед во времени? Например, мы не должны позволять пользователю выбирать дату в прошлом для нашей системы бронирования, или мы можем захотеть принимать заказы только на следующий год. Чтобы учесть такие ограничения, мы можем передать новую дату через проверку действительности, скажем, мы создаем функцию canChange, которая возвращает логическое значение в соответствии с некоторой логикой. Нам нужно только помнить, что объекты moment.js являются изменяемыми, поэтому, если мы не хотим изменить нашу переменную viewDate, мы должны клонировать ее, чтобы безопасно ею манипулировать. Чтобы клонировать объект даты в moment.js:
const clonedDate = moment(viewDate);
Чтобы проверить, находится ли дата в диапазоне дат:
clonedDate.isBetween(minDate, maxDate);
где minDate и maxDate - другие объекты даты, представляющие границы нашего интервала. Проверка является эксклюзивной, поэтому, если мы хотим включить крайности, нам необходимо предоставить более широкие границы, чем мы на самом деле хотим (т.е. проверка, находится ли «сегодня» между «сегодня» и «в следующем году», вернет false) . Завершая эти соображения относительно клонирования и сравнения дат, наша функция canChange (и обновленная changeViewDate) могла бы выглядеть примерно так:
И это точно работает. Становится интересно ... но я уже измотан, и еще многое предстоит сделать. Но мы будем проще. Давайте сделаем перерыв, и увидимся в части второй.
