DateField Date Picker - DingTalk Help Center

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	`'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	`'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	`'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.	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`