{"meta":"<h2 id=\"Guide\">Guide <a class=\"header-anchor scroll-count-item\" href=\"#Guide\" data-scroll-id=\"Guide\">#</a></h2>\n<p>DatePicker are used to select a single date for an input.</p>\n","api":"<h2 id=\"API\">API <a class=\"header-anchor scroll-count-item\" href=\"#API\" data-scroll-id=\"API\">#</a></h2>\n<h3 id=\"Date Picker\">DatePicker <a class=\"header-anchor scroll-count-item\" href=\"#Date Picker\" data-scroll-id=\"Date Picker\">#</a></h3>\n<table>\n<thead>\n<tr>\n<th>Param</th>\n<th>Description</th>\n<th>Type</th>\n<th>Default Value</th>\n<th>Required</th>\n</tr>\n</thead>\n<tbody>\n<tr>\n<td>label</td>\n<td>Inset label of input</td>\n<td>React.ReactNode</td>\n<td>-</td>\n<td></td>\n</tr>\n<tr>\n<td>state</td>\n<td>Input status</td>\n<td>&apos;success&apos; | &apos;loading&apos; | &apos;error&apos;</td>\n<td>-</td>\n<td></td>\n</tr>\n<tr>\n<td>placeholder</td>\n<td>Placeholder</td>\n<td>string</td>\n<td>-</td>\n<td></td>\n</tr>\n<tr>\n<td>defaultVisibleMonth</td>\n<td>Default displayed month</td>\n<td>() =&gt; Moment</td>\n<td>-</td>\n<td></td>\n</tr>\n<tr>\n<td>defaultVisibleYear</td>\n<td>Default displayed year</td>\n<td>() =&gt; Moment</td>\n<td>-</td>\n<td></td>\n</tr>\n<tr>\n<td>value</td>\n<td>Date value, moment object, controlled</td>\n<td>string | Moment | null</td>\n<td>-</td>\n<td></td>\n</tr>\n<tr>\n<td>defaultValue</td>\n<td>Initial date value, moment object, uncontrolled</td>\n<td>string | Moment | null</td>\n<td>-</td>\n<td></td>\n</tr>\n<tr>\n<td>format</td>\n<td>Date value format(for restricting user input and display)</td>\n<td>string</td>\n<td>&apos;YYYY-MM</td>\n<td></td>\n</tr>\n<tr>\n<td>showTime</td>\n<td>Whether to use time control, pass the props of TimePicker { defaultValue, format, ... }</td>\n<td>TimePickerProps | boolean</td>\n<td>false</td>\n<td></td>\n</tr>\n<tr>\n<td>resetTime</td>\n<td>Whether to reset time when selecting a date(only valid when showTime is enabled)</td>\n<td>boolean</td>\n<td>false</td>\n<td></td>\n</tr>\n<tr>\n<td>disabledDate</td>\n<td>Disable date function</td>\n<td>(date: Moment, view: string) =&gt; boolean</td>\n<td>-</td>\n<td></td>\n</tr>\n<tr>\n<td>footerRender</td>\n<td>Custom panel footer</td>\n<td>() =&gt; React.ReactNode</td>\n<td>-</td>\n<td></td>\n</tr>\n<tr>\n<td>onChange</td>\n<td>Callback when the date value changes</td>\n<td>(value: string | Moment | null) =&gt; void</td>\n<td>-</td>\n<td></td>\n</tr>\n<tr>\n<td>onOk</td>\n<td>Callback when the confirm button is clicked</td>\n<td>(value: string | Moment | null) =&gt; void</td>\n<td>-</td>\n<td></td>\n</tr>\n<tr>\n<td>size</td>\n<td>Input box size</td>\n<td>&apos;small&apos; | &apos;medium&apos; | &apos;large&apos;</td>\n<td>&apos;medium&apos;</td>\n<td></td>\n</tr>\n<tr>\n<td>disabled</td>\n<td>Whether to disable</td>\n<td>boolean</td>\n<td>-</td>\n<td></td>\n</tr>\n<tr>\n<td>hasClear</td>\n<td>Whether to display the clear button</td>\n<td>boolean</td>\n<td>true</td>\n<td></td>\n</tr>\n<tr>\n<td>visible</td>\n<td>Pop</td>\n<td>boolean</td>\n<td>-</td>\n<td></td>\n</tr>\n<tr>\n<td>defaultVisible</td>\n<td>Pop</td>\n<td>boolean</td>\n<td>false</td>\n<td></td>\n</tr>\n<tr>\n<td>onVisibleChange</td>\n<td>Callback when the pop</td>\n<td>(visible: boolean, reason: string) =&gt; void</td>\n<td>-</td>\n<td></td>\n</tr>\n<tr>\n<td>onVisibleMonthChange</td>\n<td>Callback when the pop</td>\n<td>(value: Moment, reason: string) =&gt; void</td>\n<td>-</td>\n<td></td>\n</tr>\n<tr>\n<td>popupTriggerType</td>\n<td>Pop</td>\n<td>&apos;click&apos; | &apos;hover&apos;</td>\n<td>&apos;click&apos;</td>\n<td></td>\n</tr>\n<tr>\n<td>popupAlign</td>\n<td>Pop</td>\n<td>string</td>\n<td>&apos;tl tl&apos;</td>\n<td></td>\n</tr>\n<tr>\n<td>popupContainer</td>\n<td>Pop</td>\n<td>PopupProps[&apos;container&apos;]</td>\n<td>-</td>\n<td></td>\n</tr>\n<tr>\n<td>popupStyle</td>\n<td>Pop</td>\n<td>React.CSSProperties</td>\n<td>-</td>\n<td></td>\n</tr>\n<tr>\n<td>popupClassName</td>\n<td>Pop</td>\n<td>string</td>\n<td>-</td>\n<td></td>\n</tr>\n<tr>\n<td>popupProps</td>\n<td>Pop</td>\n<td>React.PropsWithRef&lt;PopupProps&gt;</td>\n<td>-</td>\n<td></td>\n</tr>\n<tr>\n<td>inputProps</td>\n<td>Input box other attributes</td>\n<td>InputProps</td>\n<td>-</td>\n<td></td>\n</tr>\n<tr>\n<td>dateCellRender</td>\n<td>Custom date rendering function</td>\n<td>(calendarDate: Moment) =&gt; React.ReactNode</td>\n<td>-</td>\n<td></td>\n</tr>\n<tr>\n<td>monthCellRender</td>\n<td>Custom month rendering function</td>\n<td>(calendarDate: Moment) =&gt; React.ReactNode</td>\n<td>-</td>\n<td></td>\n</tr>\n<tr>\n<td>yearCellRender</td>\n<td>Custom year rendering function</td>\n<td>(calendarDate: Moment) =&gt; React.ReactNode</td>\n<td>-</td>\n<td></td>\n</tr>\n<tr>\n<td>dateInputAriaLabel</td>\n<td>Date input box aria</td>\n<td>string</td>\n<td>-</td>\n<td></td>\n</tr>\n<tr>\n<td>timeInputAriaLabel</td>\n<td>Time input box aria</td>\n<td>string</td>\n<td>-</td>\n<td></td>\n</tr>\n<tr>\n<td>isPreview</td>\n<td>Whether it is a preview state</td>\n<td>boolean</td>\n<td>-</td>\n<td></td>\n</tr>\n<tr>\n<td>renderPreview</td>\n<td>Preview state custom rendering function</td>\n<td>(value: Moment | null, props: DatePickerProps) =&gt; React.ReactNode</td>\n<td>-</td>\n<td></td>\n</tr>\n<tr>\n<td>followTrigger</td>\n<td>Whether Pop</td>\n<td>boolean</td>\n<td>-</td>\n<td></td>\n</tr>\n<tr>\n<td>popupComponent</td>\n<td>Custom pop</td>\n<td>React.ComponentType&lt;unknown&gt;</td>\n<td>-</td>\n<td></td>\n</tr>\n<tr>\n<td>popupContent</td>\n<td>Custom pop</td>\n<td>React.ReactElement</td>\n<td>-</td>\n<td></td>\n</tr>\n<tr>\n<td>disableChangeMode</td>\n<td>Disable date selection</td>\n<td>boolean</td>\n<td>-</td>\n<td></td>\n</tr>\n<tr>\n<td>yearRange</td>\n<td>Year range, [START_YEAR, END_YEAR]</td>\n<td>[start: number, end: number]</td>\n<td>-</td>\n<td></td>\n</tr>\n</tbody>\n</table>\n<h3 id=\"Date Picker Month Picker\">DatePicker.MonthPicker <a class=\"header-anchor scroll-count-item\" href=\"#Date Picker Month Picker\" data-scroll-id=\"Date Picker Month Picker\">#</a></h3>\n<table>\n<thead>\n<tr>\n<th>Param</th>\n<th>Description</th>\n<th>Type</th>\n<th>Default Value</th>\n<th>Required</th>\n</tr>\n</thead>\n<tbody>\n<tr>\n<td>label</td>\n<td>Inset label of input</td>\n<td>React.ReactNode</td>\n<td>-</td>\n<td></td>\n</tr>\n<tr>\n<td>state</td>\n<td>Input status</td>\n<td>&apos;success&apos; | &apos;loading&apos; | &apos;error&apos;</td>\n<td>-</td>\n<td></td>\n</tr>\n<tr>\n<td>placeholder</td>\n<td>Placeholder</td>\n<td>string</td>\n<td>-</td>\n<td></td>\n</tr>\n<tr>\n<td>defaultVisibleYear</td>\n<td>Default displayed year</td>\n<td>() =&gt; Moment | null</td>\n<td>-</td>\n<td></td>\n</tr>\n<tr>\n<td>value</td>\n<td>Date value, moment object, controlled</td>\n<td>string | Moment | null</td>\n<td>-</td>\n<td></td>\n</tr>\n<tr>\n<td>defaultValue</td>\n<td>Initial date value, moment object, uncontrolled</td>\n<td>string | Moment | null</td>\n<td>-</td>\n<td></td>\n</tr>\n<tr>\n<td>format</td>\n<td>Date value format(for restricting user input and display)</td>\n<td>string</td>\n<td>&apos;YYYY</td>\n<td></td>\n</tr>\n<tr>\n<td>disabledDate</td>\n<td>Disable date function</td>\n<td>(date: Moment, view: string) =&gt; boolean</td>\n<td>-</td>\n<td></td>\n</tr>\n<tr>\n<td>footerRender</td>\n<td>Custom panel footer</td>\n<td>() =&gt; React.ReactNode</td>\n<td>-</td>\n<td></td>\n</tr>\n<tr>\n<td>onChange</td>\n<td>Callback when the date value changes</td>\n<td>(value: Moment | string | null) =&gt; void</td>\n<td>-</td>\n<td></td>\n</tr>\n<tr>\n<td>size</td>\n<td>Input box size</td>\n<td>&apos;small&apos; | &apos;medium&apos; | &apos;large&apos;</td>\n<td>&apos;medium&apos;</td>\n<td></td>\n</tr>\n<tr>\n<td>disabled</td>\n<td>Whether to disable</td>\n<td>boolean</td>\n<td>-</td>\n<td></td>\n</tr>\n<tr>\n<td>hasClear</td>\n<td>Whether to display the clear button</td>\n<td>boolean</td>\n<td>true</td>\n<td></td>\n</tr>\n<tr>\n<td>visible</td>\n<td>Pop</td>\n<td>boolean</td>\n<td>-</td>\n<td></td>\n</tr>\n<tr>\n<td>defaultVisible</td>\n<td>Pop</td>\n<td>boolean</td>\n<td>-</td>\n<td></td>\n</tr>\n<tr>\n<td>onVisibleChange</td>\n<td>Callback when the pop</td>\n<td>(visible: boolean, reason: string) =&gt; void</td>\n<td>-</td>\n<td></td>\n</tr>\n<tr>\n<td>popupTriggerType</td>\n<td>Pop</td>\n<td>&apos;click&apos; | &apos;hover&apos;</td>\n<td>&apos;click&apos;</td>\n<td></td>\n</tr>\n<tr>\n<td>popupAlign</td>\n<td>Pop</td>\n<td>string</td>\n<td>&apos;tl tl&apos;</td>\n<td></td>\n</tr>\n<tr>\n<td>popupContainer</td>\n<td>Pop</td>\n<td>PopupProps[&apos;container&apos;]</td>\n<td>-</td>\n<td></td>\n</tr>\n<tr>\n<td>popupStyle</td>\n<td>Pop</td>\n<td>React.CSSProperties</td>\n<td>-</td>\n<td></td>\n</tr>\n<tr>\n<td>popupClassName</td>\n<td>Pop</td>\n<td>string</td>\n<td>-</td>\n<td></td>\n</tr>\n<tr>\n<td>popupProps</td>\n<td>Pop</td>\n<td>React.PropsWithRef&lt;PopupProps&gt;</td>\n<td>-</td>\n<td></td>\n</tr>\n<tr>\n<td>popupComponent</td>\n<td>Custom pop</td>\n<td>React.ComponentType&lt;unknown&gt;</td>\n<td>-</td>\n<td></td>\n</tr>\n<tr>\n<td>popupContent</td>\n<td>Custom pop</td>\n<td>React.ReactElement</td>\n<td>-</td>\n<td></td>\n</tr>\n<tr>\n<td>followTrigger</td>\n<td>Whether Pop</td>\n<td>boolean</td>\n<td>-</td>\n<td></td>\n</tr>\n<tr>\n<td>inputProps</td>\n<td>Input box other attributes</td>\n<td>InputProps</td>\n<td>-</td>\n<td></td>\n</tr>\n<tr>\n<td>monthCellRender</td>\n<td>Custom month rendering function</td>\n<td>(calendarDate: Moment) =&gt; React.ReactNode</td>\n<td>-</td>\n<td></td>\n</tr>\n<tr>\n<td>dateInputAriaLabel</td>\n<td>Date input box aria</td>\n<td>string</td>\n<td>-</td>\n<td></td>\n</tr>\n<tr>\n<td>renderPreview</td>\n<td>Preview state custom rendering function</td>\n<td>(value: Moment | null, props: MonthPickerProps) =&gt; void</td>\n<td>-</td>\n<td></td>\n</tr>\n<tr>\n<td>yearCellRender</td>\n<td>Custom year rendering function</td>\n<td>(calendarDate: Moment) =&gt; React.ReactNode</td>\n<td>-</td>\n<td></td>\n</tr>\n<tr>\n<td>isPreview</td>\n<td>Whether it is a preview state</td>\n<td>boolean</td>\n<td>-</td>\n<td></td>\n</tr>\n</tbody>\n</table>\n<h3 id=\"Date Picker Range Picker\">DatePicker.RangePicker <a class=\"header-anchor scroll-count-item\" href=\"#Date Picker Range Picker\" data-scroll-id=\"Date Picker Range Picker\">#</a></h3>\n<table>\n<thead>\n<tr>\n<th>Param</th>\n<th>Description</th>\n<th>Type</th>\n<th>Default Value</th>\n<th>Required</th>\n</tr>\n</thead>\n<tbody>\n<tr>\n<td>type</td>\n<td>Date range type</td>\n<td>&apos;date&apos; | &apos;month&apos; | &apos;year&apos;</td>\n<td>-</td>\n<td></td>\n</tr>\n<tr>\n<td>defaultVisibleMonth</td>\n<td>Default displayed start month</td>\n<td>() =&gt; Moment | null</td>\n<td>-</td>\n<td></td>\n</tr>\n<tr>\n<td>placeholder</td>\n<td>Placeholder</td>\n<td>Array&lt;string&gt; | string</td>\n<td>-</td>\n<td></td>\n</tr>\n<tr>\n<td>value</td>\n<td>Date range value array [moment, moment]</td>\n<td>[start: Moment | string | null | undefined, end?: Moment | string | undefined | null]</td>\n<td>-</td>\n<td></td>\n</tr>\n<tr>\n<td>defaultValue</td>\n<td>Initial date range value array [moment, moment]</td>\n<td>[<br> start: Moment | string | null | undefined,<br> end?: Moment | string | undefined | null,<br> ]</td>\n<td>-</td>\n<td></td>\n</tr>\n<tr>\n<td>format</td>\n<td>Date value format(for restricting user input and display)</td>\n<td>string</td>\n<td>-</td>\n<td></td>\n</tr>\n<tr>\n<td>showTime</td>\n<td>Whether to use time control, pass the props of TimePicker { defaultValue, format, ... }</td>\n<td>| (Omit&lt;TimePickerProps, &apos;defaultValue&apos;&gt; &amp; {<br> defaultValue?: Moment | string | null | (Moment | string | null | undefined)[];<br> })<br> | boolean</td>\n<td>false</td>\n<td></td>\n</tr>\n<tr>\n<td>resetTime</td>\n<td>Whether to reset time when selecting a date(only valid when showTime is enabled)</td>\n<td>boolean</td>\n<td>false</td>\n<td></td>\n</tr>\n<tr>\n<td>disabledDate</td>\n<td>Disable date function</td>\n<td>(date: Moment, view: string) =&gt; boolean</td>\n<td>-</td>\n<td></td>\n</tr>\n<tr>\n<td>footerRender</td>\n<td>Custom panel footer</td>\n<td>() =&gt; React.ReactNode</td>\n<td>-</td>\n<td></td>\n</tr>\n<tr>\n<td>onChange</td>\n<td>Callback when the date range value changes</td>\n<td>(value: (string | Moment | null | undefined)[]) =&gt; void</td>\n<td>-</td>\n<td></td>\n</tr>\n<tr>\n<td>onOk</td>\n<td>Callback when the confirm button is clicked</td>\n<td>(value: (string | Moment | null | undefined)[]) =&gt; void</td>\n<td>-</td>\n<td></td>\n</tr>\n<tr>\n<td>label</td>\n<td>Inset label of input</td>\n<td>React.ReactNode</td>\n<td>-</td>\n<td></td>\n</tr>\n<tr>\n<td>state</td>\n<td>Input status</td>\n<td>&apos;error&apos; | &apos;loading&apos; | &apos;success&apos;</td>\n<td>-</td>\n<td></td>\n</tr>\n<tr>\n<td>size</td>\n<td>Input box size</td>\n<td>&apos;small&apos; | &apos;medium&apos; | &apos;large&apos;</td>\n<td>&apos;medium&apos;</td>\n<td></td>\n</tr>\n<tr>\n<td>disabled</td>\n<td>Whether to disable</td>\n<td>boolean</td>\n<td>-</td>\n<td></td>\n</tr>\n<tr>\n<td>hasClear</td>\n<td>Whether to display the clear button</td>\n<td>boolean</td>\n<td>true</td>\n<td></td>\n</tr>\n<tr>\n<td>visible</td>\n<td>Pop</td>\n<td>boolean</td>\n<td>-</td>\n<td></td>\n</tr>\n<tr>\n<td>defaultVisible</td>\n<td>Pop</td>\n<td>boolean</td>\n<td>false</td>\n<td></td>\n</tr>\n<tr>\n<td>onVisibleChange</td>\n<td>Callback when the pop</td>\n<td>(visible: boolean, reason: string) =&gt; void</td>\n<td>-</td>\n<td></td>\n</tr>\n<tr>\n<td>popupTriggerType</td>\n<td>Pop</td>\n<td>&apos;click&apos; | &apos;hover&apos;</td>\n<td>&apos;click&apos;</td>\n<td></td>\n</tr>\n<tr>\n<td>popupAlign</td>\n<td>Pop</td>\n<td>string</td>\n<td>&apos;tl tl&apos;</td>\n<td></td>\n</tr>\n<tr>\n<td>popupContainer</td>\n<td>Pop</td>\n<td>PopupProps[&apos;container&apos;]</td>\n<td>-</td>\n<td></td>\n</tr>\n<tr>\n<td>popupStyle</td>\n<td>Pop</td>\n<td>React.CSSProperties</td>\n<td>-</td>\n<td></td>\n</tr>\n<tr>\n<td>popupClassName</td>\n<td>Pop</td>\n<td>string</td>\n<td>-</td>\n<td></td>\n</tr>\n<tr>\n<td>popupProps</td>\n<td>Pop</td>\n<td>React.PropsWithRef&lt;PopupProps&gt;</td>\n<td>-</td>\n<td></td>\n</tr>\n<tr>\n<td>inputProps</td>\n<td>Input box other attributes</td>\n<td>InputProps</td>\n<td>-</td>\n<td></td>\n</tr>\n<tr>\n<td>dateCellRender</td>\n<td>Custom date rendering function</td>\n<td>() =&gt; void</td>\n<td>-</td>\n<td></td>\n</tr>\n<tr>\n<td>startDateInputAriaLabel</td>\n<td>Start date input box aria</td>\n<td>string</td>\n<td>-</td>\n<td></td>\n</tr>\n<tr>\n<td>startTimeInputAriaLabel</td>\n<td>Start time input box aria</td>\n<td>string</td>\n<td>-</td>\n<td></td>\n</tr>\n<tr>\n<td>endDateInputAriaLabel</td>\n<td>End date input box aria</td>\n<td>string</td>\n<td>-</td>\n<td></td>\n</tr>\n<tr>\n<td>endTimeInputAriaLabel</td>\n<td>End time input box aria</td>\n<td>string</td>\n<td>-</td>\n<td></td>\n</tr>\n<tr>\n<td>renderPreview</td>\n<td>Preview state custom rendering function</td>\n<td>(<br> value: [Moment | null, Moment | null],<br> props: RangePickerProps<br> ) =&gt; React.ReactNode</td>\n<td>-</td>\n<td></td>\n</tr>\n<tr>\n<td>onVisibleMonthChange</td>\n<td>Callback when the displayed month changes</td>\n<td>RangeCalendarProps[&apos;onVisibleMonthChange&apos;]</td>\n<td>-</td>\n<td></td>\n</tr>\n<tr>\n<td>popupComponent</td>\n<td>Custom pop</td>\n<td>React.ComponentType&lt;unknown&gt;</td>\n<td>-</td>\n<td></td>\n</tr>\n<tr>\n<td>popupContent</td>\n<td>Custom pop</td>\n<td>React.ReactElement</td>\n<td>-</td>\n<td></td>\n</tr>\n<tr>\n<td>monthCellRender</td>\n<td>Custom month rendering function</td>\n<td>(calendarDate: Moment) =&gt; React.ReactNode</td>\n<td>-</td>\n<td></td>\n</tr>\n<tr>\n<td>yearCellRender</td>\n<td>Custom year rendering function</td>\n<td>(calendarDate: Moment) =&gt; React.ReactNode</td>\n<td>-</td>\n<td></td>\n</tr>\n<tr>\n<td>followTrigger</td>\n<td>Whether Pop</td>\n<td>boolean</td>\n<td>-</td>\n<td></td>\n</tr>\n<tr>\n<td>isPreview</td>\n<td>Whether it is a preview state</td>\n<td>boolean</td>\n<td>-</td>\n<td></td>\n</tr>\n<tr>\n<td>yearRange</td>\n<td>Year range, [START_YEAR, END_YEAR]</td>\n<td>[start: number, end: number]</td>\n<td>-</td>\n<td></td>\n</tr>\n<tr>\n<td>disableChangeMode</td>\n<td>Disable date selection</td>\n<td>boolean</td>\n<td>false</td>\n<td></td>\n</tr>\n</tbody>\n</table>\n<h3 id=\"Date Picker Year Picker\">DatePicker.YearPicker <a class=\"header-anchor scroll-count-item\" href=\"#Date Picker Year Picker\" data-scroll-id=\"Date Picker Year Picker\">#</a></h3>\n<table>\n<thead>\n<tr>\n<th>Param</th>\n<th>Description</th>\n<th>Type</th>\n<th>Default Value</th>\n<th>Required</th>\n</tr>\n</thead>\n<tbody>\n<tr>\n<td>label</td>\n<td>Inset label of input</td>\n<td>React.ReactNode</td>\n<td>-</td>\n<td></td>\n</tr>\n<tr>\n<td>state</td>\n<td>Input status</td>\n<td>&apos;success&apos; | &apos;loading&apos; | &apos;error&apos;</td>\n<td>-</td>\n<td></td>\n</tr>\n<tr>\n<td>placeholder</td>\n<td>Input prompt</td>\n<td>string</td>\n<td>-</td>\n<td></td>\n</tr>\n<tr>\n<td>value</td>\n<td>Date value (controlled) moment object</td>\n<td>string | Moment | null</td>\n<td>-</td>\n<td></td>\n</tr>\n<tr>\n<td>defaultValue</td>\n<td>Initial date value, moment object</td>\n<td>string | Moment | null</td>\n<td>-</td>\n<td></td>\n</tr>\n<tr>\n<td>format</td>\n<td>Date value format (for limiting user input and display)</td>\n<td>string</td>\n<td>&apos;YYYY&apos;</td>\n<td></td>\n</tr>\n<tr>\n<td>disabledDate</td>\n<td>Disable date function</td>\n<td>(date: Moment, view: string) =&gt; boolean</td>\n<td>-</td>\n<td></td>\n</tr>\n<tr>\n<td>footerRender</td>\n<td>Custom panel footer</td>\n<td>() =&gt; React.ReactNode</td>\n<td>-</td>\n<td></td>\n</tr>\n<tr>\n<td>onChange</td>\n<td>Callback when the date value changes</td>\n<td>(value: Moment | string | null) =&gt; void</td>\n<td>-</td>\n<td></td>\n</tr>\n<tr>\n<td>size</td>\n<td>Input box size</td>\n<td>&apos;small&apos; | &apos;medium&apos; | &apos;large&apos;</td>\n<td>&apos;medium&apos;</td>\n<td></td>\n</tr>\n<tr>\n<td>disabled</td>\n<td>Whether it is disabled</td>\n<td>boolean</td>\n<td>-</td>\n<td></td>\n</tr>\n<tr>\n<td>hasClear</td>\n<td>Whether to display the clear button</td>\n<td>boolean</td>\n<td>true</td>\n<td></td>\n</tr>\n<tr>\n<td>visible</td>\n<td>Pop</td>\n<td>boolean</td>\n<td>-</td>\n<td></td>\n</tr>\n<tr>\n<td>defaultVisible</td>\n<td>Pop</td>\n<td>boolean</td>\n<td>-</td>\n<td></td>\n</tr>\n<tr>\n<td>onVisibleChange</td>\n<td>Callback when the pop</td>\n<td>(visible: boolean, reason: string) =&gt; void</td>\n<td>-</td>\n<td></td>\n</tr>\n<tr>\n<td>popupTriggerType</td>\n<td>Pop</td>\n<td>&apos;click&apos; | &apos;hover&apos;</td>\n<td>&apos;click&apos;</td>\n<td></td>\n</tr>\n<tr>\n<td>popupAlign</td>\n<td>Pop</td>\n<td>string</td>\n<td>&apos;tl tl&apos;</td>\n<td></td>\n</tr>\n<tr>\n<td>popupContainer</td>\n<td>Pop</td>\n<td>PopupProps[&apos;container&apos;]</td>\n<td>-</td>\n<td></td>\n</tr>\n<tr>\n<td>popupStyle</td>\n<td>Pop</td>\n<td>React.CSSProperties</td>\n<td>-</td>\n<td></td>\n</tr>\n<tr>\n<td>popupClassName</td>\n<td>Pop</td>\n<td>string</td>\n<td>-</td>\n<td></td>\n</tr>\n<tr>\n<td>popupProps</td>\n<td>Pop</td>\n<td>React.PropsWithRef&lt;PopupProps&gt;</td>\n<td>-</td>\n<td></td>\n</tr>\n<tr>\n<td>inputProps</td>\n<td>Input box other attributes</td>\n<td>InputProps</td>\n<td>-</td>\n<td></td>\n</tr>\n<tr>\n<td>dateInputAriaLabel</td>\n<td>Date input box aria</td>\n<td>string</td>\n<td>-</td>\n<td></td>\n</tr>\n<tr>\n<td>renderPreview</td>\n<td>Preview state custom rendering function</td>\n<td>(value: Moment | null, props: DatePickerProps) =&gt; React.ReactNode</td>\n<td>-</td>\n<td></td>\n</tr>\n<tr>\n<td>popupComponent</td>\n<td>Custom pop</td>\n<td>React.ComponentType&lt;unknown&gt;</td>\n<td>-</td>\n<td></td>\n</tr>\n<tr>\n<td>popupContent</td>\n<td>Custom pop</td>\n<td>React.ReactElement</td>\n<td>-</td>\n<td></td>\n</tr>\n<tr>\n<td>followTrigger</td>\n<td>Whether Pop</td>\n<td>boolean</td>\n<td>-</td>\n<td></td>\n</tr>\n<tr>\n<td>yearCellRender</td>\n<td>Custom year rendering function</td>\n<td>(calendarDate: Moment) =&gt; React.ReactNode</td>\n<td>-</td>\n<td></td>\n</tr>\n<tr>\n<td>isPreview</td>\n<td>Whether it is a preview state</td>\n<td>boolean</td>\n<td>-</td>\n<td></td>\n</tr>\n</tbody>\n</table>\n<h3 id=\"Date Picker Week Picker\">DatePicker.WeekPicker <a class=\"header-anchor scroll-count-item\" href=\"#Date Picker Week Picker\" data-scroll-id=\"Date Picker Week Picker\">#</a></h3>\n<table>\n<thead>\n<tr>\n<th>Param</th>\n<th>Description</th>\n<th>Type</th>\n<th>Default Value</th>\n<th>Required</th>\n</tr>\n</thead>\n<tbody>\n<tr>\n<td>value</td>\n<td>Date value (controlled) moment object</td>\n<td>string | Moment | null</td>\n<td>-</td>\n<td></td>\n</tr>\n<tr>\n<td>defaultValue</td>\n<td>Initial date value, moment object</td>\n<td>string | Moment | null</td>\n<td>-</td>\n<td></td>\n</tr>\n<tr>\n<td>visible</td>\n<td>Pop</td>\n<td>boolean</td>\n<td>-</td>\n<td></td>\n</tr>\n<tr>\n<td>defaultVisible</td>\n<td>Pop</td>\n<td>boolean</td>\n<td>-</td>\n<td></td>\n</tr>\n<tr>\n<td>format</td>\n<td>Date value format (for limiting user input and display)</td>\n<td>string</td>\n<td>&apos;GGGG</td>\n<td></td>\n</tr>\n<tr>\n<td>onChange</td>\n<td>Callback when the date value changes</td>\n<td>(value: Moment | string | null) =&gt; void</td>\n<td>-</td>\n<td></td>\n</tr>\n<tr>\n<td>onVisibleChange</td>\n<td>Callback when the pop</td>\n<td>(visible: boolean, reason: string) =&gt; void</td>\n<td>-</td>\n<td></td>\n</tr>\n<tr>\n<td>renderPreview</td>\n<td>Preview state custom rendering function</td>\n<td>(value: Moment | null, props: DatePickerProps) =&gt; React.ReactNode</td>\n<td>-</td>\n<td></td>\n</tr>\n<tr>\n<td>dateCellRender</td>\n<td>Custom date rendering function</td>\n<td>(calendarDate: Moment) =&gt; React.ReactNode</td>\n<td>-</td>\n<td></td>\n</tr>\n<tr>\n<td>label</td>\n<td>Input box built</td>\n<td>React.ReactNode</td>\n<td>-</td>\n<td></td>\n</tr>\n<tr>\n<td>state</td>\n<td>Input box status</td>\n<td>&apos;success&apos; | &apos;loading&apos; | &apos;error&apos;</td>\n<td>-</td>\n<td></td>\n</tr>\n<tr>\n<td>defaultVisibleMonth</td>\n<td>Default displayed month</td>\n<td>() =&gt; Moment</td>\n<td>false</td>\n<td></td>\n</tr>\n<tr>\n<td>onVisibleMonthChange</td>\n<td>Callback when the pop</td>\n<td>(value: Moment, reason: string) =&gt; void</td>\n<td>-</td>\n<td></td>\n</tr>\n<tr>\n<td>disabledDate</td>\n<td>Disable date function</td>\n<td>(date: Moment, view: string) =&gt; boolean</td>\n<td>-</td>\n<td></td>\n</tr>\n<tr>\n<td>footerRender</td>\n<td>Custom panel footer</td>\n<td>() =&gt; React.ReactNode</td>\n<td>-</td>\n<td></td>\n</tr>\n<tr>\n<td>size</td>\n<td>Input box size</td>\n<td>&apos;small&apos; | &apos;medium&apos; | &apos;large&apos;</td>\n<td>&apos;medium&apos;</td>\n<td></td>\n</tr>\n<tr>\n<td>disabled</td>\n<td>Whether to disable</td>\n<td>boolean</td>\n<td>-</td>\n<td></td>\n</tr>\n<tr>\n<td>hasClear</td>\n<td>Whether to display the clear button</td>\n<td>boolean</td>\n<td>true</td>\n<td></td>\n</tr>\n<tr>\n<td>popupTriggerType</td>\n<td>Pop</td>\n<td>&apos;click&apos; | &apos;hover&apos;</td>\n<td>&apos;click&apos;</td>\n<td></td>\n</tr>\n<tr>\n<td>popupAlign</td>\n<td>Pop</td>\n<td>string</td>\n<td>&apos;tl tl&apos;</td>\n<td></td>\n</tr>\n<tr>\n<td>popupContainer</td>\n<td>Pop</td>\n<td>PopupProps[&apos;container&apos;]</td>\n<td>-</td>\n<td></td>\n</tr>\n<tr>\n<td>popupStyle</td>\n<td>Pop</td>\n<td>React.CSSProperties</td>\n<td>-</td>\n<td></td>\n</tr>\n<tr>\n<td>popupClassName</td>\n<td>Pop</td>\n<td>string</td>\n<td>-</td>\n<td></td>\n</tr>\n<tr>\n<td>popupProps</td>\n<td>Pop</td>\n<td>React.PropsWithRef&lt;PopupProps&gt;</td>\n<td>-</td>\n<td></td>\n</tr>\n<tr>\n<td>popupComponent</td>\n<td>Custom pop</td>\n<td>React.ComponentType&lt;unknown&gt;</td>\n<td>-</td>\n<td></td>\n</tr>\n<tr>\n<td>popupContent</td>\n<td>Custom pop</td>\n<td>React.ReactElement</td>\n<td>-</td>\n<td></td>\n</tr>\n<tr>\n<td>followTrigger</td>\n<td>Whether Pop</td>\n<td>boolean</td>\n<td>-</td>\n<td></td>\n</tr>\n<tr>\n<td>inputProps</td>\n<td>Input box other attributes</td>\n<td>InputProps</td>\n<td>-</td>\n<td></td>\n</tr>\n<tr>\n<td>monthCellRender</td>\n<td>Custom month rendering function</td>\n<td>(calendarDate: Moment) =&gt; React.ReactNode</td>\n<td>-</td>\n<td></td>\n</tr>\n<tr>\n<td>yearCellRender</td>\n<td>Custom year rendering function</td>\n<td>(calendarDate: Moment) =&gt; React.ReactNode</td>\n<td>-</td>\n<td></td>\n</tr>\n<tr>\n<td>isPreview</td>\n<td>Whether it is a preview state</td>\n<td>boolean</td>\n<td>-</td>\n<td></td>\n</tr>\n</tbody>\n</table>\n<h2 id=\"ARIA And Key Board\">ARIA and KeyBoard <a class=\"header-anchor scroll-count-item\" href=\"#ARIA And Key Board\" data-scroll-id=\"ARIA And Key Board\">#</a></h2>\n<p>When the <code>Date Picker</code> is focused, press <code>enter</code> will open popup to input date or time.</p>\n<table>\n<thead>\n<tr>\n<th style=\"text-align:left\">&#x6309;&#x952E;</th>\n<th style=\"text-align:left\">&#x8BF4;&#x660E;</th>\n</tr>\n</thead>\n<tbody>\n<tr>\n<td style=\"text-align:left\">number key</td>\n<td style=\"text-align:left\">Need to manual input the date, the specified date format</td>\n</tr>\n<tr>\n<td style=\"text-align:left\">Enter</td>\n<td style=\"text-align:left\">open the calendar or select date after input date</td>\n</tr>\n<tr>\n<td style=\"text-align:left\">Esc</td>\n<td style=\"text-align:left\">close the calendar</td>\n</tr>\n<tr>\n<td style=\"text-align:left\">Up</td>\n<td style=\"text-align:left\">Input previous day&#xFF08;Month Picker is previous month&#xFF0C; Year Picker is previous year&#xFF09;</td>\n</tr>\n<tr>\n<td style=\"text-align:left\">Down</td>\n<td style=\"text-align:left\">Input next day&#xFF08;Month Picker is next month&#xFF0C; Year Picker is next year&#xFF09;</td>\n</tr>\n<tr>\n<td style=\"text-align:left\">Page Up</td>\n<td style=\"text-align:left\">Input previous month</td>\n</tr>\n<tr>\n<td style=\"text-align:left\">Page Down</td>\n<td style=\"text-align:left\">Input next month</td>\n</tr>\n<tr>\n<td style=\"text-align:left\">Alt + Page Up</td>\n<td style=\"text-align:left\">Input previous year</td>\n</tr>\n<tr>\n<td style=\"text-align:left\">Alt + Page Down</td>\n<td style=\"text-align:left\">Input next year</td>\n</tr>\n</tbody>\n</table>\n"}