Просмотр исходного текста страницы Всплывающий календарь для выбора даты

'''Задача:'''

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

'''Решение:'''

1. Необходимо подключить css-стили и скрипты  календаря. Для этого между тегами <head> и </head> соответствующего шаблона-дизайна, на  котором будет выводиться форма, вставьте следующий код:
<source lang='apache'>
 <link type="text/css" rel="stylesheet" href="/styles/skins/mac/design/calendar/calendar.css"/> 
 <script type="text/javascript" src="/js/jquery/jquery-ui.js"></script>
</source>

2.Теперь надо добавить скрипт в тело шаблона, на котором выводится форма (на демо-шаблоне tpl:  ~/tpls/data/webforms.tpl, на демо-шаблоне xslt: ~/xslt/modules/webforms/add.xsl )
<source lang='apache'>
	<script> 
	$(function() {
		$( ".datepicker" ).datepicker();
	});
	</script>
</source>

3.Добавьте данный код в шаблон формы обратной связи (на демо-шаблоне tpl:  ~/tpls/data/webforms.tpl, на демо-шаблоне xslt: ~/xslt/modules/webforms/add.xsl )
<source lang='apache'>
 $FORMS['reflection_field_date'] = <<<END
<tr>
<td style="width:100%;">
%title%:
</td>
<td>
<input class="datepicker" type="text" name="%input_name%" value="%value%" size="20" />
</td>  
</tr>
END;
</source>
Для XSLT
<source lang="xml">
	<xsl:template match="field[@type = 'date']" mode="webforms_input_type">
		<input class="datepicker" type="text" name="{@input_name}" value="" size="20" />
	</xsl:template>	
</source>
[[Файл:Пример.jpg]]


[[Категория:Модуль Обратная связь]][[Категория:Вопросы и уроки разработки сайтов на UMI.CMS]]