xa-date-picker v0.0.2

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

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[]