# Input Date Range

<figure><img src="/files/5DehgmloxPDQQCx2YY5r" alt="" width="375"><figcaption></figcaption></figure>

***

## Changing the Properties

### Adding a label

The Label field allows you to enter text to display for the Input Date range.

### Choosing a type

You can choose between Time and DateTime type for the Input Date Range. DateTime allows the end-users to specify a date and a time&#x20;

### Choosing a date format

3 different date format are available to customize the look and feel of the date and time displayed. You can choose from Short, Medium and Long.&#x20;

### Customizing Labels

Date and Time Labels can be customized if needed. For example, you can add Date Labels like From / To.

***

## Adding Interactions

Interactions define what happens when users select an icon. A list of interactions is available [here](/flow/component-builder/interactions-panel.md).

Here are the available Actions for the Input Date Range component:

* **`On Change`**

The event fired when the value changed.

***

## Styling the Input Date Range

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

* **`Header`**: to customize main label text
* **`Label`**: to customize Date / Time labels

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

## Examples

<figure><img src="/files/GlJRPSy3y86IG4fuedjO" alt=""><figcaption></figcaption></figure>

<table><thead><tr><th width="214">Property</th><th>Value</th></tr></thead><tbody><tr><td>Label</td><td>Select Dates</td></tr><tr><td>Type</td><td>Date</td></tr><tr><td>Variant</td><td>Standard</td></tr><tr><td>Format / Date Style </td><td>Short</td></tr><tr><td>Label / Start Date</td><td>Check-in</td></tr><tr><td>Label / End Date</td><td>Check-out</td></tr><tr><td>Style / Header Color</td><td>#0b5cab</td></tr><tr><td>Style / Font Size</td><td>16px</td></tr><tr><td>Style / Font Weight</td><td>700 - Bold</td></tr></tbody></table>


---

# 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/input-date-range.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.