PickMeUp — хороший jQuery datepicker plugin

    Проблема


    Начиная работу над очередным сайтом понадобился datepicker. Самый известный такой datepicker — в jQuery UI, но так как jQuery UI в проекте не использовался — тянуть даже его часть не хотелось, принялся за поиски достойной альтернативы.

    Требования следующие:
    • Выбор даты, нескольких дат, интервала
    • Простота настройки внешнего вида
    • Желательно без каких-либо зависимостей кроме jQuery

    Требования вполне логичные, ничего сверх естественного.
    Каково было мое удивление, когда просмотрев десятка два плагинов я не нашел подходящего.

    Для любопытных — сразу демо того, что получилось в результате.

    Ближе всех к требованиям оказался DatePicker.
    Но у него было несколько недостатков:
    • Избыточная табличная верстка
    • Старый стиль оформления картинками
    • Просто старый, не развивался с 2009 года
    • Несколько досадных багов

    Решить их можно было кое-как разово, но было решено довести до ума, ведь не последний проект, да и другим может пригодиться.

    Велосипед, так велосипед


    Первое что захотелось изменить — убрать картинки для округления краев. Но картинки в ячейках таблицы. Убрал ячейки — отвалилась почти вся функциональность… Но ведь пути назад нет!

    Потом пошел рефакторинг некоторых вещей, исправление багов, добавление мелких фич, снова исправление багов, и так по кругу.
    На всё ушло около двух полных дней, и оно того стоило.

    Что получилось


    Как пример привожу код, генерируемый оригинальным DatePicker:

    Скрытый текст
    <div class="datepicker" id="datepicker_828" style="display: block; position: relative; width: 196px; height: 148px;">
      <div class="datepickerBorderT"></div>
      <div class="datepickerBorderB"></div>
      <div class="datepickerBorderL"></div>
      <div class="datepickerBorderR"></div>
      <div class="datepickerBorderTL"></div>
      <div class="datepickerBorderTR"></div>
      <div class="datepickerBorderBL"></div>
      <div class="datepickerBorderBR"></div>
      <div class="datepickerContainer" style="width: 176px; height: 128px;">
        <table cellspacing="0" cellpadding="0">
          <tbody>
            <tr>
              <td>
                <table cellspacing="0" cellpadding="0" class="datepickerViewYears">
                  <thead>
                    <tr>
                      <th class="datepickerGoPrev">
                        <a href="#">
                          <span></span>
                        </a>
                      </th>
                      <th colspan="6" class="datepickerMonth">
                        <a href="#">
                          <span>2002 - 2013</span>
                        </a>
                      </th>
                      <th class="datepickerGoNext">
                        <a href="#">
                          <span></span>
                        </a>
                      </th>
                    </tr>
                    <tr class="datepickerDoW">
                      <th>
                        <span>wk</span>
                      </th>
                      <th>
                        <span>Mo</span>
                      </th>
                      <th>
                        <span>Tu</span>
                      </th>
                      <th>
                        <span>We</span>
                      </th>
                      <th>
                        <span>Th</span>
                      </th>
                      <th>
                        <span>Fr</span>
                      </th>
                      <th>
                        <span>Sa</span>
                      </th>
                      <th>
                        <span>Su</span>
                      </th>
                    </tr>
                  </thead>
                  <tbody class="datepickerMonths">
                    <tr>
                      <td colspan="2">
                        <a href="#">
                          <span>Jan</span>
                        </a>
                      </td>
                      <td colspan="2">
                        <a href="#">
                          <span>Feb</span>
                        </a>
                      </td>
                      <td colspan="2">
                        <a href="#">
                          <span>Mar</span>
                        </a>
                      </td>
                      <td colspan="2">
                        <a href="#">
                          <span>Apr</span>
                        </a>
                      </td>
                    </tr>
                    <tr>
                      <td colspan="2">
                        <a href="#">
                          <span>May</span>
                        </a>
                      </td>
                      <td colspan="2">
                        <a href="#">
                          <span>Jun</span>
                        </a>
                      </td>
                      <td colspan="2">
                        <a href="#">
                          <span>Jul</span>
                        </a>
                      </td>
                      <td colspan="2">
                        <a href="#">
                          <span>Aug</span>
                        </a>
                      </td>
                    </tr>
                    <tr>
                      <td colspan="2">
                        <a href="#">
                          <span>Sep</span>
                        </a>
                      </td>
                      <td colspan="2">
                        <a href="#">
                          <span>Oct</span>
                        </a>
                      </td>
                      <td colspan="2">
                        <a href="#">
                          <span>Nov</span>
                        </a>
                      </td>
                      <td colspan="2">
                        <a href="#">
                          <span>Dec</span>
                        </a>
                      </td>
                    </tr>
                  </tbody>
                  <tbody class="datepickerDays">
                    <tr>
                      <th class="datepickerWeek">
                        <a href="#">
                          <span>27</span>
                        </a>
                      </th>
                      <td class="datepickerNotInMonth">
                        <a href="#">
                          <span>30</span>
                        </a>
                      </td>
                      <td class="">
                        <a href="#">
                          <span>1</span>
                        </a>
                      </td>
                      <td class="">
                        <a href="#">
                          <span>2</span>
                        </a>
                      </td>
                      <td class="">
                        <a href="#">
                          <span>3</span>
                        </a>
                      </td>
                      <td class="">
                        <a href="#">
                          <span>4</span>
                        </a>
                      </td>
                      <td class="datepickerSaturday">
                        <a href="#">
                          <span>5</span>
                        </a>
                      </td>
                      <td class="datepickerSunday">
                        <a href="#">
                          <span>6</span>
                        </a>
                      </td>
                    </tr>
                    <tr>
                      <th class="datepickerWeek">
                        <a href="#">
                          <span>28</span>
                        </a>
                      </th>
                      <td class="">
                        <a href="#">
                          <span>7</span>
                        </a>
                      </td>
                      <td class="">
                        <a href="#">
                          <span>8</span>
                        </a>
                      </td>
                      <td class="">
                        <a href="#">
                          <span>9</span>
                        </a>
                      </td>
                      <td class="">
                        <a href="#">
                          <span>10</span>
                        </a>
                      </td>
                      <td class="">
                        <a href="#">
                          <span>11</span>
                        </a>
                      </td>
                      <td class="datepickerSaturday">
                        <a href="#">
                          <span>12</span>
                        </a>
                      </td>
                      <td class="datepickerSunday">
                        <a href="#">
                          <span>13</span>
                        </a>
                      </td>
                    </tr>
                    <tr>
                      <th class="datepickerWeek">
                        <a href="#">
                          <span>29</span>
                        </a>
                      </th>
                      <td class="">
                        <a href="#">
                          <span>14</span>
                        </a>
                      </td>
                      <td class="">
                        <a href="#">
                          <span>15</span>
                        </a>
                      </td>
                      <td class="">
                        <a href="#">
                          <span>16</span>
                        </a>
                      </td>
                      <td class="">
                        <a href="#">
                          <span>17</span>
                        </a>
                      </td>
                      <td class="">
                        <a href="#">
                          <span>18</span>
                        </a>
                      </td>
                      <td class="datepickerSaturday">
                        <a href="#">
                          <span>19</span>
                        </a>
                      </td>
                      <td class="datepickerSunday">
                        <a href="#">
                          <span>20</span>
                        </a>
                      </td>
                    </tr>
                    <tr>
                      <th class="datepickerWeek">
                        <a href="#">
                          <span>30</span>
                        </a>
                      </th>
                      <td class="">
                        <a href="#">
                          <span>21</span>
                        </a>
                      </td>
                      <td class="">
                        <a href="#">
                          <span>22</span>
                        </a>
                      </td>
                      <td class="">
                        <a href="#">
                          <span>23</span>
                        </a>
                      </td>
                      <td class="">
                        <a href="#">
                          <span>24</span>
                        </a>
                      </td>
                      <td class="">
                        <a href="#">
                          <span>25</span>
                        </a>
                      </td>
                      <td class="datepickerSaturday">
                        <a href="#">
                          <span>26</span>
                        </a>
                      </td>
                      <td class="datepickerSunday">
                        <a href="#">
                          <span>27</span>
                        </a>
                      </td>
                    </tr>
                    <tr>
                      <th class="datepickerWeek">
                        <a href="#">
                          <span>31</span>
                        </a>
                      </th>
                      <td class="">
                        <a href="#">
                          <span>28</span>
                        </a>
                      </td>
                      <td class="">
                        <a href="#">
                          <span>29</span>
                        </a>
                      </td>
                      <td class="">
                        <a href="#">
                          <span>30</span>
                        </a>
                      </td>
                      <td class="datepickerSelected">
                        <a href="#">
                          <span>31</span>
                        </a>
                      </td>
                      <td class="datepickerNotInMonth">
                        <a href="#">
                          <span>1</span>
                        </a>
                      </td>
                      <td class="datepickerNotInMonth datepickerSaturday">
                        <a href="#">
                          <span>2</span>
                        </a>
                      </td>
                      <td class="datepickerNotInMonth datepickerSunday">
                        <a href="#">
                          <span>3</span>
                        </a>
                      </td>
                    </tr>
                    <tr>
                      <th class="datepickerWeek">
                        <a href="#">
                          <span>32</span>
                        </a>
                      </th>
                      <td class="datepickerNotInMonth">
                        <a href="#">
                          <span>4</span>
                        </a>
                      </td>
                      <td class="datepickerNotInMonth">
                        <a href="#">
                          <span>5</span>
                        </a>
                      </td>
                      <td class="datepickerNotInMonth">
                        <a href="#">
                          <span>6</span>
                        </a>
                      </td>
                      <td class="datepickerNotInMonth">
                        <a href="#">
                          <span>7</span>
                        </a>
                      </td>
                      <td class="datepickerNotInMonth">
                        <a href="#">
                          <span>8</span>
                        </a>
                      </td>
                      <td class="datepickerNotInMonth datepickerSaturday">
                        <a href="#">
                          <span>9</span>
                        </a>
                      </td>
                      <td class="datepickerNotInMonth datepickerSunday">
                        <a href="#">
                          <span>10</span>
                        </a>
                      </td>
                    </tr>
                  </tbody>
                  <tbody class="datepickerYears">
                    <tr>
                      <td colspan="2">
                        <a href="#">
                          <span>2002</span>
                        </a>
                      </td>
                      <td colspan="2">
                        <a href="#">
                          <span>2003</span>
                        </a>
                      </td>
                      <td colspan="2">
                        <a href="#">
                          <span>2004</span>
                        </a>
                      </td>
                      <td colspan="2">
                        <a href="#">
                          <span>2005</span>
                        </a>
                      </td>
                    </tr>
                    <tr>
                      <td colspan="2">
                        <a href="#">
                          <span>2006</span>
                        </a>
                      </td>
                      <td colspan="2">
                        <a href="#">
                          <span>2007</span>
                        </a>
                      </td>
                      <td colspan="2">
                        <a href="#">
                          <span>2008</span>
                        </a>
                      </td>
                      <td colspan="2">
                        <a href="#">
                          <span>2009</span>
                        </a>
                      </td>
                    </tr>
                    <tr>
                      <td colspan="2">
                        <a href="#">
                          <span>2010</span>
                        </a>
                      </td>
                      <td colspan="2">
                        <a href="#">
                          <span>2011</span>
                        </a>
                      </td>
                      <td colspan="2">
                        <a href="#">
                          <span>2012</span>
                        </a>
                      </td>
                      <td colspan="2">
                        <a href="#">
                          <span>2013</span>
                        </a>
                      </td>
                    </tr>
                  </tbody>
                </table>
              </td>
            </tr>
          </tbody>
        </table>
      </div>
    </div>
    

    и код, генерируемый PickMeUp:

    Скрытый текст
    <div class="pickmeup pmu-view-days" style="position: relative; display: inline-block;">
      <div class="pmu-instance">
        <nav>
          <div class="pmu-prev pmu-button"></div>
          <div class="pmu-month pmu-button">November, 2013</div>
          <div class="pmu-next pmu-button"></div>
        </nav>
        <nav class="pmu-day-of-week">
          <div>Mo</div>
          <div>Tu</div>
          <div>We</div>
          <div>Th</div>
          <div>Fr</div>
          <div>Sa</div>
          <div>Su</div>
        </nav>
        <div class="pmu-months">
          <div class="pmu-button">Jan</div>
          <div class="pmu-button">Feb</div>
          <div class="pmu-button">Mar</div>
          <div class="pmu-button">Apr</div>
          <div class="pmu-button">May</div>
          <div class="pmu-button">Jun</div>
          <div class="pmu-button">Jul</div>
          <div class="pmu-button">Aug</div>
          <div class="pmu-button">Sep</div>
          <div class="pmu-button">Oct</div>
          <div class="pmu-button">Nov</div>
          <div class="pmu-button">Dec</div>
        </div>
        <div class="pmu-days">
          <div class="pmu-not-in-month pmu-button">28</div>
          <div class="pmu-not-in-month pmu-button">29</div>
          <div class="pmu-not-in-month pmu-button">30</div>
          <div class="pmu-not-in-month pmu-button">31</div>
          <div class=" pmu-button">1</div>
          <div class="pmu-saturday pmu-button">2</div>
          <div class="pmu-sunday pmu-button">3</div>
          <div class=" pmu-button">4</div>
          <div class=" pmu-button">5</div>
          <div class=" pmu-button">6</div>
          <div class=" pmu-button">7</div>
          <div class=" pmu-button">8</div>
          <div class="pmu-saturday pmu-button">9</div>
          <div class="pmu-sunday pmu-button">10</div>
          <div class=" pmu-button">11</div>
          <div class=" pmu-button">12</div>
          <div class=" pmu-button">13</div>
          <div class=" pmu-button">14</div>
          <div class=" pmu-button">15</div>
          <div class="pmu-saturday pmu-button">16</div>
          <div class="pmu-sunday pmu-button">17</div>
          <div class="pmu-selected pmu-button">18</div>
          <div class=" pmu-button">19</div>
          <div class=" pmu-button">20</div>
          <div class=" pmu-button">21</div>
          <div class=" pmu-button">22</div>
          <div class="pmu-saturday pmu-button">23</div>
          <div class="pmu-sunday pmu-button">24</div>
          <div class=" pmu-button">25</div>
          <div class=" pmu-button">26</div>
          <div class=" pmu-button">27</div>
          <div class=" pmu-button">28</div>
          <div class=" pmu-button">29</div>
          <div class="pmu-saturday pmu-button">30</div>
          <div class="pmu-not-in-month pmu-sunday pmu-button">1</div>
          <div class="pmu-not-in-month pmu-button">2</div>
          <div class="pmu-not-in-month pmu-button">3</div>
          <div class="pmu-not-in-month pmu-button">4</div>
          <div class="pmu-not-in-month pmu-button">5</div>
          <div class="pmu-not-in-month pmu-button">6</div>
          <div class="pmu-not-in-month pmu-saturday pmu-button">7</div>
          <div class="pmu-not-in-month pmu-sunday pmu-button">8</div>
        </div>
        <div class="pmu-years">
          <div class="pmu-button">2007</div>
          <div class="pmu-button">2008</div>
          <div class="pmu-button">2009</div>
          <div class="pmu-button">2010</div>
          <div class="pmu-button">2011</div>
          <div class="pmu-button">2012</div>
          <div class="pmu-button">2013</div>
          <div class="pmu-button">2014</div>
          <div class="pmu-button">2015</div>
          <div class="pmu-button">2016</div>
          <div class="pmu-button">2017</div>
          <div class="pmu-button">2018</div>
        </div>
      </div>
    </div>
    

    Код не идеален, но намного проще и понятнее, а значит и оформлять его проще.

    Что ещё нового по сравнению с оригиналом:
    • Поддержка указания конфигурационных опций в data-атрибутах
    • Глобальная конфигурация плагина
    • Независимость языка каждого отдельного календаря
    • Стили в маленьком scss файле с конфигурационными переменными — если нужно только изменить цвета — идеально подходит
    • Макет резиновый, размер зависит от размера шрифта корневого элемента, выглядит одинаково хорошо при любом размере шрифта
    • Размер плагина меньше оригинала
    • Все классы имеют префикс pmu-, корневой элемент имеет класс pickmeup
    • Кое-какие мелочи

    Так выглядит содержимое scss файла:

    $border-radius						: .4em;
    $background							: #000;
    $color								: #eee;
    $color-hover						: #88c5eb;
    $nav-color							: $color;
    $nav-color-hover					: $color-hover;
    $not-in-month						: #666;
    $not-in-month-hover					: #999;
    $disabled							: #333;
    $selected-background 				: #136a9f;
    $not-in-month-selected-background	: #17384d;
    $day-of-week						: $not-in-month-hover;
    
    @mixin display-flex() {
    	display : -ms-flexbox;
    	display : -webkit-flex;
    	display : flex;
    }
    
    .pickmeup {
    	background    : $background;
    	border-radius : $border-radius;
    	display       : none;
    	position      : absolute;
    
    	* {
    		-moz-box-sizing : border-box;
    		box-sizing      : border-box;
    	}
    
    	.pmu-instance {
    		display    : inline-block;
    		height     : 13.8em;
    		padding    : .5em;
    		text-align : center;
    		width      : 15em;
    
    		.pmu-button {
    			color           : $color;
    			cursor          : pointer;
    			outline         : none;
    			text-decoration : none;
    		}
    
    		.pmu-button:hover {
    			color : $color-hover;
    		}
    
    		.pmu-not-in-month {
    			color : $not-in-month;
    		}
    
    		.pmu-disabled,
    		.pmu-disabled:hover {
    			color  : $disabled;
    			cursor : default;
    		}
    
    		.pmu-selected {
    			background : $selected-background;
    		}
    
    		.pmu-not-in-month.pmu-selected {
    			background : $not-in-month-selected-background;
    		}
    
    		nav {
    			@include display-flex();
    			color       : $nav-color;
    			line-height : 2em;
    
    			*:hover {
    				color : $nav-color-hover;
    			}
    
    			.pmu-prev,
    			.pmu-next {
    				height : 2em;
    				width  : 1em;
    			}
    			.pmu-month {
    				width : 12em;
    			}
    		}
    
    		.pmu-years,
    		.pmu-months {
    			* {
    				display     : inline-block;
    				line-height : 3.6em;
    				width       : 3.5em;
    			}
    		}
    
    		.pmu-day-of-week {
    			color  : $day-of-week;
    			cursor : default;
    		}
    
    		.pmu-day-of-week,
    		.pmu-days {
    			* {
    				display     : inline-block;
    				line-height : 1.5em;
    				width       : 2em;
    			}
    		}
    
    		.pmu-day-of-week * {
    			line-height : 1.8em;
    		}
    	}
    
    	&:not(.pmu-view-days) .pmu-days,
    	&:not(.pmu-view-days) .pmu-day-of-week,
    	&:not(.pmu-view-months) .pmu-months,
    	&:not(.pmu-view-years) .pmu-years {
    		display : none;
    	}
    }
    

    Итог


    Размер минифицированного плагина:
    * 14.8 KiB JavaScript (4.2 KiB gzip)
    * 1.8 KiB CSS (650 B gzip)

    C целью упрощения верстки поддерживается IE10+, и актуальные версии других браузеров (при желании можно сделать поддержку IE9-, но у меня такого желания нет, написал всё-таки в первую очередь для себя).

    Демо Репозиторий на GitHub

    Искренне надеюсь, кому-то кроме меня этот jQuery плагин пригодится, буду рад конструктивной критике и pull request-ам.

    В ближайшем будущем можно встроить другие локализации, в репозитории bootstrap-datepicker их много разных.

    UPD
    Поддерживаем поднадоевшую традицию 30 строк.
    https://gist.github.com/RubaXa/7547352, спасибо RubaXa

    UPD
    В версии 2.0.1 изменилась в лучшую сторону архитектура плагина.
    По поводу пожеланий в комментариях:
    В версии 2.1.0 добавились новые опции конфигурации + несколько исправлений.
    Share post
    AdBlock has stolen the banner, but banners are not teeth — they will be back

    More
    Ads

    Comments 52

      +8
      Нужно:
      1. Автоматическое закрытие после выбора даты
      2. Выбор несколько дат «зажатой мышкой»
      3. Различные установки ограничений выбора дат (minDate, maxDate и кастомные комбинации типа daysOfWeekDisabled: «1,3,5,7»)
        +1
        1, 3 На самом деле первое последнее пока можно реализовать с помощью события change demo, опцию в конфигурации для этого добавлю.
        2 Не знаю, на сколько это будет очевидно. Если даты из разных месяцев — тем более будет не удобно, хотя как опцию можно сделать.
          0
          2. Первое что сделал — это пытался выделить диапазон зажатой мышкой.
          в демо: «3 calendars + range» — стрелки влево/вправо нужно сделать только две по краям — одна влево, одна вправо, а то смотрится и работает не очень кошерно.

          А так хороший календарь. Буду использовать. Спасибо.
          0
          Ну нет, по 2-му пункту, такие штуки вечно факапят выделение текста. Или выделение текста их факапит.
            0
            2. либо автор уже доработал (тогда где UPD в посте?), либо эта функциональность показана в демо в секциях «Multiple dates» и «Dates range»
            0
            А как с поддержкой мобильных устройств?
              +2
              Пока не запускал, не могу ничего сказать. Если будут проблемы — issue/pull request-ы приветствуются, и будут исправляться.
              +23
              Пффф.ф… а как же 30 строк?
              +2
              Не плохо бы запретить выделение текста на даблклик.
                +3
                Будет обязательно
                +5
                Прогресс давно бы остановился, если бы у сторонних плагинов не было фатального недостатка )
                  0
                  А получиться ли его использовать не как date picker а как например простой календарь, в духе гугла? Что бы можно было при клике по дням выполнять события (например попап с формой открывать), сохранять данные в json ну и потом рендерить уже сохраненные из json с привязкой к дате и возможностью изменения.
                    0
                    Событие change есть, обработчик можете повесить любой. Класс (а значит и внешний вид) элемента каждого дня можно произвольно менять во время рендеринга (событие render).
                    0
                    Побольше событий.
                    Клик по дате (имею ввиду без ее смены, клик по уже выбранной дате).
                    Наведение курсора на дату, убирание курсора с даты.
                    И еще добавить возможность отображения номеров недели.

                    А так да, спасибо.
                      0
                      Номера дней недели как раз выпилил, мне показалось, что они не нужны, а только занимают место.
                      События добавлю.
                      0
                      Спасибо. Отличный плагин вышел. Ничего лишнего.
                      Регулярно приходится делать обычную выборку дат, а от уишного датепикера уже воротит.
                      Возьму на вооружение.
                        0
                        Тяжеловат вышел. Для 14kb можно было написать jquery-less версию. Элементарный самописный календарь вместе с moment.js выйдет полегче. (5kb unminified + 8.9kb).
                        Попробуйте closure compiler c включенным advanced optimizations.
                          0
                          Он основан на другом, потому многое исторически осталось, но я постараюсь поработать над размером. Closure compiler в режиме Advanced его ломает, я как-то пробовал.
                            0
                            Да, в нем не все так просто. Но потратив час, можно все проблемы решить. Экономия до 50%.
                            Если все-же решитесь, вот вам пара хинтов.
                            1. Можно декларировать вещи, которые не должны менять имя:
                            options: {
                                    /** @expose */
                                    "offset": 0,
                                    ...
                            }
                            

                            2. Также можно обращаться через строковый литерал:
                            this.options["offset"]
                            

                            и с jQuery соотв-но:
                            $['fn'][pluginName] = function (arg) {
                                    return this['each'](function(i,e){ ... }
                            }
                            

                            Скомпиленный код не сменит эти названия.
                              0
                              Спасибо за подсказки, поиграю с ним
                          0
                          отличная работа,
                          мне не хватает эмуляции выпадающего списка для выбора года,
                          что бы дату рождения было выбирать в вашим календарем более удобно.
                            0
                            Кликните название месяца и года, там достаточно удобный выбор.
                              0
                              подтверждаю — работает. удобно. в первую очередь проверил :)))
                              спасибо :)
                            0
                            Если в поле ручного ввода даты ввести мусор то календарик будет состоять из NaN
                              0
                              Спасибо, думаю, до конца недели большинство из указанного в комментариях удастся добавить/исправить.
                              0
                              А что из используемых технологий не поддерживают IE 7,8,9?
                                0
                                Используется display: flex, но при желании можно поиграть стилями для IE9. На счёт 7-8 — успешно забыл что это такое (border-radius точно работать не будет), jQuery 2.1 beta в комплекте.
                                Можете попробовать использовать на более старых версиях, но если что-то не будет работать — это за баг не считается.
                                0
                                Бывает удобно, когда текущая дата (число) подсвечивается.
                                И спасибо за отличный плагин.
                                  0
                                  Смотрели pickadate?
                                    0
                                    Да, в нём не такой удобный выбор месяца/года, а так же меня пугает верстка вида:

                                    <div class="picker picker--focused picker--opened">ev
                                      <div class="picker__holder">
                                        <div class="picker__frame">
                                          <div class="picker__wrap">
                                            <div class="picker__box">
                                              <div class="picker__header">...
                                              <table class="picker__table">...
                                              <div class="picker__footer">...
                                            </div>
                                          </div>
                                        </div>
                                      </div>
                                    </div>
                                    

                                    Меня раздражает такое количество обёрток, это ужасно.
                                      0
                                      Странный вопрос, но все же — что вам до верстки генерируемой плагином? Вот серьезно — какие опасания и проблемы кроме «раздражает»?
                                      Что касательно выбора года/месяца — не знаю, что тут удобного. Не сказать, что в pickadate идеально, но и в этом плагине — так себе.
                                        0
                                        Во-первых эстетический вид, во-вторых объем кода (+ сложность), в-третьих удобство настройки внешнего вида. Чем больше элементов — тем больше стилей, тем сложнее всем этим управлять. А если верстки минимум — то и настраивать проще.
                                    0
                                    Простите, а время не поддерживается или я что-то пропустил?
                                      0
                                      Нет, времени (пока) нет
                                      0
                                      Добавьте туда еще «время» и тогда он станет универсальным
                                        0
                                        Думал об этом, попробую добавить в том же стиле, но уже до конца недели не успею, будет позже.
                                          0
                                          Было бы очень классно!, добавил в закладки
                                        0
                                        Думал сделать ровно то же самое: сделать людское подобие дата-пикера под бутстрап на основе старенького Datepicker. Хорошо, что погуглил.
                                        Автор большой молодец — то, что надо!
                                          0
                                          Интеграция с Bootstrap, к стати, тоже будет. Пока только с UIkit в git версии.
                                          0
                                          При открытии модального окна (Bootstrap) и применении плагина к инпута в модальном окне, календарь оказывается за модальным окном.
                                            0
                                            Так добавьте стиль с соответствующим z-index
                                              0
                                              Да я понимаю. Но, взял jquery ui datepicker — там не надо выставлять z-index.
                                                0
                                                Сделайте пример на jsfiddle, и добавьте баг на GitHub, будем смотреть, исправлять
                                                  0
                                                  Не нашел прямых ссылок на ваш pickmeup, но пример такой вот. Вставьте туда ссылки на ваши ресурсы (css и js).

                                                  Забыл линк: jsfiddle.net/LPBBy/5/
                                                    0
                                                    Не работает. Прямые линки есть в демо.
                                                    И пишите на GitHub, а не сюда.
                                            –1
                                            А есть возможность работы в «простом» режиме? Чтобы не было возможности переключаться на выбор месяца/года, а бегать исключительно по дням?
                                              +1
                                              Да, читайте документацию, пример: jsfiddle.net/z4fmvuzb/40/

                                              P.S. И не пишите комментарии с вопросами под старой статьей, есть для этого Toster, StackOverflow, GitHub issues, либо email на крайний случай.
                                              0
                                              Почему если на странице нету инпута с датой, но подключены скрипты пикера, выводит следующую ошибку:
                                              Uncaught TypeError: Cannot read property '__pickmeup' of null
                                              

                                              Пока добавил в код всех страниц заглушку, но это не есть хорошо:
                                              <input type="hidden" class="datepicker">
                                              

                                                +1

                                                Статья не самый лучший пример для таких вопросов.
                                                Будьте добры, оформите с демкой здесь: https://github.com/nazar-pc/PickMeUp/issues
                                                Там будем разбираться. Пример демки есть в readme, просто измените чтобы воспроизвести проблему.

                                            Only users with full accounts can post comments. Log in, please.