Shra's homepage

Что это такое

Данный виджет предназначен для вставки календарей на ваш сайт. Каждый раз, когда вы создаёте форму, в которой просите ввести дату, может пригодится данная вставка. Выглядит это вот так :

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

Подключим файлы

Сначала в заголовок HTML страницы (секция «head») добавим пару строк. Это стили и скрипты для работы календаря. Лучше, конечно, файлы перенести на ваш сервер, чтобы не зависеть от того — работает мой сервер или нет, а также тех изменений, которые я могу вносить в код скриптов для улучшения работы виджета.

<link href="http://shra.ru/widgets/calendar/widget-calendar.css"
      rel="stylesheet" type="text/css">
<script src="http://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>

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