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:
{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:
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?