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

使用示例

<RangePicker
  selectedValue={this.state.value}
  startPlaceholder="请选择开始日期"
  endPlaceholder="请选择结束日期"
  shortcuts={[{
    text: '本周',
    onClick: (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[]