@alicd/crui-date-range-picker NPM

category: Components type: UI Views component: Base chinese: 范围选择组件

english: DateRangePicker

API

DateRangePicker

参数	说明	类型	默认值
className	自定义组件样式类名	`string`	N/A
size	输入框大小可选值:'small', 'medium', 'large'	`"small"` 或 `"medium"` 或 `"large"`	`"medium"`
value	日期值	`[Date, Date]`	N/A
defaultValue	默认日期值	`[Date, Date]`	N/A
onChange	时间发生改变的回调	`(dateRange: [Date, Date], formatDateRange: [string, string]) => any`	N/A
disabledDate	日期禁用签名:Function(CalendarObject: Object) => Boolean参数:CalendarObject: {Object} null返回值:{Boolean} true 表示禁用，反之表示可用	Function	() => false
disabledHours	禁用指定的小时，同 TimePicker	Function	N/A
disabledMinutes	禁用指定的分钟，同 TimePicker	Function	N/A
disabledSeconds	禁用指定的秒钟，同 TimePicker	Function	N/A
defaultVisible	默认是否展开	`boolean`	N/A
visible	是否展开	`boolean`	N/A
onVisibleChange	当面板展开状态改变时的回调	`(visible: boolean) => void`	N/A
popupStyle	弹层样式	`object`	N/A
popupAlign	弹层对齐方式	`string`	`"tl tl"`
popupOffset	弹层偏移	`[number, number]`	`[0, 0]`
formater	日期值格式化	`[string, string]`	`["YYYY-MM-DD", "HH:mm:ss"]`
disabled	是否禁用	`boolean`	`false`
startDisabled	是否单独禁用开始时间选框	`boolean`	`false`
endDisabled	是否单独禁用结束时间选框	`boolean`	`false`
hasClear	是否有清空按钮	`boolean`	`true`
showTime	是否显示时间或传入 `{ defaultValue }` 设置时间初值	`boolean` 或 `{ defaultValue: string }` 或 `{ defaultValue: [string, string] }`	`false`
resetTime	重新选择时是否重置时间	`boolean`	`true`
readOnly	输入框是否只读	`boolean`	`false`
renderQuickTool	用于自定义弹层下方的工具栏，可配合 `ranges` 等工具函数使用	`(ops: { setValue; getValue; setVisible }) => ReactNode`	N/A

DateRangePicker.ranges

类型：

       (src: [ReactNode, [Date, Date]])
    => (ops: {
        setValue:   (value: [Date, Date]) => void;
        getValue:   () => [Date, Date];
        setVisible: (visible: boolean): void;
    })
    => ReactNode

指定在 DateRangePicker 的 renderQuickTool 上，用于自定义预设的快捷选择日期范围。

@infinitebrahmanuniverse/nolb-_alicd @everything-registry/sub-chunk-43 @alicd/crui @alicd/crui-date-range-picker-field @zalastax/nolb-_alicd

0.0.3

6 years ago