Floatinglabel 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


errorMessage

Error message to be displayed if the entered date is invalid. Type: Tagstring


floatLabelText

Text to be shown as a floating label in the calendar input field. Type: Tagstring


format

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


pickerOnly

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


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:


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:

Returns: {Boolean}


onFocusGainedMethodID(event)

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

Parameters:


onFocusLostMethodID(event)

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

Parameters:


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).


toggleErrorMessage(show)

Toggles the display of the error message for the component.

Parameters:

  • {Boolean} show A flag indicating whether to show (true) or hide (false) the error message.



Last updated

Was this helpful?