[comp:date-picker] 日期选择器

[danranVm]

• I have searched the issues of this repository and believe that this is not a duplicate.

What problem does this feature solve?

What does the proposed API look like?

API

DatePickerCommonProps

以下 Props 为 IxDatePicker、IxDateRangePicker 共享的属性。

名称	说明	类型	默认值	全局配置	备注
control	控件控制器	string | number | AbstractControl	-	-	配合 @idux/cdk/forms 使用, 参考 Form
v-model:open	日期面板是否展开	boolean	-	-	-
autofocus	默认获取焦点	boolean	false	-	-
borderless	是否无边框	boolean	false	✅	-
clearable	是否显示清除图标	boolean	false	✅	-
clearIcon	清除按钮图标	string	'close-circle'	✅	-
disabled	是否禁用状态	boolean	false	-	-
disabledDate	不可选择的日期	(date: any) => boolean	-	-	date 的类型为 outputFormat 的返回值类型
format	展示的格式	string	HH:mm:ss	✅	参考dayjs
outputFormat	输出的格式	(date: Dayjs) => number | string | Date | Dayjs	(date: Dayjs) => number	✅	默认输出的时间戳
overlayClassName	日期面板的 class	string	-	-	-
overlayRender	自定义日期面板内容的渲染	(children:VNode[]) => VNodeTypes	-	-	-
readonly	只读模式	boolean	-	-	-
size	设置选择器大小	'sm' | 'md' | 'lg'	md	✅	-
suffix	设置后缀图标	string | #suffix	'calendar'	✅	-
type	设置选择器类型	'date' | 'week' | 'month' | 'quarter' | 'year'	'date'	-	-
onClear	清除图标被点击后的回调	(evt: MouseEvent) => void	-	-	-
onFocus	获取焦点后的回调	(evt: FocusEvent) => void	-	-	-
onBlur	失去焦点后的回调	(evt: FocusEvent) => void	-	-	-

DatePickerCommonSlots

以下 Slots 为 IxDatePicker、IxDateRangePicker 共享的插槽。

名称	说明	参数类型	备注
footer	自定义日期面板中的页脚	-	-
option	自定义日期面板中的单元格	{date: any}	date 的类型为 outputFormat 的返回值类型

DatePickerCommonMethods

以下 Methods 为 IxDatePicker、IxDateRangePicker 共享的方法。

名称	说明	参数类型	备注
blur	移除焦点	(options?: FocusOptions) => void	-
focus	获取焦点	() => void	-

IxDatePicker

DatePickerProps

名称	说明	类型	默认值	全局配置	备注
v-model:value	当前选中的日期	number | string | Date | Dayjs	-	-	当传入一个 string 类型时，请指定时区信息
defaultOpenValue	打开面板时默认选中的值	number | string | Date | Dayjs	-	-	value 为空时，高亮的值
placeholder	选择框默认文本	string | #placeholder	-	-	默认使用 i18n 配置
timePicker	是否显示时间选择器	boolean | TimePickerProps	false	-	仅在 type='date' 时生效

IxDateRangePicker

DateRangePickerProps

名称	说明	类型	默认值	全局配置	备注
v-model:value	当前选中的日期	Array<number | string | Date | Dayjs>	-	-	当传入 string 类型时，请指定时区信息
defaultOpenValue	打开面板时默认选中的值	Array<number | string | Date | Dayjs>	-	-	value 为空时，高亮的值
placeholder	选择框默认文本	string[] | #placeholder=placement:'start'|'end'	-	-	默认使用 i18n 配置
separator	自定义分隔符图标	string | VNode | #separator	'swap-right'	✅	-
timePicker	是否显示时间选择器	boolean | TimePickerProps | TimePickerProps[]	false	-	如果需要对前后的时间选择器配置不同的禁用条件，可以传入一个数组

[idux-bot]

Translation of this issue:

[Comp: Date-Picker] Date Selector

• [] I have search the [Issues] (https://github.com/iduxfe/idux/issues) of this repository and believe That this is not a duplicate.

What proBLEES THIS Feature SOLVE?

What does the proposed API LOOK LIKE?

API

datepickercommonprops

The following props is the attribute shared for IxdateRregker, ingdateralagepicker

Name	Description	Type	Default	Global Configuration	Remarks
Control	Controller	` String \	Number \	AbstractControl`	-
V-model: Open	Date panel Expand	Boolean	-	-	-
Autofoccus	Default Get Focus	Boolean	false	-	-
Borderless	Whether bless box	Boolean	false	✅
Clearable	Whether to display clear icon	Boolean	false
Clearicon	Clear button icon	String	Close-circle	✅	-
DefaultopenValue	When you open the panel: The value selected by default	Date	-	-	If Value is not empty, the value of Value is highlight
DISABED	Whether to disable status	Boolean	false	-	-
DisabledDate	Unsent Date	(Current: Date) => Boolean	-	-
format	展	string	hh: mm: ss	✅	Reference [dayjs] (https://dayjs.gitee.io/docs/en-cn/display/format)
OverlayClassName	Due to the date panel`	String	-	-
OverlayRender	Custom Date Panel Rendering	(Children: vNode []) => vnodetypes	-	-
Placeholder	Select box Default Text	` String \	# Placeholder`	-	-
Readonly	Read-up mode	Boolean	-	-	-
size	Setting the selector size	` 'sm' \	'md' \	'lg'.	md
suffix	Set the suffix icon	` String \	# SUFFIX`	Calendar	✅
Type	Settings Selector Type	` 'Date' \	'Week' \	'MONTH' \	'Quarter' \

datepickercommonslots

The followings slots, ingdateRregker,` ingdateralagepicker shared slots.

Name	Description	Parameter Type	Remarks
Footer	Custom Footer in the Date Panel	-	-
Option	Customize cells in the Date panel	{date: Number}

datepickercommonMethods

The following Methods is a method for ixdatecker, ingdateralgengepicker

Name	Description	Parameter Type	Remarks
BLUR	Remove Focus	(Options ?: FocusOptions) => void
FOCUS	Get focus	() => void

ixdatepicker

DatePickerProps

Name	Description	Type	Default	Global Configuration	Remarks
v-model: value	Current Date	` Number \	String \	DATE \	Dayjs`
TIME	Whether to display the Time Selector	` Boolean \	TimePickerProps`	false	-

ixdateralgengepicker

DateRangePickerProps

Name	Description	Type	Default	Global Configuration	Remarks
v-model: value	Current Date	` Array <Number \	String \	DATE \	DAYJS> `
separator	Custom Delivery	` String \	() => vnode \	# separator`	-
Time	Whether to display the Time Selector	` Boolean \	TimePickerProps \	TimePickerProps [] `	false

[danranVm]

closed #559 #837