# Date Picker

<figure><img src="/files/9rsEpNQcyhsbjmPOKfpM" alt="" width="375"><figcaption></figcaption></figure>

***

## Changing the Properties

### Choosing Selection mode

The Calendar Component can be configured as **`single`**, **`multiple`** or **`interval mode`**. Only one single value can be selected simultaneously with the Single mode. **`Multiple`** mode, the user can select multiple dates. With **`Interval`**, the user can only select a date range (two dates).

### Assigning Value

### Adding Disabled or Marked Dates

Array of disabled dates. Array of marked date objects. A maximum of three markers can be displayed on a same date.

***

## Adding Interactions

From the interactions panel, you can create interactions when users select a date or dates depending on the **`Selection Mode`** used. For example, you may want to redirect users to another screen or page when they select dates.&#x20;

Here is a complete [list of actions](/flow/component-builder/interactions-panel.md) you can add to the Date Picker.&#x20;

***

## Styling the Date Picker

From the Styles panel, you can customize styling attributes for the Date Picker:&#x20;

* **`Text`**: to customize the calendar text color.
* **`Background`**: to customize background colors for the Date Picker.
* **`Multi Selected Border`**: to customize styling settings when an interval is selected as a selection mode.

You can find the instructions for styling [here](/flow/component-builder/style-panel.md).

## Examples

<figure><img src="/files/ejbvECmvW7WPPViJ3qEN" alt="" width="278"><figcaption></figcaption></figure>

<table><thead><tr><th width="214">Setting</th><th>Value</th></tr></thead><tbody><tr><td>Selection Mode</td><td>Interval</td></tr><tr><td>Label</td><td>My Button Menu</td></tr><tr><td>Icon Size</td><td>Medium</td></tr><tr><td>Menu Alignment</td><td>Left</td></tr></tbody></table>

***

## Specifications

### Attributes

<table><thead><tr><th width="202">Name</th><th width="215.75836972343524">Type</th><th>Description</th></tr></thead><tbody><tr><td>disabled</td><td>Boolean</td><td>If true, the Date Picker is disabled.</td></tr><tr><td>disabledDates</td><td>Date[]</td><td>Array of disabled dates.</td></tr><tr><td>hideNavigation</td><td>Boolean</td><td>Specifies if the Date Picker header should be hidden.</td></tr><tr><td>markedDates</td><td>CalendarMarkedDate[]</td><td>Array of marked date objects. A maximum of three markers can be displayed on a same date.</td></tr><tr><td>max</td><td>Date</td><td>Specifies the maximum date, which the Date Picker can show.</td></tr><tr><td>min</td><td>Date</td><td>Specifies the minimum date, which the Date Picker can show.</td></tr><tr><td>selectionMode</td><td>String</td><td><p>Specifies the selection mode of the calendar. Valid values include single, multiple and interval.</p><p>If single, only one date can be selected at a time. If multiple, the user can select multiple dates.</p><p>If interval, the user can only select a date range (two dates).</p></td></tr><tr><td>value</td><td>Date</td><td>The value of the selected date(s).</td></tr><tr><td>weekNumber</td><td>Boolean</td><td>If true, display a week number column.</td></tr></tbody></table>

### Events

| Name   | Description                                        |
| ------ | -------------------------------------------------- |
| change | The event fired when the selected date is changed. |

### Styling Hooks

| Name                           | Description                                               |
| ------------------------------ | --------------------------------------------------------- |
| Text Color                     | To specify color for dates.                               |
| Disabled Text Color            | To specify color for disabled dates.                      |
| Today Text Color               | To specify color for today's date.                        |
| Weekdays Text Color            | To specify color for weekdays.                            |
| Month Text Color               | To specify color for month.                               |
| Selected Date Text Color       | To specify color on selected dates.                       |
| Background Color               | To specify a background color for the component.          |
| Background Color Hover         | To specify a background color for the component on hover. |
| Today Background Color         | To specify a background color for today's date.           |
| Selected Date Background Color | To specify a background color for selected dates.         |
| Multi Selected Border Color    | To specify a border color when multi dates are selected.  |
| Multi Selected Border Style    | To set a border style when multi dates are selected.      |


---

# 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.avonnicomponents.com/flow/flow-components/date-picker.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.