Class: DatePicker

componyx .UI.DatePicker(id, properties) → {Object}

new DatePicker(id, properties) → {Object}

DatePicker class.

Parameters:

Name	Type	Description
`id`	String	The id of the component.
`properties`	Object \| HTMLElement	The properties used to initialize the component or the container element.

Properties:

Name	Type	Description
`cssClassNumericBox`	String	Gets or sets the css class of the numericbox.
`cssClassDay`	String	Gets or sets the css class of the day input.
`cssClassMonth`	String	Gets or sets the css class of the month input.
`cssClassYear`	String	Gets or sets the css class of the year input.
`cssClassPicker`	String	Gets or sets the css class of the picker button.
`cssClassCalendar`	String	Gets or sets the css class of the calendar dialog.
`cssClassPrevMonth`	String	Gets or sets the css class of the prev month button.
`cssClassNextMonth`	String	Gets or sets the css class of the next month button.
`cssClassHeaderLabel`	String	Gets or sets the css class of the calendar header label.
`cssClassWeekNumber`	String	Gets or sets the css class of the week number cell in the calendar.
`cssClassCurrentWeek`	String	Gets or sets the css class of the current week row in the calendar.
`cssClassToday`	String	Gets or sets the css class of the current day cell in the calendar.
`cssClassInactive`	String	Gets or sets the css class of an inactive day cell in the calendar.
`dateFormat`	String	Gets or sets the input format for dates. Default: MM/dd/yyyy.
`firstDayOfWeek`	componyx.UI.DatePicker.FirstDayOfWeekOption	Gets or sets the first day of the week.
`today`	Boolean	Gets or sets a value indicating whether today should be used as initial selected date.
`dayPlaceholder`	String	Gets or sets the placeholder which is visible when the day input box has no value. Default: DD.
`monthPlaceholder`	String	Gets or sets the placeholder which is visible when the month input box has no value. Default: MM.
`yearPlaceholder`	String	Gets or sets the placeholder which is visible when the year input box has no value. Default: YYYY.
`viewMode`	componyx.UI.DatePicker.ViewModeOption	Gets or sets the view mode in which the date picker is rendered.
`weekNumbers`	Boolean	Gets or sets a value indicating if week numbers are displayed in the calendar.
`readOnly`	Boolean	Gets or sets a value indicating whether the date picker is readonly.
`disabled`	Boolean	Gets or sets a value indicating whether the date picker is disabled.
`calendarDayLeadingZero`	Boolean	Gets or sets a value indicating whether a calendar day has a leading zero.
`autoFocus`	Boolean	Gets or sets a value indicating whether focus on an input field is automaticly moved to the next field while typing.
`months`	Array.<String>	Gets or sets the month names as List of StringValue objects.
`days`	Array.<String>	Gets or sets the day names as List of StringValue objects.
`name`	String	Gets or sets the hidden input field name which contains the selected date in the specified date format.
`value`	String \| Date	Gets or sets the initial date value.
`minValue`	String \| Date	Gets or sets the minimum allowed date value.
`maxValue`	String \| Date	Gets or sets the maximum allowed date value.
`allowedDates`	Array.<String> \| Array.<Date>	Gets or sets a list of allowed calendar dates. Separate two date strings with a space to specify allowed range. When allowed dates are set, date input fields are rendered in readonly mode.
`disallowDates`	Boolean	Gets or sets a value indicating if the dates specified in the dates property are disallowed instead of the default allowed.
`pickerButtonId`	String	Gets or sets the id of the picker button from which the settings are cloned.
`dayNumericBoxId`	String	Gets or sets the id of the day numeric box from which the settings are cloned.
`monthNumericBoxId`	String	Gets or sets the id of the month numeric box from which the settings are cloned.
`yearNumericBoxId`	String	Gets or sets the id of the year numeric box from which the settings are cloned.
`calendarMonthNumericBoxId`	String	Gets or sets the id of the month numeric box in the calendar from which the settings are cloned.
`calendarYearNumericBoxId`	String	Gets or sets the id of the year numeric box in the calendar from which the settings are cloned.
`dialogId`	String	Gets or sets the id of the dialog from which the settings are cloned.
`hiddenInputId`	String	Gets or sets the id of the hidden input from which the settings are cloned. The hidden input contains the date in the configured date-format when a valid date is given.

Mixes In:

componyx.UI.base.methods

Returns:

An instance of the component.

Type: Object

Extends

componyx.UI.base.Component

Classes

DatePickerEvents

Members

events :componyx.UI.DatePicker.DatePickerEvents

DatePicker events

Type:

componyx.UI.DatePicker.DatePickerEvents

(static, readonly) FirstDayOfWeekOption :number

FirstDayOfWeekOption

Type:

number

Properties:

Name	Type	Description
`SUNDAY`	number
`MONDAY`	number
`SATURDAY`	number

(static, readonly) ViewModeOption :number

ViewModeOption

Type:

number

Properties:

Name	Type	Description
`INPUT_CALENDAR_POPUP`	number
`INPUT_CALENDAR_STATIC`	number
`INPUT`	number
`CALENDAR`	number
`CALENDAR_POPUP`	number

Methods

clear(fireEventopt)

Clears all input values.

Parameters:

Name	Type	Attributes	Default	Description
`fireEvent`	Boolean	<optional>	false	A value indicating if the onChanged event is fired.

destroy()

Destroys the component.

See:

componyx.UI.base.methods#destroy

getCalendarMonthNumericBox() → {componyx.UI.NumericBox}

Gets the calendar month numeric box.

Returns:

The numeric box instance.

Type: componyx.UI.NumericBox

getCalendarYearNumericBox() → {componyx.UI.NumericBox}

Gets the calendar year numeric box.

Returns:

The numeric box instance.

Type: componyx.UI.NumericBox

getDate() → {Date}

Gets the selected date.

Returns:

The selected date.

Type: Date

getDayNumericBox() → {componyx.UI.NumericBox}

Gets the day numeric box.

Returns:

The numeric box instance.

Type: componyx.UI.NumericBox

getISOValue() → {String}

Gets the input field value as ISO8601 string.

Returns:

The selected date value as ISO8601 string.

Type: String

getMonthNumericBox() → {componyx.UI.NumericBox}

Gets the month numeric box.

Returns:

The numeric box instance.

Type: componyx.UI.NumericBox

getValue() → {String}

Gets the input field value which holds the date in the specified date format.

Returns:

The selected date value in the specified date format.

Type: String

getYearNumericBox() → {componyx.UI.NumericBox}

Gets the year numeric box.

Returns:

The numeric box instance.

Type: componyx.UI.NumericBox

hideCalendar()

Hides the calendar.

isAllowedDate(date) → {Boolean}

Gets a value indicating if the specified date is allowed.

Parameters:

Name	Type	Description
`date`	Date \| String	The date to check.

Returns:

A value indicating if the date is allowed.

Type: Boolean

postRender()

Executes the post render procedure.

render()

Renders the component

reset(fireEventopt)

Resets all inputs to the initial value.

Parameters:

Name	Type	Attributes	Default	Description
`fireEvent`	Boolean	<optional>	false	A value indicating if the onChanged event is fired.

select()

Selects the text of the first input field of the datepicker.

setDate(date, fireEventopt)

Sets the date.

Parameters:

Name	Type	Attributes	Default	Description
`date`	Date			The date object.
`fireEvent`	Boolean	<optional>	false	A value indicating if the onChanged event is fired.

setSeparatorTemplate(content)

Defines the template for the input separator.

Parameters:

Name	Type	Description
`content`	HTMLElement \| Array.<HTMLElement> \| DocumentFragment \| String	The content of the template.

setValue(value, fireEventopt)

Sets the date.

Parameters:

Name	Type	Attributes	Default	Description
`value`	String			The date value in the specified date format.
`fireEvent`	Boolean	<optional>	false	A value indicating if the onChanged event is fired.

showCalendar()

Shows the calendar.

suppressNextChangeEvent(action)

Suppresses any change events fired by the underlying input element during the execution of the provided action. Use this when programmatically setting a component value to prevent the change event from propagating as a user interaction. The suppression is automatically lifted after the action completes, even if it throws.

Parameters:

Name	Type	Description
`action`	function	The action to execute with change events suppressed.

Mixes In:

componyx.UI.base.methods.suppressNextChangeEvent

Type Definitions

CalendarRenderEventArgs

DatePicker calendar render event arguments (week and day).

Type:

Object

Properties:

Name	Type	Attributes	Description
`row`	HTMLTableRowElement		The table row of the calendar week.
`cell`	HTMLTableCellElement	<optional>	The table cell of the calendar day (onCalendarDayRender only).
`button`	componyx.UI.Button	<optional>	The button of the calendar day (onCalendarDayRender only).
`date`	Date		The date of the first day shown in the week row (week render) or the date of the day (day render).