# Floatinglabel Calendar

(part of package '[Bootstrap Components](/reference/servoyextensions/packages/ui-component-packages/bootstrap-components.md)')\
Extends designtime/SolutionModel: [JSWebComponent](/reference/servoycore/dev-api/solutionmodel/jswebcomponent.md)\
Extends runtime: [RuntimeWebComponent](/reference/servoycore/dev-api/forms/runtimeform/elements/runtimewebcomponent.md)

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](https://docs.servoy.com/guides/develop/application-design/ui-components).

## Properties

### calendarWeeks

Indicates whether calendar week numbers should be displayed. Type: [Boolean](/reference/servoycore/dev-api/js-lib/boolean.md) Default Value: true

***

### dataProviderID

The bound data provider identifier representing the Date value. Type: [Dataprovider](/reference/servoy-developer/component_and_service_property_types.md#dataprovider)

***

### enabled

Flag indicating whether the calendar is enabled for user interaction. Type: [Enabled](/reference/servoy-developer/component_and_service_property_types.md#protected) Default Value: true

***

### errorMessage

Error message to be displayed if the entered date is invalid. Type: [Tagstring](/reference/servoy-developer/component_and_service_property_types.md#tagstring)

***

### floatLabelText

Text to be shown as a floating label in the calendar input field. Type: [Tagstring](/reference/servoy-developer/component_and_service_property_types.md#tagstring)

***

### format

The date format string used to display and parse the date. Type: [Format](/reference/servoy-developer/component_and_service_property_types.md#format)

***

### pickerOnly

Whether to only allow date entry from the date picker or not (cannot type the date). Type: [Boolean](/reference/servoycore/dev-api/js-lib/boolean.md) Default Value: false

***

### selectOnEnter

Whether to select the text when date field is focused. Type: [Boolean](/reference/servoycore/dev-api/js-lib/boolean.md)

***

### styleClass

Set the styleclasses that should be applied at to this component Type: [Styleclass](/reference/servoy-developer/component_and_service_property_types.md#styleclass) Default Value: "form-control"

***

### tabSeq

The tab sequence order for keyboard navigation. Type: [Tabseq](/reference/servoy-developer/component_and_service_property_types.md#tabseq)

***

### theme

The visual theme applied to the calendar (e.g. light or dark). Type: [String](/reference/servoycore/dev-api/js-lib/string.md) Default Value: "light"

***

### toolTipText

The tooltip text shown when hovering over the calendar. Type: [Tagstring](/reference/servoy-developer/component_and_service_property_types.md#tagstring)

***

### visible

Whether the button is visible or not Type: [Visible](/reference/servoy-developer/component_and_service_property_types.md#visible)

***

## Events

### onActionMethodID(event)

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

**Parameters:**

> * {[JSEvent](/reference/servoycore/dev-api/application/jsevent.md)} 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}](/reference/servoy-developer/component_and_service_property_types.md#dataprovider)} oldValue The previous date value from the data provider
> * {[${dataproviderType}](/reference/servoy-developer/component_and_service_property_types.md#dataprovider)} newValue The new date value to be set in the data provider
> * {[JSEvent](/reference/servoycore/dev-api/application/jsevent.md)} event The event object associated with the data change

**Returns:** {[Boolean](/reference/servoycore/dev-api/js-lib/boolean.md)}

***

### onFocusGainedMethodID(event)

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

**Parameters:**

> * {[JSEvent](/reference/servoycore/dev-api/application/jsevent.md)} event

***

### onFocusLostMethodID(event)

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

**Parameters:**

> * {[JSEvent](/reference/servoycore/dev-api/application/jsevent.md)} event

***

## API

### disableDates(dateArray,keepInvalid)

Dates that should be disabled.

**Parameters:**

> * {[Array\<Date>](/reference/servoycore/dev-api/js-lib/date.md)} dateArray An array of dates to be disabled in the component.
> * {[Boolean](/reference/servoycore/dev-api/js-lib/boolean.md)} \[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>](/reference/servoycore/dev-api/js-lib/number.md)} dayArray An array of numbers representing the days of the week to be disabled, where 0 corresponds to Sunday and 6 to Saturday.
> * {[Boolean](/reference/servoycore/dev-api/js-lib/boolean.md)} \[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:**

```js
myElement.requestFocus();
```

**Parameters:**

> * {[Boolean](/reference/servoycore/dev-api/js-lib/boolean.md)} \[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](/reference/servoycore/dev-api/js-lib/date.md)} minDate The earliest date that can be selected in the component.
> * {[Date](/reference/servoycore/dev-api/js-lib/date.md)} maxDate The latest date that can be selected in the component.
> * {[Boolean](/reference/servoycore/dev-api/js-lib/boolean.md)} \[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](/reference/servoycore/dev-api/js-lib/boolean.md)} show A flag indicating whether to show (true) or hide (false) the error message.

***

***


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.servoy.com/reference/servoyextensions/ui-components/input-control/floatlabel-calendar.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.