> ## Documentation Index
> Fetch the complete documentation index at: https://help.dingtalk.io/llms.txt
> Use this file to discover all available pages before exploring further.

# CascadeDateField Date Range

> Reference for the CascadeDateField date range component. Covers range formats, date restrictions, and other property configurations. Users select the start and end dates through a pop-up panel.

## When to Use

* Enter or select a date range. When users need to enter a date range, click the standard input box to open the date panel and make a selection.

## Component Example

## Component Properties

| Attribute          | Description                                                                                                         | Type                                                                                                | Default           |
| ------------------ | ------------------------------------------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------- | ----------------- |
| `behavior`         | Display state of the form component                                                                                 | [Behavior](/open/yida/components/interface#behavior)                                                | `'NORMAL'`        |
| `disabledDate`     | Custom restriction. Takes effect when the **type** property is set to custom                                        | `(current: number)=> boolean`                                                                       | -                 |
| `format`           | Display format of the date range component                                                                          | `'YYYY' \| 'YYYY-MM' \| 'YYYY-MM-DD' \| 'YYYY-MM-DD HH:mm' \| 'YYYY-MM-DD HH:mm'YYY-MM-DD HH:mm:ss` | `'YYY-MM-DD'`     |
| `hasClear`         | Whether to show the clear button                                                                                    | `boolean`                                                                                           | `true`            |
| `label`            | Title of the form component                                                                                         | `string`                                                                                            | -                 |
| `labelAlign`       | Location of the form component title                                                                                | `'left' \| 'top'`                                                                                   | `'top'`           |
| `labelColOffset`   | Offset location of the title. The value uses a grid system, where 1 represents 1/24                                 | `number`                                                                                            | `0`               |
| `labelColSpan`     | Width taken up by the title. The value uses a grid system, where 1 represents 1/24                                  | `number`                                                                                            | `4`               |
| `labelTextAlign`   | Title alignment of the form component                                                                               | `'left' \| 'right'`                                                                                 | `'right'`         |
| `labelTipsIcon`    | Entry icon for the form component title tips. Takes effect when labelTipsTypes is set to **text** or **render**     | `string`                                                                                            | -                 |
| `labelTipsRender`  | Custom render method for the form component title tips. Takes effect when labelTipsTypes is set to **render**       | `(props: IComponentProps) => ReactNode`                                                             | -                 |
| `labelTipsText`    | Tips text for the form component title. Takes effect when labelTipsTypes is set to **text**                         | `string`                                                                                            | -                 |
| `labelTipsTypes`   | Type of the form component title tips                                                                               | [LabelTipsTypes](/open/yida/components/interface#labeltipstypes)                                    | `'none'`          |
| `onChange`         | Event triggered when the component value changes                                                                    | `({value：object}) => void`                                                                          | -                 |
| `onOk`             | Event triggered when Confirm is clicked                                                                             | `(value: object) => void`                                                                           | -                 |
| `onVisibleChange`  | Event triggered when the pop-up panel is shown or hidden                                                            | `(visible：boolean) => void`                                                                         | -                 |
| `placeholder`      | Placeholder text of the form component                                                                              | `string`                                                                                            | `'Please select'` |
| `ranges`           | Quick range selection                                                                                               | `()=> number[]`                                                                                     | -                 |
| `resetTime`        | Whether to reset the time each time a date is selected                                                              | `boolean`                                                                                           | `false`           |
| `returnType`       | Return type of the date range                                                                                       | `'timestamp' \| 'string' \| 'moment'`                                                               | `'timestamp'`     |
| `size`             | Size of the form component                                                                                          | [Size](/open/yida/components/interface#size)                                                        | `'medium'`        |
| `tips`             | Description of the form component, displayed below the control                                                      | `string`                                                                                            | -                 |
| `validation`       | Form validation settings. For details, see the [form validation documentation](/open/yida/guide/concept/validation) | [Validation\[\]](/open/yida/components/interface#validation)                                        | `[]`              |
| `value`            | Default value of the form component                                                                                 | `number[]`                                                                                          | -                 |
| `wrapperColOffset` | Offset location of the form component. The value uses a grid system, where 1 represents 1/24                        | `number`                                                                                            | `0`               |
| `wrapperColSpan`   | Width taken up by the form component. The value uses a grid system, where 1 represents 1/24                         | `number`                                                                                            | `0`               |