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

koteyka · 13 апреля, 2013

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

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

delprofile · 13 апреля, 2013

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

koteyka · 13 апреля, 2013

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

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

Изменено 13 апреля, 2013 пользователем koteyka

SeregaDa · 13 апреля, 2013

http://jqueryui.com/datepicker/

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

koteyka · 13 апреля, 2013

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

koteyka · 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 · 13 апреля, 2013

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

koteyka · 14 апреля, 2013

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

koteyka · 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 · 16 апреля, 2013

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

Goginhouze87 · 16 апреля, 2013

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

koteyka · 16 апреля, 2013

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

Goginhouze87 · 16 апреля, 2013

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

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

Goginhouze87 · 16 апреля, 2013

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

Goginhouze87 · 16 апреля, 2013

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

koteyka · 16 апреля, 2013

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

Goginhouze87 · 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 · 16 апреля, 2013

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

koteyka · 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 · 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 · 16 апреля, 2013

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

Ca11isto · 30 марта, 2015

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

cernos · 8 апреля, 2015

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

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

Получаем:

Изменено 20 мая, 2015 пользователем Maxman

Gandalf · 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}'>

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

Рекомендуемые сообщения

Ссылка на сообщение

Поделиться на другие сайты

Ссылка на сообщение

Поделиться на другие сайты

Ссылка на сообщение

Поделиться на другие сайты

Ссылка на сообщение

Поделиться на другие сайты

Ссылка на сообщение

Поделиться на другие сайты

Ссылка на сообщение

Поделиться на другие сайты

Ссылка на сообщение

Поделиться на другие сайты

Ссылка на сообщение

Поделиться на другие сайты

Ссылка на сообщение

Поделиться на другие сайты

Ссылка на сообщение

Поделиться на другие сайты

Ссылка на сообщение

Поделиться на другие сайты

Ссылка на сообщение

Поделиться на другие сайты

Ссылка на сообщение

Поделиться на другие сайты

Ссылка на сообщение

Поделиться на другие сайты

Ссылка на сообщение

Поделиться на другие сайты

Ссылка на сообщение

Поделиться на другие сайты

Ссылка на сообщение

Поделиться на другие сайты

Ссылка на сообщение

Поделиться на другие сайты

Ссылка на сообщение

Поделиться на другие сайты

Ссылка на сообщение

Поделиться на другие сайты

Ссылка на сообщение

Поделиться на другие сайты

Ссылка на сообщение

Поделиться на другие сайты

Ссылка на сообщение

Поделиться на другие сайты

Ссылка на сообщение

Поделиться на другие сайты

Ссылка на сообщение

Поделиться на другие сайты

Присоединяйтесь к обсуждению