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 '@lucase-reactcomps/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';