Легкий календарь с часами, минутами и секундами

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

Если Вам нужен легкий календарь, появляющийся при клике по полю формы заполнения, это то, что Вам нужно.

Вначале пример, чтобы понимать, о чем идет речь, кликните на любое поле с датой:

Данный плагин по сути является русифицированным jQuery UI Datepicker 1.7.2 с исключенными изображениями, упрощенным CSS и быстрым появлением.

Чтобы использовать плагин, нужно:

1. Подключить javascript:

<script language="Javascript" type="text/javascript" src="jquery.js"></script>
<link type="text/css" href="/calendar/latest.css" rel="Stylesheet" />
<script type="text/javascript" src="/calendar/ui.datepicker.js"></script>
<script>
$(".datepickerTimeField").datepicker({
        changeMonth: true,
        changeYear: true,
        dateFormat: 'dd.mm.yy',
        firstDay: 1, changeFirstDay: false,
        navigationAsDateFormat: false,
        duration: 0,// отключаем эффект появления
});
</script>

2. К нужным полям INPUT добавить class="datepickerTimeField", к примеру так:

<input name="min" value="04.05.2010" class="datepickerTimeField">

При желании Вы можете скачать пример или посмотреть его в новом окне »

А как же часы, минуты и секунды?

Когда просто даты мало, в интернете можно найти футуристические календари с часами и минутами »

А мы для Вас разработали свою альтернативу, на базе jQuery UI Datepicker 1.8.2

Легкий календарь с часами, минутами и секундами

Чтобы использовать плагин, нужно:

1. Подключить javascript:

<script language="Javascript" type="text/javascript" src="jquery.js"></script>
<link type="text/css" href="/calendar/latest.css" rel="Stylesheet" />
<script type="text/javascript" src="/calendar/latest.js"></script>

2. К нужным полям INPUT добавить class="datepickerTimeField", к примеру так:

<input name="min" value="19.05.2010 05:07:25" class="datepickerTimeField">

При желании Вы можете скачать пример или посмотреть его в новом окне »

Подсказки:

1. Если Вы на своем сайте не используете DOCTYPE, то стили ширины немного поплывут, а чтобы их поправить, Вам нужно добавить такие CSS правила:

.ui-datepicker th, .ui-datepicker .ui-datepicker-header { font:12px Arial,Helvetica,Tahoma,sans-serif; }
.ui-datepicker { width: 205px }

2. Наверняка Вы заметили, что в календаре очень мал интервал выбора лет. Так вот, чтобы выставить там свой интервал, при подключении пропишите следующее правило:

yearRange: "1900:2010"

3. Бывает нужно, чтобы по-умолчанию календарь показывал таблицу выбора Х лет назад. Например, чтобы сделать, 35 лет назад, при подключении пропишите следующее правило (12775 - количество дней тому назад):

defaultDate: -12775

Удачных разработок!

Оцени публикацию:
  • 30,139
Оценили человек: 30
Теги : jQuery, Формы, Юзабилити, Валидация, Автозаполнение, Календарь, Время, Даты, Плагин

Похожие статьи:

Справочники и учебники:


Комментарии посетителей:
  • Отличный календарь и самое главное, что есть инструкция. Большое человеческое спасибо.
    31 мая 2010, 12:42 коммент полезен : 0 # Sano (гость)
  • Все бы хорошо. Но тягать 80 кб для календаря это слишком много.
    25 октября 2010, 12:29 коммент полезен : 0 # Василий (гость)
    • сожмите яваскрипт, получите на выходе маленькие скриптики, ссылки для сжатия http://dean.edwards.name/packer/ и http://javascriptcompressor.com/
      25 октября 2010, 12:36 коммент полезен : +1 # Admin
  • скачал вашу последнюю версию.
    П.С. у вас в разных архивах разные версии на странице.

    при нажатии на кнопку ОК пишет ошибку "uncaught exception: Missing instance data for this datepicker"

    и как указать что в пустое поле нужно вставлять часы и минуты. поле value пустое должно быть.
    12 ноября 2010, 00:55 коммент полезен : -1 # Гость
    • 1. Да, в 1ом архиве версия без часов, минут, секунд.

      2. В каком браузере выдает ошибку при нажатии на кнопку ОК?

      3. как и описано в статье, добавьте полю class="datepickerTimeField"
      12 ноября 2010, 07:05 коммент полезен : 0 # Admin
      • 1. OK
        2. Наверное глюк был.
        3. OK

        Такие предложения:
        1. Вывод секунд редко нужен поэтому я его просто закомментил в коде
        2. Было бы неплохо если бы вы сделали вывод календаря с датами и кнопкой для класса datepickerTimeField а для класса datepickerField календарь без часов и кнопки
        3. Сделать возможность задать, что сохранять выбор только по кнопке ОК, а не по клику по дате.
        28 марта 2011, 14:26 коммент полезен : +3 # Антон
        • Здравствуйте, Антон!
          Можете рассказать какие строки Вы закомментировали, чтобы секунды не выводились???

          Такие предложения:
          1. Вывод секунд редко нужен поэтому я его просто закомментил в коде
          25 апреля 2012, 06:17 коммент полезен : 0 # Андрей (гость)
  • http://jscontrols.ru/?datepicker
    18 апреля 2011, 20:17 коммент полезен : +1 # Holden
    • круто. а почему на англ всё?
      19 апреля 2011, 07:42 коммент полезен : +1 # Антон
  • Все хорошо, вот только если поле input встроено в dom после загрузки страницы календарь не работает. Наверное стоило вместо события click использовать live('click', function(){})? Если бы вы это исправили я был бы вам бесконечно благодарен.
    04 мая 2011, 10:13 коммент полезен : +2 # Рустам
  • Большое спасибо за скрипт.
    Маленький баг - при выборе дня - календарь закрывается и нет возможности выбрать время - нужно открывать ещё раз. Решение - убрать 1113 строку - "this._hideDatepicker();" это в функции _selectDate. Тогда после клика на день календарь остается открытым и можно выбрать время.
    Ещё один косяк - при использовании showOn :"button" в настройках скрипта перестает работать Ваша кнопка "Ок"
    23 сентября 2011, 14:19 коммент полезен : +1 # Beagler
    • косяк с кнопкой решен
      26 сентября 2011, 13:48 коммент полезен : 0 # Beagler
      • Почему не написали как?) Буду благодарен...
        16 ноября 2011, 12:39 коммент полезен : 0 # Иван (гость)
        • Сегодня тоже столкнулся с этой проблемой. Особенность следующая - если нажать сначало на поле - то кнопка "Ок" начинает работать, а если сначало жать на кнопку - то кнопка "Ок" не работает...
          16 ноября 2011, 15:18 коммент полезен : 0 # Poccomaxa
      • Здравствуйте, Beagler!
        Расскажите пожалуйста как Вы решили косяк с кнопкой? Просим... просим...
        25 апреля 2012, 09:16 коммент полезен : 0 # Андрей3
  • Класс! Установил без проблем, огромное Вам спасибо!
    21 ноября 2011, 10:04 коммент полезен : 0 # Александр4
  • Не работает кнопка ОК и время не заносится в поле,(учтанавливается только дата)(архив  http://yapro.ru/uploads/Files/jquery.yapro.Datepicker/archive.tgz)
    25 января 2012, 01:24 коммент полезен : 0 # Alekseygen
    • проверил в Firefox, всё работает
      25 января 2012, 07:19 коммент полезен : 0 # Tor (гость)
  • Все работает супер!!!!!!!! (главное если подключаете в режиме jQuery.noConflict();.  не забудьте в latest.js заменить все $ на jQuery)
    25 января 2012, 18:52 коммент полезен : 0 # Alekseygen
    • Добрый день, Alekseygen!
      А можно поподробнее описать, как Вы решили проблему с работой кнопки "OK". Как это заменить все $ на jQuery
      25 апреля 2012, 06:14 коммент полезен : 0 # Андрей3
      • попробую подробнее, окрываешь файл скрипта latest.js например прогаммой    
        Adobe Dreamweaver CS4 и заменяешь в нем все значки $ на jQuery например было $.extend(this._defaults, this.regional['']);  станет после исправления jQuery.extend(this._defaults, this.regional['']); это нужно чтобы при исполнении скриптов на вашем сайте не было конфликта c объявлением переменных(разные скрипты на сайте используют один символ для объявления переменных, а именно $). У меня например до этого исправления не работала кнопка ОК в календаре и в магазине virtuemart перестал работать скрипт увеличения фото товара. Да и чтобы календарь не закрывался при выборе даты я закомментировал строку 1113 в latest.js /* this._hideDatepicker(); */ Если все равно не понятно скиньте свой скайп что ли созвонимся объясню, подключим.
        25 апреля 2012, 07:53 коммент полезен : 0 # Alekseygen
        • Большое спасибо, Alekseygen!
          Заменил все $ на jQuery в файле latest.js, помогло, но лишь отчасти, к сожалению. У меня тоже календарь весит в интернет магазине, думаю, что мы с Вами одни и те же цели преследовали... http://beagler.ru/virtuemart/21.html . Но вот в чем проблема, если жмешь на поле и выбираешь дату и время, то все хорошо, кнопка "ОК" функционирует, а вот если для ввода даты и времени нажимаешь на кнопку "...", то в таком случае кнопка "ОК" не фурыкает, при чем как в лисе так и в опере.
          25 апреля 2012, 09:10 коммент полезен : 0 # Андрей3
          • Если еще нужна помощь, напиши какой-нибудь свой контакт(mail например) чтобы здесь в комментариях не обсуждать
            25 апреля 2012, 12:54 коммент полезен : 0 # Alekseygen
            • Стукани мне в асю 490ДваПять9570
              25 апреля 2012, 15:33 коммент полезен : 0 # Андрей3
            • Благодарю! Решил проблему радикальным способом...:)). Вероятно, косяк в коде календаря, данная схема - showOn: 'both', работает не корректно. При первом нажатии на кнопку "..." выбрать время не удастся (кнопка "ОК" не реагирует на нажатие). С чем это связано не знаю, но баг на лицо, или же это только у меня так. При первом нажатии на поле все работает отлично, т.е. если вы при выборе даты первым делом нажали на поле, то дальше и при нажатии на копку "...", кнопка "ОК" будет функционировать и время будет вводиться.
              Я решил, пусть уж лучше будет данная схема - showOn: 'button', вывода календаря работать, чем такая ошибка:))
              26 апреля 2012, 10:26 коммент полезен : 0 # Андрей3
  • Может кому-то будет интересен вот такой календарь с часами и минутами - http://www.dynarch.com/projects/calendar/
    03 февраля 2012, 12:46 коммент полезен : 0 # Admin
  • как сменить язык?
    Подключаю просто задавая class="datepickerTimeFieldUser"
    22 октября 2013, 20:40 коммент полезен : 0 # Антон
  • Не работает в IE, ошибка в строке 1983
    21 января 2014, 06:41 коммент полезен : 0 # Вадим3
  • А запилите пример и статью как пользоваться. подробно желательно. как получить значение интервала и даты, как передать и вывести и тому подобное
    17 апреля 2014, 03:13 коммент полезен : 0 # Des
    • загуглите документация jQuery UI Datepicker 1.7.2, там все написано
      17 апреля 2014, 07:33 коммент полезен : 0 # Admin
Предложения и пожелания:
Ваше имя:
Ваш E-mail:
Введите изображенные цифры:
Captcha
Главная
X

youtube.com/watch?v=7hFivbgIEqk

При полном или частичном использовании материалов данного сайта, ссылка на сайт "yapro.ru" обязательна как на источник информации.
Автоматический импорт материалов и информации с сайта запрещен.
Copyrights © 2007 - 2017 YaPro.Ru

Главная » Веб-мастеру » JavaScript »