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

Type: Boolean Default Value: true

---

dataProviderID

Type: Dataprovider

---

enabled

Type: Enabled Default Value: true

---

format

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

Type: String

---

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

Type: Tabseq

---

theme

Type: String Default Value: "light"

---

toolTipText

Type: String

---

visible

Whether the button is visible or not

Type: Visible

---

Events

onActionMethodID(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

• {${dataproviderType}} newValue

• {JSEvent} event

Returns: {Boolean}

---

onFocusGainedMethodID(event)

Parameters:

• {JSEvent} event

---

onFocusLostMethodID(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<int>} 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).

---

---