Calendar

(part of package 'Bootstrap Components') Extends designtime/SolutionModel: JSWebComponent Extends runtime: RuntimeWebComponent

Calendar is an input control component. It allows using a date-picker to choose Date values for a bound data-provider. The key difference compared to the Calendar-Inline component is that this Calendar component is an input field that the shows the date-picker in a popup only when clicked; whereas the Calendar-Inline shows the date-picker directly on the form.

This is a reference page; many components have detailed usage guides here.

Properties

calendarWeeks

Indicates whether calendar week numbers should be displayed. Type: Boolean Default Value: true

---

dataProviderID

The bound data provider identifier representing the Date value. Type: Dataprovider

---

enabled

Flag indicating whether the calendar is enabled for user interaction. Type: Enabled Default Value: true

---

format

The date format string used to display and parse the date. Type: Format

---

options

See https://getdatepicker.com/6/options/ what options you can set, some could be overridden by the locale again Type: Json

---

pickerOnly

Whether to only allow date entry from the date picker or not (cannot type the date). Type: Boolean Default Value: false

---

placeholderText

Placeholder text displayed when no date is selected. Type: Tagstring

---

selectOnEnter

Whether to select the text when date field is focused. Type: Boolean

---

styleClass

Set the styleclasses that should be applied at to this component Type: Styleclass Default Value: "form-control"

---

tabSeq

The tab sequence order for keyboard navigation. Type: Tabseq

---

theme

The visual theme applied to the calendar (e.g. light or dark). Type: String Default Value: "light"

---

toolTipText

The tooltip text shown when hovering over the calendar. Type: Tagstring

---

visible

Whether the button is visible or not Type: Visible

---

Events

onActionMethodID(event)

@param {JSEvent} event The event object containing information about the action event

Parameters:

• {JSEvent} event

---

onDataChangeMethodID(oldValue,newValue,event)

Handle changed data, return false if the value should not be accepted. JSEvent.data will contain extra information about dataproviderid, its scope and the scope id (record datasource or form/global variable scope)

Parameters:

• {${dataproviderType}} oldValue The previous date value from the data provider
• {${dataproviderType}} newValue The new date value to be set in the data provider
• {JSEvent} event The event object associated with the data change

Returns: {Boolean}

---

onFocusGainedMethodID(event)

@param {JSEvent} event The event object containing details about the focus event

Parameters:

• {JSEvent} event

---

onFocusLostMethodID(event)

@param {JSEvent} event The event object containing details about the focus loss event

Parameters:

• {JSEvent} event

---

API

disableDates(dateArray,keepInvalid)

Dates that should be disabled.

Parameters:

• {Array<Date>} dateArray An array of dates to be disabled in the component.

• {Boolean} [keepInvalid] A flag indicating whether to retain previously disabled dates that are no longer valid (true) or to remove them (false).

---

disableDays(dayArray,keepInvalid)

Days of the week that should be disabled. Values are 0 (Sunday) to 6 (Saturday).

Parameters:

• {Array<Number>} dayArray An array of numbers representing the days of the week to be disabled, where 0 corresponds to Sunday and 6 to Saturday.

• {Boolean} [keepInvalid] A flag indicating whether to retain previously disabled days that are no longer valid (true) or to remove them (false).

---

requestFocus(mustExecuteOnFocusGainedMethod)

Set the focus to this calendar.

Example:

myElement.requestFocus();

Parameters:

• {Boolean} [mustExecuteOnFocusGainedMethod] if false will not execute the onFocusGained method; the default value is true

---

setMinMaxDate(minDate,maxDate,keepInvalid)

Set the min date or max date that can be selected

Parameters:

• {Date} minDate The earliest date that can be selected in the component.

• {Date} maxDate The latest date that can be selected in the component.

• {Boolean} [keepInvalid] Optional. A flag indicating whether to retain previously restricted dates that are no longer valid (true) or to remove them (false).

---

---