title: DatePicker 日期选择框 nav: path: /components title: 组件 order: 1 group: title: 数据录入 path: /date-picker order: 5

DatePicker 日期选择框

输入或选择日期的控件。

使用

提供全局属性配置的能力。目前 DatePicker 组件仅支持 picker='date', 此场景在系统中应用的最多。通过配置 valueType 返回不同类型的日期值。其他类型的 picker 请使用 antd 日期组件。

⚠️ 注意: 在 form 表单中使用时，若需要设置初始值，初始值的类型应和你设置的 valueType 返回类型保持一致。例如，你的 valueType='stampobject', 初始值应该设置为

{ startTime: moment().startOf('day').valueOf(), endTime: moment().endOf('day').valueOf() }

import DatePicker from '@tawa/mario-date-picker';

<DatePicker />;

代码演示

基本用法

与 form 绑定

参数

| 参数 | 说明 | 类型 | 默认值 | | --------- | ------------------------------------------------------ | ----------- | ----------- | | valueType | 时间组件返回值类型。详见ValueType | ValueType | - | | startKey | 当设置 valueType 为stampobject时，开始时间返回的 key | string | 'startTime' | | endKey | 当设置 valueType 为stampobject时，结束时间返回的 key | boolean | 'endTime' |

其他属性见 antd DatePicker

ValueType

/**
 * timestamp  时间戳
 * timestring 时间字符串
 * stamparray 时间戳数组，[xxx, xxx]
 * stampobject 时间戳对象， { startTime: xxx, endTime: xxx }
 * /
type ValueType = 'timestamp' | 'timestring' | 'stamparray' | 'stampobject';