> ## 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.

# DateField Date Picker

> Documentation for the DateField Date Picker component, covering property configurations such as date format and allowed values. Users can enter a specific date through a pop-up panel.

## When to Use

* To enter or select a specific date. When users need to enter a date, they can click the standard input box to open a date panel for 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 `custom`.                                                               | `(current: number)=> boolean`                                                      | -                 |
| `end`              | Date end time. Takes effect when the **type** property is `duration`.                                                                  | `number`                                                                           | -                 |
| `format`           | Date format                                                                                                                            | `'YYYY' \| 'YYYY-MM' \| 'YYYY-MM-DD'\| 'YYYY-MM-DD HH:mm'\| 'YYYY-MM-DD HH:mm:ss'` | `'YYYY-MM-DD'`    |
| `hasClear`         | Whether to display a clear button                                                                                                      | `boolean`                                                                          | `true`            |
| `label`            | Title of the form component                                                                                                            | `string`                                                                           | -                 |
| `labelAlign`       | Location of the form component title                                                                                                   | `'left' \| 'top'`                                                                  | `'top'`           |
| `labelColOffset`   | Sets the offset position of the title. The value is a grid value, where 1 represents 1/24.                                             | `number`                                                                           | `0`               |
| `labelColSpan`     | Sets the width of the title. The value is a grid value, 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 tip. Takes effect when `labelTipsTypes` is set to **text** or **render**.                      | `string`                                                                           | -                 |
| `labelTipsRender`  | Custom render method for the form component title tip. Takes effect when `labelTipsTypes` is set to **render**.                        | `(props: IComponentProps) => ReactNode`                                            | -                 |
| `labelTipsText`    | Tip text for the form component title. Takes effect when `labelTipsTypes` is set to **text**.                                          | `string`                                                                           | -                 |
| `labelTipsTypes`   | Type setting for the form component title tip                                                                                          | [LabelTipsTypes](/open/yida/components/interface#labeltipstypes)                   | `'none'`          |
| `onChange`         | Event triggered when the component value changes                                                                                       | `({value: number})=> void`                                                         | -                 |
| `onOk`             | Event triggered when Confirm is clicked                                                                                                | `({value: number})=> void`                                                         | -                 |
| `onVisibleChange`  | Event triggered when the pop-up layer is shown or hidden                                                                               | `(visible: boolean) => void`                                                       | -                 |
| `placeholder`      | Placeholder tip                                                                                                                        | `string`                                                                           | `'Please select'` |
| `resetTime`        | Whether to reset the time each time a date is selected                                                                                 | `boolean`                                                                          | `false`           |
| `returnType`       | Return type of the date                                                                                                                | `'timestamp' \| 'string' \| 'moment'`                                              | `'timestamp'`     |
| `size`             | Size of the form component                                                                                                             | [Size](/open/yida/components/interface#size)                                       | `'medium'`        |
| `start`            | Date start time. Takes effect when the **type** property is `duration`.                                                                | `number`                                                                           | -                 |
| `tips`             | Description of the form component, displayed below the control                                                                         | `string`                                                                           | -                 |
| `type`             | Time restriction range                                                                                                                 | `'none' \| 'beforeToday' \| 'afterToday'\| 'duration'\| 'custom'`                  | `'none'`          |
| `validation`       | Validation settings for the form component. For details, see the [form validation documentation](/open/yida/guide/concept/validation). | [Validation\[\]](/open/yida/components/interface#validation)                       | `[]`              |
| `value`            | Default value of the date picker                                                                                                       | `number`                                                                           | -                 |
| `wrapperColOffset` | Sets the offset position of the form component. The value is a grid value, where 1 represents 1/24.                                    | `number`                                                                           | `0`               |
| `wrapperColSpan`   | Sets the width of the form component. The value is a grid value, where 1 represents 1/24.                                              | `number`                                                                           | `0`               |