# Date Picker

<figure><img src="https://27923732-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F1FUd4apB9YHgCEMUFbVb%2Fuploads%2F7hqEunmbEzZvuCf0IVvp%2Fimage%20(68).avif?alt=media&#x26;token=914f3cea-4778-4f1b-a5d8-817a7ee69f4a" 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](https://docs.avonnicomponents.com/flow/component-builder/interactions-panel) 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](https://docs.avonnicomponents.com/flow/component-builder/style-panel).

## Examples

<figure><img src="https://27923732-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F1FUd4apB9YHgCEMUFbVb%2Fuploads%2FZtp5DA0zyHQgQjKkxMIV%2F2022-10-06_15-16-14.png?alt=media&#x26;token=d0fbe9d7-3cd0-4b82-aa94-933bc4b84003" 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.      |