Документация / Виджеты /

Поле для ввода даты

ZForms.Widget → ZForms.Widget.Container → ZForms.Widget.Container.Date

Виджет для ввода даты создается на основе HTML-элемента <input type="text">. Сам элемент при этом заменяется на <input type="hidden">, и создаются дополнительные виджеты для ввода даты, месяца, года, часов, минут, секунд (в зависимости от дополнительныех настроек). Формат представления даты YYYY-MM-DD, либо YYYY-MM-DD hh:mm:ss.

Определение виджета

Виджет определяется по дополнительному CSS-классу zf-date, например: <input class="zf zf-date" />.

Параметры инициализации

oOptions : {
	Boolean bWithTime     : false,
	Boolean bOnlyMonths   : false,
	Object  oPlaceHolders : {
		String sYear   : '',
		String sDay    : '',
		String sHour   : '',
		String sMinute : '',
		String sSecond : ''
		},
	Boolean bFocusOnInit : false,
	String sPickerId : null
	}

Где:

  • bWithTime — параметр, определяющий, нужно ли создавать дополнительные поля для ввода времени;
  • bOnlyMonths — параметр, определяющий, нужно ли создавать поле для ввода числа.
  • oPlaceHolders — параметр, содержащий плэйсхолдеры для каждого поля.
  • bFocusOnInit — параметр, позволяющий установить фокус на это поле при инициализации формы.
  • sPickerId — id HTML-элемента, который будет являться кнопкой для показа календаря. Если параметр передан — виджет будет с календарем, если нет — без календаря.

Поддерживаемые зависимости

Пример

Код примера

<form class="zf" action=".">
	<dl class="zf-date-box"> <!-- oClassElement -->
		<dt><label for="input-date">Дата</label></dt>
		<dd>
			<input class="zf zf-date" type="text" name="date" id="input-date" onclick="return { oOptions : { sPickerId : 'picker-input-date' } }" />
			<div class="zf-picker"><input type="button" class="zf-button zf-opener" id="picker-input-date" /></div>
		</dd>
	</dl>
	<dl class="zf-date-box"> <!-- oClassElement -->
		<dt><label for="input-datetime">Дата и&#160;время</label></dt>
		<dd><input class="zf zf-date" type="text" name="datetime" id="input-datetime" onclick="return { oOptions : { bWithTime : true, oPlaceHolders : { sHour : 'чч', sMinute : 'мм', sSecond : 'сс' } } }" /></dd>
	</dl>
	<dl class="zf-date-box"> <!-- oClassElement -->
		<dt><label for="input-datemonth">Только месяцы</label></dt>
		<dd><input class="zf zf-date" type="text" name="datemonth" id="input-datemonth" onclick="return { oOptions : { bOnlyMonths : true } }" /></dd>
	</dl>
</form>