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

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

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

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

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

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

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

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

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

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

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

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

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

Получаем код раскладки (языка) активного приложения в Delphi

Октябрь 22, 2015 г.

Это не сложный процесс, как всегда лежит в области know-how. Предлагаю использовать вот такую связку функций. [crayon-5ba6c96c07d2e530020051/] Данная функция определяет активное окно и затем, по ID его процесса, получает код раскладки. Для русскоязычной ...

Читать

Вход в подземелья Храмового острова Ведьмак 3

Август 10, 2016 г.

Собирая чертежи снаряжения ведьмачей Школы Кота, вы не раз столкнетесь с ситуацией, что дошли до метки на карте, но так и не нашли вход в нужную локацию. ...

Читать

 

Комментарии к «Календарик на 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 пикс, высота зависит от кол-ва недель, на которые приходится месяц. Плавающую высоту придется учесть при подборе фона.