1.3.1 • Published 2 years ago
@monsterooo/date-picker v1.3.1
title: DatePicker 日期选择框 nav: path: /components title: 组件 order: 1 group: title: 数据录入
order: 5
DatePicker 日期选择框
输入或选择日期的控件。
- 提供全局属性配置的能力:valueType 目前 DatePicker 组件仅支持 picker='date', 此场景在系统中应用的最多。通过配置 valueType 返回不同类型的日期值。
⚠️ 注意: 在 form 表单中使用时,若需要设置初始值,初始值的类型应和你设置的 valueType 返回类型保持一致。例如,你的 valueType='stampobject', 初始值应该设置为
{ startTime: moment().startOf('day').valueOf(), endTime: moment().endOf('day').valueOf() }
- 提供
日期+时间
和时间
选择的即选生效功能 antd 的日期组件当需要选时间的时候,需要点击确定
按钮。viking 的日期组件通过配置 immediately,控制点击时间的时候是否立马生效。
时间范围的交互方式和 antd 保持不变。
使用
import DatePicker from '@monsterooo/date-picker';
const {TimePicker} = DatePicker
<DatePicker />;
<TimePicker />
代码演示
参数
参数 | 说明 | 类型 | 默认值 |
---|---|---|---|
valueType | 时间组件返回值类型。详见ValueType | ValueType | - |
startKey | 当设置 valueType 为stampobject 时,开始时间返回的 key | string | 'startTime' |
endKey | 当设置 valueType 为stampobject 时,结束时间返回的 key | string | 'endTime' |
immediately | 即选生效(当选择时间/日期+时间时)配置 | boolean | false |
其他属性见 antd DatePicker
ValueType
/**
* timestamp 时间戳
* timestring 时间字符串
* stamparray 时间戳数组,[xxx, xxx]
* stampobject 时间戳对象, { startTime: xxx, endTime: xxx }
* /
type ValueType = 'timestamp' | 'timestring' | 'stamparray' | 'stampobject';
1.3.1
2 years ago