XaDatePicker

包含以下三个组件:DatePicker、MonthPicker、RangePicker

Date Picker & Month Picker

$3

``JavaScript import DatePicker from 'xa-date-picker';

const {MonthPicker,RangePicker} = DatePicker;`

`$3`

JavaScript
        
            基本用法:
            
        

        
          format:
          
        

        
          禁用状态:
          
        

        
          禁止选择部分日期:
          
        

        
          extra footer:
           'extra footer'} />
        
 
        

          快捷操作:
                      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
                })
              }
            }]}
          />

$3

| 参数 | 说明 | 类型 | 默认值 | | ------ | ------ | ------ |------ | | 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`

`$3`

html
  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())]
      })
    }
  }]}
/>

$3

RangePicker 的大多数参数与 DatePicker 相同,但需要注意的是其 value 为 moment[]`

XaDatePicker

包含以下三个组件:DatePicker、MonthPicker、RangePicker

Date Picker & Month Picker

$3

``JavaScript import DatePicker from 'xa-date-picker';

const {MonthPicker,RangePicker} = DatePicker;`

`$3`

JavaScript
        
            基本用法:
            
        

        
          format:
          
        

        
          禁用状态:
          
        

        
          禁止选择部分日期:
          
        

        
          extra footer:
           'extra footer'} />
        
 
        

          快捷操作:
                      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
                })
              }
            }]}
          />

$3

`Range Picker`

`$3`

html
  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())]
      })
    }
  }]}
/>

$3

RangePicker 的大多数参数与 DatePicker 相同,但需要注意的是其 value 为 moment[]`