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 上，用于自定义预设的快捷选择日期范围。