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

[dos]

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

[nazarpc]

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

[AlexSam]

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

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

[nikita2206]

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

[Borz]

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

[ImKremen]

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

[nazarpc]

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

[erlioniel]

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

[RubaXa]

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

[nazarpc]

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

[GreatRash]

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

[nazarpc]

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

[Agent_J]

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

[fear86]

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

[nazarpc]

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

[vbilenko]

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

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

[nazarpc]

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

[BAV_Lug]

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

[Dmitry_f]

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

[nazarpc]

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

[Dmitry_f]

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

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

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

this.options["offset"]

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

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

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

[nazarpc]

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

[Rulez]

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

[nazarpc]

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

[SantaCluster]

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

[k0sh]

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

[nazarpc]

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

[macik_spb]

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

[nazarpc]

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

[kurbik]

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

[andrewshkovskii]

Смотрели pickadate?

[nazarpc]

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

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

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

[nazarpc]

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

[xtra]

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

[nazarpc]

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

[maxic]

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

[nazarpc]

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

[maxic]

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

[gusakovm]

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

[nazarpc]

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

[dikkini]

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

[nazarpc]

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

[dikkini]

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

[nazarpc]

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

[dikkini]

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

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

[nazarpc]

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

[YNile]

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

[nazarpc]

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

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

[bazmaster]

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

Uncaught TypeError: Cannot read property '__pickmeup' of null

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

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

[nazarpc]

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

[bazmaster]

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