Date Range Picker  очень известный и популярный компонент для выбора интервалов дат. Практически является стандартным и без альтернативным компонентом когда вам необходимо создать на странице фильтр по выбору интервала дат.
Его основные зависимости:
jquery.min.js
moment.min.js
bootstrap.js

Само использование его достаточно просто подключаем все зависимости, сам компонент:

И затем на выбранный элемент применяем команду:

Более подробно можно почитать на странице проекта http://www.daterangepicker.com/

Сложности возникнут если вам понадобится использовать этот компонент в Angular 2
рассмотрим ситуацию когда проект создан с помощью angular-cli
И так по порядку:

устанавливаем зависимости и сразу прописываем их в package.json:

существет несколько готовых адаптации daterangepicker к angular2 поэтому самим можно не заморачиваться я использовал angular2-daterangepicker(https://github.com/superstarmcawesome/angular2-daterangepicker)

Далее нам нужно прописать внешние библиотеки зависимостей в файл angular-cli.json в атрибут script:

Прописываем директиву в app.module.ts:

Все что нам осталось это использовать его в каком нибудь компоненте:

В шаблоне использование компонента будет выглядить как то так:

 

It's only fair to share...Share on FacebookShare on Google+Tweet about this on TwitterShare on LinkedInShare on VK

One thought on “Использование Date Range Picker с Angular 2

  1. npm install daterangepicker —save — устарело, последние изменения были 3 года назад. При его использовании, плохо работает сам календарь.
    Лучше использовать команду npm i bootstrap-daterangepicker —save, там самая актуальная версия.

Comments are closed.