{extends file=$element.methods->getTemplatePath('general')}

{block name=input append}
	<input type="text"
		{if $element.style.CSSClass}
			class="{$element.style.CSSClass} date"
		{/if}

		id="{$element.id}_date"
		value="{$element.displayValue.date}"

		{if $element.disabled}
			disabled="disabled"
		{/if}

		{if !$element.disabled && $element.settings.events.onChange}
			onChange="setTimeout(function(){ var element = $('{$element.id}'); {$element.settings.events.onChange|join:';'}}, 1);"
		{/if}

		{if $element.placeholder}
			placeholder="{$element.placeholder}"
		{/if}
	/>

	{if $element.disabled}
		<img src="{$smarty.const.SMARTY_BLANKGIF}" alt="" class="imgIcon icon-calendar-disabled"
			id="{$element.id}_calendarButton"
		/>
	{else}
		<img src="{$smarty.const.SMARTY_BLANKGIF}" alt="" class="imgIcon icon-calendar"
			id="{$element.id}_calendarButton"
		/>
	{/if}

	<input type="text"
		{if $element.style.CSSClass}
			class="{$element.style.CSSClass} time"
		{/if}

		id="{$element.id}_time"
		value="{$element.displayValue.time}"

		{if $element.disabled}
			disabled="disabled"
		{/if}

		{if !$element.disabled && $element.settings.events.onChange}
			onChange="setTimeout(function(){ var element = $('{$element.id}'); {$element.settings.events.onChange|join:';'}}, 1);"
		{/if}
	/>

    {if !$element.disabled}
        <input type="hidden"
            id="{$element.id}"
            name="{$element.name}"
            value="{if $element.value.date}{$element.value.date} {$element.value.time|default:'00:00:00'}{/if}"
        />
    {/if}
{/block}

<script type="text/javascript">
{block name=script}
	{if !$element.disabled}
		MVC.scheduleOnLoad(function(){
			Calendar.setup({
				inputField:"{$element.id}",
				button:"{$element.id}_calendarButton",
				ifFormat:"%Y-%m-%d %H:%M:%S",
				daFormat:"%Y-%m-%d %H:%M:%S",
				showsTime:false,
				timeFormat:"24",
				
				onUpdate: function(calendar){
					$('{$element.id}_date').value = calendar.date.dateFormat("{$element.shortDateFormat}");
					if (!$F('{$element.id}_time')) {				
						$('{$element.id}_time').value = "00:00";
					}
 					$('{$element.id}').value = calendar.date.dateFormat("Y-m-d") + " " + $('{$element.id}_time').value + ":00";
					_events.simulate('blur', '{$element.id}');
				}

				{if $element.value}, 'date':"{$element.displayValue.date} {$element.displayValue.time}"{/if}

				{if $element.validatorParams.minValue || $element.validatorParams.maxValue}
					, disableFunc:function(dt){
						var disable = false;
						{if $element.validatorParams.maxValue}
							if(dt.dateFormat("Y-m-d")>'{$element.validatorParams.maxValue}') {
								disable = true;
							}
						{/if}

						{if $element.validatorParams.minValue}
							if(dt.dateFormat("Y-m-d")<'{$element.validatorParams.minValue}') {
								disable = true;
							}
						{/if}

						return disable;
					}
				{/if}
			});

			window['datetime_formFieldsInput_{$element.id}'] = function(value, validator){
				var date = _inputValidator.parseDate($F('{$element.id}_date'), validator.dateFormats);
				var time = _inputValidator.parseTime($F('{$element.id}_time'), validator.timeFormats);
				
				if (date) {
					$('{$element.id}').value = date.dateFormat("Y-m-d") + (time?time.dateFormat(" H:i:s"):" 00:00:00");
				}
				else {
					$('{$element.id}').value = '';
				}
			};

			_inputValidator.createOnLoad('{$element.id}_date', 'date', {$element.validatorParams|@json_encode},
			{
				onBlur: window['datetime_formFieldsInput_{$element.id}']
			}
			);

			_inputValidator.createOnLoad('{$element.id}_time', 'time', { mandatory: {$element.validatorParams.mandatory+0}},
			{
				onBlur: window['datetime_formFieldsInput_{$element.id}']
			}
			);
		});
	{/if}
{/block}
</script>