Календарь
Что это такое
Данный виджет предназначен для вставки календарей на ваш сайт. Каждый раз, когда вы создаёте форму, в которой просите ввести дату, может пригодится данная вставка. Выглядит это вот так :
Полное описание внутреннего устройства виджета вы можете прочитать здесь же на сайте. А для тех, кому не терпится перейти к практике рассказываю, что нужно вставить в свой HTML код, чтобы получить виджет у себя на сайте.
Подключим файлы
Сначала в заголовок HTML страницы (секция «head») добавим пару строк. Это стили и скрипты для работы календаря. Лучше, конечно, файлы перенести на ваш сервер, чтобы не зависеть от того — работает мой сервер или нет, а также тех изменений, которые я могу вносить в код скриптов для улучшения работы виджета.
|
1 2 3 4 |
<link href="//shra.ru/widgets/calendar/widget-calendar.css" rel="stylesheet" type="text/css"> <script src="//shra.ru/widgets/calendar/widget-calendar.js" type="text/javascript"> </script> |
Далее, для определенности, рассмотрим конкретный пример. Пусть у нас есть какой то рыболовный сайт с такой вот формой:
А её код выглядит так:
|
1 2 3 4 5 6 7 8 9 10 11 12 |
<form method="post" action="" name="how_much_is_the_fish" > <label>Какую рыбу вы поймали: <select name="fishType"> <option value="0">-- выберите рыбу--</option> <option value="1">Окунь</option><option value="2">Карась</option> <option value="3">Плотва</option><option value="4">Бычок</option> </select> <label>Когда вы поймали рыбу: <input type="text" name="fishDate" size="12" value="01.01.2010" /> </label> <input type="submit"> </form> |
Нас интересует строка № 9, где идет код текстового поля. Чтобы добавить календарик, нужно заменить строку следующим кодом:
|
1 2 3 4 5 6 7 |
<div id="fishDateHolder" class="calendarHolder" style="width: 150px;"> <input name="fishDate" type="text" value="10.02.2009" /> <div class="widgetCalendar"></div> </div> <script language="javascript"> var DTobj = register_new_calendar('fishDateHolder', 'ru'); </script> |
При вызове функции register_new_calendar первым параметром указываем id — контейнера в котором оказалось наше поле ввода даты, а второй параметр указывает на каком языке показывать имена месяцев. Вот и всё!