Дата и время в выпадающем окне

koteyka · April 13, 2013

Есть поле в товаре с типом datetime. Нужно, чтобы при установке курсора в этом поле выскакивало что-то на подобие этого:

Есть ли готовые решения?

delprofile · April 13, 2013

Нет такого готового, по крайней мере я не встричал!

koteyka · April 13, 2013

Помнится, либо ДарАмал, либо Даня выкладывали скрин товара в админке и там было нечто похожее (только без времени). Может они подскажут, от куда это бралось. Сейчас попробую найти тему.

Вот нашел: http://forum.simplacms.ru/topic/3810-data-postupleniya-01-01-1970/?p=31101

Edited April 13, 2013 by koteyka

SeregaDa · April 13, 2013

http://jqueryui.com/datepicker/

Кстати, в т.ч. и с помощью этой "библиотеки" осуществляется анимированный перенос товара в корзину (jquery-ui.min). Т.е. можно легко ее чуть расширить, добавив datepicker. <...> Смотрю API - со временем, кажется, все-таки не работает...

koteyka · April 13, 2013

Как вариант, можно попробовать. Спасибо.

koteyka · April 13, 2013

Нашел такую вещь: http://shublog.ru/ajax/jquery/jquery-calendars-and-datepickers/

Там есть datepicker - dynDateTime

Скачал его, в папку simpla/design/html/ закинул сам jquery.dynDateTime.js и папки css и lang.

в той же папке в файле index.tpl прописал

		<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js"></script>		
		<script type="text/javascript" src="jquery.dynDateTime.js"></script>
		<script type="text/javascript" src="lang/calendar-en.js"></script>
		<link rel="stylesheet" type="text/css" media="all" href="css/calendar-win2k-cold-1.css"  />

В файле product.tpl (там же) в тегах литерал вставил скрипт

				<script type="text/javascript">
					jQuery(document).ready(function() {
						jQuery("#dateTimeCustom").dynDateTime({
							showsTime: true,
							ifFormat: "%Y/%m/%d-%H:%M",
							daFormat: "%l;%M %p, %e %m,  %Y",
							align: "TL",
							electric: false,
							singleClick: false,
							displayArea: ".siblings('.dtcDisplayArea')",
							button: ".next()" //next sibling
						});
					});
				</script>

и в основной форме в див вставил вызов

				<span class="dtcDisplayArea"></span> <br/>
				<input type="text" name="dateTimeCust" id="dateTimeCustom"/>
				<button type="button">PICKER</button>

Вот что вышло

Но при нажатии на PICKER ничего не происходит.

Хотя сделал файл html в той же папке, код в нем

<html>
	<head>
		<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js"></script>		
		<script type="text/javascript" src="jquery.dynDateTime.js"></script>
		<script type="text/javascript" src="lang/calendar-en.js"></script>
		<link rel="stylesheet" type="text/css" media="all" href="css/calendar-win2k-cold-1.css"  />
	</head>
	<body>		
			
				<h3>Using time, custom format, display output, and different pop-up location</h3>
				<script type="text/javascript">
					jQuery(document).ready(function() {
						jQuery("#dateTimeCustom").dynDateTime({
							showsTime: true,
							ifFormat: "%Y/%m/%d-%H:%M",
							daFormat: "%l;%M %p, %e %m,  %Y",
							align: "TL",
							electric: false,
							singleClick: false,
							displayArea: ".siblings('.dtcDisplayArea')",
							button: ".next()" //next sibling
						});
					});
				</script>
				The selected date is <span class="dtcDisplayArea"></span> <br/>
				<input type="text" name="dateTimeCust" id="dateTimeCustom"/>
				<button type="button">PICKER</button>
				
    </body>
</html>

Так он срабатывает.

Где я что и не так сделал?

koteyka · April 13, 2013

Я так понимаю, что скрипт не завязан с кнопкой. Как его завязать, знатоки html?

koteyka · April 14, 2013

Есть знающие люди?

koteyka · April 15, 2013

В общем сделал так, может кому пригодится. Делалось для http://forum.simplacms.ru/topic/4434-taymer-obratnogo-otscheta-akcii/

В файле simpla/design/html/product.tpl после

 	<div id="name">
		<input class="name" name=name type="text" value="{$product->name|escape}"/> 
		<input name=id type="hidden" value="{$product->id|escape}"/> 
		<div class="checkbox">
			<input name=visible value='1' type="checkbox" id="active_checkbox" {if $product->visible}checked{/if}/> <label for="active_checkbox">Активен</label>
		</div>
		<div class="checkbox">
			<input name=featured value="1" type="checkbox" id="featured_checkbox" {if $product->featured}checked{/if}/> <label for="featured_checkbox">Рекомендуемый</label>
		</div>
	</div>

Добавляем

	<div>	
		<script language="javascript" type="text/javascript" src="design/html/datetimepicker.js"></script>
		<label for="data_akcii">Дата окончания акции: </label><input class="data_akcii" type="text" name="data_akcii" id="data_akcii" value="{$product->data_akcii|escape}" maxlength="15" size="15"><a href="javascript:NewCal('data_akcii','yyyymmdd',true,24)"><img src="design/html/img/cal.gif" width="16" height="16" border="0" alt="Pick a date"></a>
	</div>
	<br>

В папку simpla/design/html/ кинуть содержимое архива http://yadi.sk/d/1uJqvny85COWv

Должно получиться так:

Скрипт я чуть подправил, но не смог сделать, чтобы неделя была с понедельника. Может кто подправит?

Goginhouze87 · April 16, 2013

Что то у меня не получилось, делал все как указано!(

Goginhouze87 · April 16, 2013

НЕ выводит под товар акцию

koteyka · April 16, 2013

Вообще окно не появилось?

Goginhouze87 · April 16, 2013

Вообще окно не появилось?

НЕА!!!В админке указал дату окончания акции, а при просмотре товара нигде нет!

Goginhouze87 · April 16, 2013

Может быть не доделал чего!? В админке все нормально, но как сделать вывод, чтобы отобрадалось: "осталось столько то часов или дней"

Goginhouze87 · April 16, 2013

Может быть не доделал чего!? В админке все нормально, но как сделать вывод, чтобы отобрадалось: "осталось столько то часов или дней"

koteyka · April 16, 2013

В БД поле добавил? Во всех файлах изменения сделал? Опиши ход действий - что где сделал. В админке когда добавил дату она сохранилась?

Goginhouze87 · April 16, 2013

В БД поле добавил? Во всех файлах изменения сделал? Опиши ход действий - что где сделал. В админке когда добавил дату она сохранилась?

В админке добавил дату, все сохранилось.

Но я походу даже половины не сделал((

Я делал все так:

В общем сделал так, может кому пригодится. Делалось для http://forum.simplacms.ru/topic/4434-taymer-obratnogo-otscheta-akcii/
В файле simpla/design/html/product.tpl после
<div id="name"><input class="name" name=name type="text" value="{$product->name|escape}"/><input name=id type="hidden" value="{$product->id|escape}"/><div class="checkbox"><input name=visible value='1' type="checkbox" id="active_checkbox" {if $product->visible}checked{/if}/> <label for="active_checkbox">Активен</label></div><div class="checkbox"><input name=featured value="1" type="checkbox" id="featured_checkbox" {if $product->featured}checked{/if}/> <label for="featured_checkbox">Рекомендуемый</label></div></div>
Добавляем
<div><script language="javascript" type="text/javascript" src="design/html/datetimepicker.js"></script><label for="data_akcii">Дата окончания акции: </label><input class="data_akcii" type="text" name="data_akcii" id="data_akcii" value="{$product->data_akcii|escape}" maxlength="15" size="15"><a href="javascript:NewCal('data_akcii','yyyymmdd',true,24)"><img src="design/html/img/cal.gif" width="16" height="16" border="0" alt="Pick a date"></a></div><br>
В папку simpla/design/html/ кинуть содержимое архива http://tumko.ho.ua/datetimepicker.rar
Должно получиться так:

Скрипт я чуть подправил, но не смог сделать, чтобы неделя была с понедельника. Может кто подправит?

Скиньте пожалуйста ссылку или мануал, что нужно дальше править?

Goginhouze87 · April 16, 2013

В общем вопрос, как прикрутить виджет на страницу с продуктом, у которого акция!?

koteyka · April 16, 2013

В simpla/ProductAdmin.php найди строку

$product->name = $this->request->post('name');

После нее вставь

$product->data_akcii = $this->request->post('data_akcii');

В /simpla/design/html/product.tpl после

 	<div id="name">
		<input class="name" name=name type="text" value="{$product->name|escape}"/> 
		<input name=id type="hidden" value="{$product->id|escape}"/> 
		<div class="checkbox">
			<input name=visible value='1' type="checkbox" id="active_checkbox" {if $product->visible}checked{/if}/> <label for="active_checkbox">Активен</label>
		</div>
		<div class="checkbox">
			<input name=featured value="1" type="checkbox" id="featured_checkbox" {if $product->featured}checked{/if}/> <label for="featured_checkbox">Рекомендуемый</label>
		</div>
	</div>

Добавить

	<div>	
		<script language="javascript" type="text/javascript" src="design/html/datetimepicker.js"></script>
		<label for="data_akcii">Дата окончания акции: </label><input class="data_akcii" type="text" name="data_akcii" id="data_akcii" value="{$product->data_akcii|escape}" maxlength="15" size="15"><a href="javascript:NewCal('data_akcii','yyyymmdd',true,24)"><img src="design/html/img/cal.gif" width="16" height="16" border="0" alt="Pick a date"></a>
	</div>
	<br>

В папку simpla/design/html/ кинуть содержимое архива http://yadi.sk/d/1uJqvny85COWv

В api/products.php в функции public function get_product, там где

p.name,
p.url,
........

Добавить

p.data_akcii,

Тоже самое сделать ниже в функции public function get_products

В базе данных выполнить запрос

ALTER TABLE `s_products` ADD `data_akcii` DATETIME NOT NULL DEFAULT '0000-00-00 00:00:00';

Вывод самого гаджета

{include file = 'Lux-Countdown-Action/main.tpl'

         item = $product|default:false

         title = 'Акция: товар недели'
         description = 'Успейте купить до конца акции! Осталось'

         link_css = true
         link_engine = true}

делаешь в шаблоне product.tpl, там где тебе нужно.

Не забудь выполнить пункты из http://forum.simplacms.ru/topic/4434-taymer-obratnogo-otscheta-akcii/?p=4434

Всё.

Если всё сделано правильно, то в товаре получится примерно так

Goginhouze87 · April 16, 2013

koteyka, в 16 Apr 2013 - 09:48, сказал(а):
В simpla/ProductAdmin.php найди строку
$product->name = $this->request->post('name');
После нее вставь
$product->data_akcii = $this->request->post('data_akcii');
В /simpla/design/html/product.tpl после
<div id="name"><input class="name" name=name type="text" value="{$product->name|escape}"/><input name=id type="hidden" value="{$product->id|escape}"/><div class="checkbox"><input name=visible value='1' type="checkbox" id="active_checkbox" {if $product->visible}checked{/if}/> <label for="active_checkbox">Активен</label></div><div class="checkbox"><input name=featured value="1" type="checkbox" id="featured_checkbox" {if $product->featured}checked{/if}/> <label for="featured_checkbox">Рекомендуемый</label></div></div>
Добавить
<div><script language="javascript" type="text/javascript" src="design/html/datetimepicker.js"></script><label for="data_akcii">Дата окончания акции: </label><input class="data_akcii" type="text" name="data_akcii" id="data_akcii" value="{$product->data_akcii|escape}" maxlength="15" size="15"><a href="javascript:NewCal('data_akcii','yyyymmdd',true,24)"><img src="design/html/img/cal.gif" width="16" height="16" border="0" alt="Pick a date"></a></div><br>
В папку simpla/design/html/ кинуть содержимое архива http://tumko.ho.ua/datetimepicker.rar
В api/products.php в функции public function get_product, там где
p.name,p.url,........
Добавить
p.data_akcii,
Тоже самое сделать ниже в функции public function get_products

В базе данных выполнить запрос
ALTER TABLE `s_products` ADD `data_akcii` DATETIME NOT NULL DEFAULT '0000-00-00 00:00:00';
Вывод самого гаджета
{include file = 'Lux-Countdown-Action/main.tpl'item = $product|default:falsetitle = 'Акция: товар недели'description = 'Успейте купить до конца акции! Осталось'link_css = truelink_engine = true}
делаешь в шаблоне product.tpl, там где тебе нужно.
Не забудь выполнить пункты из http://forum.simplacms.ru/topic/4434-taymer-obratnogo-otscheta-akcii/?p=4434
Всё.

Если всё сделано правильно, то в товаре получится примерно так

Несравненое спасибо, я сейчас попробую!

Goginhouze87 · April 16, 2013

Спасибо большущее! Получилось, все работает без проблем!!!

Ca11isto · March 30, 2015

Если б еще кто не пожалел выложить заново архив со счетчиком - совсем чудно было бы. Две хорошие, подробные, рабочие темы по нему, а сам исходник утерялся. Ни у кого не сохранился?
С уважением.

cernos · April 8, 2015

поищите в интернет jquery date picker, выбирайте любой. Подключить даже школьник сможет!!!

Maxman · May 20, 2015

Не нужно искать никакой сторонний скрипт. В Simpla уже есть свой календарь, который прекрасно работает на странице добавления статей в блог.

Просто подключите его на нужной странице в админке и пропишите имя поля в котором он должен появляться. Например так:

<script src="design/js/jquery/datepicker/jquery.ui.datepicker-ru.js"></script>
<script>
$(function() {

	$('input[name="Имя поля"]').datepicker({
		regional:'ru',
		dateFormat: 'yy-mm-dd'
	});
</script>

Получаем:

Edited May 20, 2015 by Maxman

Gandalf · May 21, 2015

спасибо, все работает

<script src="design/js/jquery/datepicker/jquery.ui.datepicker-ru.js"></script>
<script>
$(function() {

	$('input[name="data_akcii"]').datepicker({
		regional:'ru',
		dateFormat: 'yy-mm-dd'
	});
</script>

в нужном месте

<label class=property>Дата окончания акции: </label><input type=text name=data_akcii value='{$product->data_akcii|escape}'>

Дата и время в выпадающем окне

Recommended Posts

Link to post

Share on other sites

Link to post

Share on other sites

Link to post

Share on other sites

Link to post

Share on other sites

Link to post

Share on other sites

Link to post

Share on other sites

Link to post

Share on other sites

Link to post

Share on other sites

Link to post

Share on other sites

Link to post

Share on other sites

Link to post

Share on other sites

Link to post

Share on other sites

Link to post

Share on other sites

Link to post

Share on other sites

Link to post

Share on other sites

Link to post

Share on other sites

Link to post

Share on other sites

Link to post

Share on other sites

Link to post

Share on other sites

Link to post

Share on other sites

Link to post

Share on other sites

Link to post

Share on other sites

Link to post

Share on other sites

Link to post

Share on other sites

Link to post

Share on other sites

Join the conversation