jQuery date picker

Хочу поделиться с сообществом хабра и впервые показать свой велосипед на такую публику. Встречайте, очередной jQuery date picker.

Маленькое предисловие. Все началось с прочтения этого поста. И комментария Evgeny42, c которым я бесконечно согласен. И разгорелся даже небольшой холивар как же быть, ведь действительно много проектов вообще не знают про современный фронтенд, адекватных решений очень мало, а jQuery UI действительно тот еще динозвар которого следует закопать. И вот в роли «современного фронтендщика» я поставил перед собой задачу реализовать необходимый мне пикер дат с минимальной кровью и + чтобы не стыдно и не больно было в проект его затащить и текущие решения подменить по возможности поубирав древние костыли.

Кому лень читать, вот ссылка на гитхаб.

Немного подробностей.

Зависимость от moment.js дает много преимуществ и конечно же влечет за собой такой огромный недостаток как сама библиотека и ее драгоценные килобайты. Но необходимые возможности для заточки под конкретные проекты необходимо было заложить, а нативно писать логику работы с датами кросс-браузерно совсем не хотелось. Также я предусмотрел возможность работы с выбором периода дат + можно настроить delimiter а также (благодаря moment) настроить в каком формате вам выводить дату в Input. Со стороны javascript календарик выглядит как объект и с ним тоже в целом можно делать все, что угодно. Изначально код написан с использованием возможностей ES2015, но с помощью babel я выложил и ES5 версию. Что касается CSS, то я старался следовать методологии БЭМ в именовании классов по по этому календарик не должен ехать на проектах, для современных фронтов я оставил SCSS версию календаря. Календарь также «по идее» поддерживает локализацию, но вне русских проектов я его не использовал, хотя вывод всех текстовых элементов осуществляется через Moment локаль. Сам календарик около месяца существует на парочке проектов с которыми я работаю и отлично себя чувствует.

Вот так выглядят стандартные настройки календаря:

//default params
this.params = $.extend({
  type: 'date', // || rangedate
  startDate: moment(), //startDate
  endDate: moment(), //endDate
  locale: 'ru',
  format: 'YYYY.MM.DD', //Display date format
  delimiter: '-', // display visual delimiters for rangedate type picker
  ranges: [], //defualt rasnges is empty
  firstDayOfWeek: 1 //for rus weekday fix)
}, params);        

Работает все это как jQuery плагин. И пользоваться можно, например, так:

//Single mode
$('#singleDateRange').DatePicker({
        startDate: moment()
    });
//Период дат с примером диапазонов.
    $('#rangedate').DatePicker({
        type: 'rangedate',
        startDate: moment().subtract(1, 'week'),
        endDate: moment(),
        ranges: [{
            label: "Вчера",
            startDate: moment().subtract(1, 'day'),
            endDate: moment().subtract(1, 'day')
        }, {
            label: 'Неделя',
            startDate: moment().startOf('week'),
            endDate: moment()
        }, {
            label: '2 недели',
            startDate: moment().startOf('week').subtract(1, 'week'),
            endDate: moment()
        }, {
            label: 'Месяц',
            startDate: moment().startOf('month'),
            endDate: moment()
        }, {
            label: 'Прошлый месяц',
            startDate: moment().startOf('month').subtract(1, 'month'),
            endDate: moment().startOf('month')
        }, {
            label: 'Квартал',
            startDate: moment().startOf('month').subtract(4, 'month'),
            endDate: moment().startOf('month')
        }, {
            label: 'Год',
            startDate: moment().startOf('year'),
            endDate: moment().startOf('moth')
        }]
    });

p.s. Буду очень рад конструктивным предложениям и дополнениям а также pull request'ам от местных гуру JS это важнее всего, не знаю на сколько такое востребовано на хабре. Есть много наработок в т.ч. и UIшных на бекбоне и марионет + свои jQuery плагины. При должной реакции, буду готов поделиться с обществом.