jQuery date picker

image

Хочу поделиться с сообществом хабра и впервые показать свой велосипед на такую публику. Встречайте, очередной 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 плагины. При должной реакции, буду готов поделиться с обществом.
Tags:
javascript, jquery, велосипед, программирование

You can't comment this post because its author is not yet a full member of the community. You will be able to contact the author only after he or she has been invited by someone in the community. Until then, author's username will be hidden by an alias.