Всплывающий календарь для выбора даты - История изменений

Alexey.belkov в 08:19, 26 июля 2016

2016-07-26T08:19:54Z

Alexey.belkov в 08:19, 26 июля 2016

2016-07-26T08:19:41Z

Velross в 13:18, 26 апреля 2014

2014-04-26T13:18:23Z

Velross в 13:17, 26 апреля 2014

2014-04-26T13:17:06Z

SerjK: Новая страница: «'''Задача:''' Разработчику необходимо, чтобы у пользователя при нажатии на поле формы обрат…»

2011-04-28T06:04:30Z

Новая страница: «'''Задача:''' Разработчику необходимо, чтобы у пользователя при нажатии на поле формы обрат…»

Новая страница

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

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

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

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.Теперь надо добавить скрипт в тело шаблона, на котором выводится форма
<source lang='apache'>
<script>
$(function() {
$( ".datepicker" ).datepicker();
});
</script>
</source>

3.Добавьте данный код в шаблон формы обратной связи (по-умолчанию ~/tpls/data/webforms.tpl )
<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>
[[Файл:Пример.jpg]]

← Предыдущая		Версия 08:19, 26 июля 2016
Строка 1:		Строка 1:
−	Актуально для ~~2.9.6~~	+	Актуально для версии 14

	----		----

@@ Строка 12: / Строка 12: @@
 <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>
+  <script src="/templates/demodizzy/js/jquery-ui.js"></script> <!-- проверялось на версии jQuery UI - v1.11.4 -->
 </source>

@@ Строка 1: / Строка 1: @@
 '''Задача:'''
@@ Строка 24: / Строка 28: @@
   $FORMS['reflection_field_date'] = <<<END
 <tr>
-<td style="width:100%;">
+   <td style="width:100%;">
-%title%:
+       %title%:
-</td>
+   </td>
-<td>
+   <td>
-<input class="datepicker" type="text" name="%input_name%" value="%value%" size="20" />
+       <input class="datepicker" type="text" name="%input_name%" value="%value%" size="20" />
-</td>
+   </td>
 </tr>
 END;

@@ Строка 5: / Строка 5: @@
 '''Решение:'''
-. Необходимо подключить css-стили и скрипты  календаря. Для этого между тегами <head> и </head> соответствующего шаблона-дизайна, на  котором будет выводиться форма, всвтавте следующий код:
+. Необходимо подключить 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>
+ <script type="text/javascript" src="/js/jquery/jquery-ui.js"></script>
 </source>
-.Теперь надо добавить скрипт в тело шаблона, на котором выводится форма
+.Теперь надо добавить скрипт в тело шаблона, на котором выводится форма (на демо-шаблоне tpl:  ~/tpls/data/webforms.tpl, на демо-шаблоне xslt: ~/xslt/modules/webforms/add.xsl )
 <source lang='apache'>
 	<script>
@@ Строка 20: / Строка 20: @@
 </source>
-.Добавьте данный код в шаблон формы обратной связи (по-умолчанию  ~/tpls/data/webforms.tpl )
+.Добавьте данный код в шаблон формы обратной связи (на демо-шаблоне tpl:  ~/tpls/data/webforms.tpl, на демо-шаблоне xslt: ~/xslt/modules/webforms/add.xsl )
 <source lang='apache'>
   $FORMS['reflection_field_date'] = <<<END
@@ Строка 32: / Строка 32: @@
 </tr>
 END;
 </source>
 [[Файл:Пример.jpg]]