XaDatePicker
包含以下三个组件:DatePicker、MonthPicker、RangePicker
Date Picker & Month Picker
引用
import DatePicker from 'xa-date-picker'; const {MonthPicker,RangePicker} = DatePicker;使用示例
<div> <label>基本用法:</label> <DatePicker placeholder="基本用法" onChange={this.onChange} /> </div> <div> <label>format:</label> <DatePicker placeholder="format" format={dateFormat} /> </div> <div> <label>禁用状态:</label> <DatePicker placeholder="禁用状态" disabled /> </div> <div> <label>禁止选择部分日期:</label> <DatePicker placeholder="禁止选择部分日期" disabledDate={this.disabledDate} /> </div> <div> <label>extra footer:</label> <DatePicker placeholder="extra footer" renderExtraFooter={() => 'extra footer'} /> </div> <div> <label>快捷操作:</label> <DatePicker placeholder="请选择日期" onClick={() => this.setState({ open2: true })} onChange={this.onChange} value={this.state.value2} open={this.state.open2} shortcuts={[{ text: '今天', onClick: (picker) => { this.setState({ value2: moment(new Date()), open2: false }) } }, { text: '昨天', onClick: (picker) => { const date = new Date(); date.setTime(date.getTime() - 3600 * 1000 * 24); this.setState({ value2: moment(date), open2: false }) } }, { text: '一周前', onClick: (picker) => { const date = new Date(); date.setTime(date.getTime() - 3600 * 1000 * 24 * 7); this.setState({ value2: moment(date), open2: false }) } }]} /> </div>Props
| 参数 | 说明 | 类型 | 默认值 |
|---|---|---|---|
| allowClear | 是否显示清除按钮 | boolean |
true |
| className | 类名 | string |
|
| dateRender | 自定义日期单元格的内容 | function(currentDate: moment, today: moment) => React.ReactNode |
- |
| defaultValue | 默认日期 | moment |
- |
| disabled | 禁用状态 | boolean |
false |
| disabledDate | 禁用的日期 | function(moment):boolean |
- |
| format | 展示的日期格式 | string |
"YYYY-MM-DD" |
| shortcuts | 快捷 | [] |
- |
| showTime | 时间选择 | "YYYY-MM-DD" | |
| showTime.defaultValue | 默认时间 | moment |
|
| disabledTime | 禁用的时间 | function(moment):boolean |
|
| locale | 国际化配置,注意需要先设置 moment 的 locale | zhCN | |
| open | picker 展开状态 | boolean |
- |
| onOpenChange | picker 展开状态变化触发 | function(boolean) |
- |
| placeholder | 占位符 | string |
Range Picker
使用示例
{ const date = new Date(); date.setTime(date.getTime() - 3600 * 1000 * 24 * 7); this.setState({ value: [moment(date), moment(new Date())] }) } }]}/>Props
RangePicker 的大多数参数与 DatePicker 相同,但需要注意的是其 value 为 moment[]