Календарик на javascript

Если когда то вам приходилось создавать формы с полями типа «Дата», то вам может быть хорошо известно, что средствами html пока ничего путного создать нельзя. Самые ленивые создают просто одно текстовое поле, вроде:

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

Возможно когда-нибудь, html разовьется до того, что создать дату можно будет как то так:

И тогда выпадающий из под текстового поля календарик порадует нас своей формой, зависящей от фантазии разработчиков того или иного браузера, и позволит нам парой кликов выбрать нужную дату. А пока мы ждем тех славных времен, давайте попробуем призвать на помощь великий и могучий javasctipt, повелевающий DOM.

Чтобы не затягивать повествование, сразу скажу что я хочу получить на выходе. Эта файл каскадных стилей, для формирования внешнего вида календарика, и файл с описанием функции-класса календаря. А DOM структура html кода, вставляющая календарь, пока по моей задумке на бумаге выглядит вот так:

Макет вставляемого HTML

Это контейнер — с заданной шириной (класса — calendarHolder), а внутри элемент INPUT — со строковым отображением даты и контейнер для выпадающего календарика за один месяц (класса — widgetCalendar).

Если отбросить само проектирование, то объявление класса получается такое:

Вот и все! Осталось только добавить немного CSS. Давайте разберемся и с ними.

Осталось только связать все части в HTML коде. Как это сделать читайте в разделе Сервисы -> Календарь.

Написать комментарий

Мало букафф? Читайте есчо !

Чтение параметров командной строки из программы в C++ (Unix, GCC)

Декабрь 19, 2015 г.

UNIX используется чаще всего как операционная система для серверов. Большинство утилит не имеет графического (или псевдографического) интерфейса, вызывается ...

Читать

Диагностика varnish, полезные команды

Май 30, 2018 г.

Занимался пару дней перетряхиванием конфигурации varnish на веб-сервере, решил запротоколировать некоторые моменты, если вдруг понадобится на будущее. ...

Читать

 

Комментарии к «Календарик на javascript»

Понравилась статья? Есть вопросы? - пишите в комментариях.



Комментарий:

Много комментариев в “Календарик на javascript”

  1. Leon:

    Народ подскажите как зделать так что бы можно было выбрать ту дату которая ещё не наступила типо если сёдня 10 июня в календарике можно будет выбрать 11 июля 12 июля и т.д. но сегодняшнюю дату и те даты которые уже прошли выбрать было нельзя!

    Помогите! Я ещё вернусь=)

    • Если глянуть код js виджета (/widgets/calendar/widget-calendar.js), то там основной цикл отрисовки календарика начинается со строки 115. В цикл надо добавить ветвление с условием (dateCRS <= nowDate) и для элементов (дней календарика), которые отвечают условию, из ссылки убрать код onclick, для остальных — оставить все как есть. Получится, что прошедшие уже даты нельзя будет выбрать. Это, конечно, только часть модификаций, которые надо сделать, для полного контроля за вводимой информацией.

  2. Leon:

    admin, я не очень хорошо разбираюсь в java скриптах если тебе не трудно то пожалуйста напиши код =)

    • Вроде и не трудно… Наверное, я недостаточно замотивирован чтобы помочь тебе. Если уж тебе не охота повозиться с полсотней строк чужого кода, то стоит ли вообще тебе этим заниматься?

  3. Семен:

    Здравствуйте!
    Очень замечательный календарик и без всяких заморочек с фреймворками
    А не подскажите как прикрутить функцию показа календарика showCalendar
    на событие onclick иконки которую я хочу поставить рядом с полем input
    Чтобы календарик показывался по клику на иконку

    Я еще только учусь

    Заранее благодарен за совет

    • Это довольно просто. Когда вы создали объект DTobj для вашего календаря, см раздел сервисы->календарь, то, вызывая метод данного объекта doWidget(0, 0), вы будете заставлять календарик открыться. Т.е. вам надо будет указать что то вроде:
      <img src=’…’ alt=’…’ onclick=’DTobj.doWidget(0, 0);’ />
      Параметры метода doWidget — это относительное смещение от текущей даты для месяца и года.

  4. Семен:

    Большое спасибо за совет!
    Еще 3 вопроса:

    1. Как добавить в календарик верхнюю строку с днями недели?
    Я так понял, что в функции HTML кода календарика в том месте где
    собирается месяц в аккумуляторе…
    Наверное нужно выводить массив с днями в отдельном цикле
    перед циклом вывода самой таблицы дней?
    Если я ошибаюсь подскажите правильное направление.

    2. Вы писали что нужно написать обработчик ошибки если экземпляра класса не окажется…
    В каких случаях это может произойти, если мы его сами инициализируем?

    3. Захотел «я принарядить» календарик и в стилях прописал в разделе
    div.widgetCalendar
    background-image: url(images/calendar_background.png);

    Но картинка не умещается в календарик как я не уменьшал размеры ( даже до 10px в ширине) и высоте…
    Все равно отображается половина картинки. А картинка — это красивая рамка в стиле vista

    Заранее благодарен

    • Отвечаю на вопросы…
      1. Дни недели можно вывести, добавив после объявления переменной out соответствующий HTML код. Например, что то вроде
      out += ‘<div class=»dayH»>ПН</div>’;
      out += ‘<div class=»dayH»>ВТ</div>’;
      out += ‘<div class=»dayH»>СР</div>’;
      out += ‘<div class=»dayH»>ЧТ</div>’;
      out += ‘<div class=»dayH»>ПТ</div>’;
      out += ‘<div class=»dayH»>СБ</div>’;
      out += ‘<div class=»dayH»>ВС</div>’;
      out += ‘<div class=»clear»> </div>’;
      2. Как говориться: неисповедимы пути браузера…
      3. Должно работать (в firefox работает). Календарик фиксирован по ширине — 150 пикс, высота зависит от кол-ва недель, на которые приходится месяц. Плавающую высоту придется учесть при подборе фона.