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

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

		id="{$element.id}_displayValue"
		value="{$element.displayValue}"

		{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}
		<input type="hidden"
			id="{$element.id}"
			name="{$element.name}"
			value="{$element.value}"
		/>
	{/if}
{/block}

<script type="text/javascript">
{block name=script}
{if !$element.disabled}
	_inputValidator.createOnLoad('{$element.id}_displayValue', 'time', {$element.validatorParams|@json_encode},
		{ onBlur: function(value, validator){
			var time = _inputValidator.parseTime($F('{$element.id}_displayValue'), validator.timeFormats);

			if(time){
				$('{$element.id}').value = time.dateFormat("H:i:s");
			}else{
				$('{$element.id}').value = '';
			}
		}
	});
{/if}
{/block}
</script>