Не так-то просто создать хороший выбор даты с нуля. Вот почему мы всегда так рады найти компонент или плагин, который сделает это за нас в нашем проекте Angular! Ng2-datepicker - это компонент npmjs, который я тестирую здесь, чтобы быстро отобразить красивое средство выбора даты!
Что мы будем делать:
- установите ng2-datepicker в свой проект Angular
- внедрить его в компонент приложения
- отредактируйте шаблон для отображения календаря
Ознакомьтесь с нашими Внутренними тренингами по Angular или общедоступными курсами по Angular.
Попробуйте fossilo.com, наш угловой проект для архивации целых веб-сайтов.
Установите ng2-datepicker
В репозитории проекта Angular выполните следующую командную строку, чтобы установить ng2-datepicker:
npm install ng2-datepicker --save
Затем в своем модуле приложения импортируйте DatePickerModule (строка 6) и добавьте его в импорт NgModule (строка 15):
Внедрите средство выбора даты в компонент
В своем компоненте приложения импортируйте DatePickerOptions и DateModel и настройте 2 свойства: дату и параметры. Для Date установлено значение DateModel (строка 13). Для параметра O ptions установлено значение DatePickerOptions (строка 14), где вы можете установить все необходимые параметры календаря:
Вы можете получить больше опций, таких как minDate, maxDate, format… в официальной документации на Github.
Отредактируйте шаблон приложения
В шаблоне приложения добавьте тег ng2-datepicker. Установите параметры для выбора даты и ngModel на дату (определенную в app.component.ts) следующим образом:
<ng2-datepicker [options]="options" [(ngModel)]="date"> </ng2-datepicker>
С помощью стрелок вправо и влево вы можете изменить отображаемый месяц, в то время как вы можете выбрать другой год, очистить дату и получить сегодняшнюю дату одним щелчком мыши!
В моем браузере CSS отображается неправильно. Макет определяется в файле SASS (ng2-datepicker / src / ng2-datepicker / ng2-datepicker.component.sass). Но вы можете написать свой CSS, чтобы получить собственный настраиваемый макет!
Запустите свой локальный сервер, чтобы полюбоваться своим результатом!
ng serve -o
Вот и все! Теперь мы можем легко выбрать дату из красивого календаря!
Спасибо jkuri за его компонент полезный выбор даты!
Увидимся в следующий раз, чтобы увидеть еще одну статью об Angular4! Подпишитесь на меня в Twitter, LinkedIn или Medium и взгляните на нашу серию статей Medium.
