nazarpc Nov 19 2013 at 17:43

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

13 min

100K

Website development*

+55

Comments 52

dos Nov 19 2013 at 18:10

Нужно:
1. Автоматическое закрытие после выбора даты
2. Выбор несколько дат «зажатой мышкой»
3. Различные установки ограничений выбора дат (minDate, maxDate и кастомные комбинации типа daysOfWeekDisabled: «1,3,5,7»)

nazarpc Nov 19 2013 at 18:35

1, 3 На самом деле первое последнее пока можно реализовать с помощью события change demo, опцию в конфигурации для этого добавлю.
2 Не знаю, на сколько это будет очевидно. Если даты из разных месяцев — тем более будет не удобно, хотя как опцию можно сделать.

AlexSam Nov 19 2013 at 20:05

2. Первое что сделал — это пытался выделить диапазон зажатой мышкой.
в демо: «3 calendars + range» — стрелки влево/вправо нужно сделать только две по краям — одна влево, одна вправо, а то смотрится и работает не очень кошерно.

А так хороший календарь. Буду использовать. Спасибо.

nikita2206 Nov 19 2013 at 20:57

Ну нет, по 2-му пункту, такие штуки вечно факапят выделение текста. Или выделение текста их факапит.

Borz Nov 20 2013 at 10:01

2. либо автор уже доработал (тогда где UPD в посте?), либо эта функциональность показана в демо в секциях «Multiple dates» и «Dates range»

ImKremen Nov 19 2013 at 18:29

А как с поддержкой мобильных устройств?

nazarpc Nov 19 2013 at 18:36

Пока не запускал, не могу ничего сказать. Если будут проблемы — issue/pull request-ы приветствуются, и будут исправляться.

erlioniel Nov 19 2013 at 18:32

Пффф.ф… а как же 30 строк?

+23

RubaXa Nov 19 2013 at 19:46

gist.github.com/RubaXa/7547352 — и не благодари.

nazarpc Nov 19 2013 at 19:54

Добавил в пост

GreatRash Nov 19 2013 at 18:47

Не плохо бы запретить выделение текста на даблклик.

nazarpc Nov 19 2013 at 18:50

Будет обязательно

Agent_J Nov 19 2013 at 19:04

Прогресс давно бы остановился, если бы у сторонних плагинов не было фатального недостатка )

fear86 Nov 19 2013 at 19:14

А получиться ли его использовать не как date picker а как например простой календарь, в духе гугла? Что бы можно было при клике по дням выполнять события (например попап с формой открывать), сохранять данные в json ну и потом рендерить уже сохраненные из json с привязкой к дате и возможностью изменения.

nazarpc Nov 19 2013 at 19:27

Событие change есть, обработчик можете повесить любой. Класс (а значит и внешний вид) элемента каждого дня можно произвольно менять во время рендеринга (событие render).

vbilenko Nov 19 2013 at 20:04

Побольше событий.
Клик по дате (имею ввиду без ее смены, клик по уже выбранной дате).
Наведение курсора на дату, убирание курсора с даты.
И еще добавить возможность отображения номеров недели.

А так да, спасибо.

nazarpc Nov 19 2013 at 20:06

Номера дней недели как раз выпилил, мне показалось, что они не нужны, а только занимают место.
События добавлю.

BAV_Lug Nov 19 2013 at 23:56

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

Dmitry_f Nov 20 2013 at 00:18

Тяжеловат вышел. Для 14kb можно было написать jquery-less версию. Элементарный самописный календарь вместе с moment.js выйдет полегче. (5kb unminified + 8.9kb).
Попробуйте closure compiler c включенным advanced optimizations.

nazarpc Nov 20 2013 at 00:26

Он основан на другом, потому многое исторически осталось, но я постараюсь поработать над размером. Closure compiler в режиме Advanced его ломает, я как-то пробовал.

Dmitry_f Nov 20 2013 at 00:50

Да, в нем не все так просто. Но потратив час, можно все проблемы решить. Экономия до 50%.
Если все-же решитесь, вот вам пара хинтов.
1. Можно декларировать вещи, которые не должны менять имя:

options: {
        /** @expose */
        "offset": 0,
        ...
}

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

this.options["offset"]

и с jQuery соотв-но:

$['fn'][pluginName] = function (arg) {
        return this['each'](function(i,e){ ... }
}

Скомпиленный код не сменит эти названия.

nazarpc Nov 20 2013 at 00:55

Спасибо за подсказки, поиграю с ним

Rulez Nov 20 2013 at 02:02

отличная работа,
мне не хватает эмуляции выпадающего списка для выбора года,
что бы дату рождения было выбирать в вашим календарем более удобно.

nazarpc Nov 20 2013 at 02:20

Кликните название месяца и года, там достаточно удобный выбор.

SantaCluster Nov 20 2013 at 18:50

подтверждаю — работает. удобно. в первую очередь проверил :)))
спасибо :)

k0sh Nov 20 2013 at 12:13

Если в поле ручного ввода даты ввести мусор то календарик будет состоять из NaN

nazarpc Nov 20 2013 at 12:15

Спасибо, думаю, до конца недели большинство из указанного в комментариях удастся добавить/исправить.

macik_spb Nov 20 2013 at 13:00

А что из используемых технологий не поддерживают IE 7,8,9?

nazarpc Nov 20 2013 at 13:05

Используется display: flex, но при желании можно поиграть стилями для IE9. На счёт 7-8 — успешно забыл что это такое (border-radius точно работать не будет), jQuery 2.1 beta в комплекте.
Можете попробовать использовать на более старых версиях, но если что-то не будет работать — это за баг не считается.

kurbik Nov 20 2013 at 13:30

Бывает удобно, когда текущая дата (число) подсвечивается.
И спасибо за отличный плагин.

andrewshkovskii Nov 20 2013 at 13:53

Смотрели pickadate?

nazarpc Nov 20 2013 at 14:01

Да, в нём не такой удобный выбор месяца/года, а так же меня пугает верстка вида:

<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>

Меня раздражает такое количество обёрток, это ужасно.

andrewshkovskii Nov 20 2013 at 14:56

Странный вопрос, но все же — что вам до верстки генерируемой плагином? Вот серьезно — какие опасания и проблемы кроме «раздражает»?
Что касательно выбора года/месяца — не знаю, что тут удобного. Не сказать, что в pickadate идеально, но и в этом плагине — так себе.

nazarpc Nov 20 2013 at 14:59

Во-первых эстетический вид, во-вторых объем кода (+ сложность), в-третьих удобство настройки внешнего вида. Чем больше элементов — тем больше стилей, тем сложнее всем этим управлять. А если верстки минимум — то и настраивать проще.

xtra Nov 20 2013 at 17:17

Простите, а время не поддерживается или я что-то пропустил?

nazarpc Nov 20 2013 at 17:19

Нет, времени (пока) нет

maxic Nov 20 2013 at 17:37

Добавьте туда еще «время» и тогда он станет универсальным

nazarpc Nov 20 2013 at 17:40

Думал об этом, попробую добавить в том же стиле, но уже до конца недели не успею, будет позже.

maxic Nov 20 2013 at 17:46

Было бы очень классно!, добавил в закладки

gusakovm Apr 21 2014 at 04:42

Думал сделать ровно то же самое: сделать людское подобие дата-пикера под бутстрап на основе старенького Datepicker. Хорошо, что погуглил.
Автор большой молодец — то, что надо!

nazarpc Apr 21 2014 at 21:13

Интеграция с Bootstrap, к стати, тоже будет. Пока только с UIkit в git версии.

dikkini May 26 2014 at 23:04

При открытии модального окна (Bootstrap) и применении плагина к инпута в модальном окне, календарь оказывается за модальным окном.

nazarpc May 26 2014 at 23:06

Так добавьте стиль с соответствующим z-index

dikkini May 26 2014 at 23:15

Да я понимаю. Но, взял jquery ui datepicker — там не надо выставлять z-index.

nazarpc May 26 2014 at 23:16

Сделайте пример на jsfiddle, и добавьте баг на GitHub, будем смотреть, исправлять

dikkini May 26 2014 at 23:27

Не нашел прямых ссылок на ваш pickmeup, но пример такой вот. Вставьте туда ссылки на ваши ресурсы (css и js).

Забыл линк: jsfiddle.net/LPBBy/5/

nazarpc May 26 2014 at 23:34

Не работает. Прямые линки есть в демо.
И пишите на GitHub, а не сюда.

YNile Feb 25 2015 at 12:28

А есть возможность работы в «простом» режиме? Чтобы не было возможности переключаться на выбор месяца/года, а бегать исключительно по дням?

-1

nazarpc Feb 25 2015 at 12:33

Да, читайте документацию, пример: jsfiddle.net/z4fmvuzb/40/

P.S. И не пишите комментарии с вопросами под старой статьей, есть для этого Toster, StackOverflow, GitHub issues, либо email на крайний случай.

bazmaster Oct 10 2016 at 12:24

Почему если на странице нету инпута с датой, но подключены скрипты пикера, выводит следующую ошибку:

Uncaught TypeError: Cannot read property '__pickmeup' of null

Пока добавил в код всех страниц заглушку, но это не есть хорошо:

<input type="hidden" class="datepicker">

nazarpc Oct 10 2016 at 13:42

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

bazmaster Oct 10 2016 at 14:36

Оформил вроде правильно…
https://github.com/nazar-pc/PickMeUp/issues/148

Show the best of all time