DatePicker 日期选择器

基本用法

import { Cell, Button, DatePicker, Toast } from 'zarm';
class Demo extends React.Component {
  constructor() {
    super();
    this.state = {
      date: {
        visible: false,
        value: '',
        wheelDefaultValue: '2018-09-13',
      },
      time: {
        visible: false,
        value: '',
      },
      limitDate: {
        visible: false,
        value: '2017-09-13',
      },
      specDOM: {
        visible: false,
        value: '',
      }
    };
    this.myRef = React.createRef();
  }
  componentDidMount() {
    // this.interval = setInterval(
    //   () =>
    //     this.setState(prevState => ({
    //       count: prevState.count + 1
    //     })),
    //   1000
    // );
  }
  toggle(key) {
    const state = this.state[key];
    state.visible = !state.visible;
    this.setState({ [`${key}`]: state });
  }
  render() {
    const {
      date,
      time,
      limitDate,
      specDOM,
    } = this.state;
    return (
      <div>
        <Cell
          description={
            <Button size="xs" onClick={() => this.toggle('date')}>选择</Button>
          }
        >
          选择日期
        </Cell>
        <Cell
          description={
            <Button size="xs" onClick={() => this.toggle('time')}>选择</Button>
          }
        >
          选择时间
        </Cell>
        <Cell
          description={
            <Button size="xs" onClick={() => this.toggle('limitDate')}>选择</Button>
          }
        >
          选择日期(自定义)
        </Cell>
        <Cell
          description={
            <Button size="xs" onClick={() => this.toggle('specDOM')}>选择</Button>
          }
        >
          挂载到指定dom节点
        </Cell>
        <DatePicker
          visible={date.visible}
          mode="date"
          value={date.value}
          wheelDefaultValue={date.wheelDefaultValue}
          onOk={(value) => {
            this.setState({
              date: {
                visible: false,
                value,
              },
            });
            Toast.show(JSON.stringify(value));
          }}
          onCancel={() => this.toggle('date')}
        />
        <DatePicker
          visible={time.visible}
          mode="time"
          value={time.value}
          onOk={(value) => {
            this.setState({
              time: {
                visible: false,
                value,
              },
            });
            Toast.show(JSON.stringify(value));
          }}
          onCancel={() => this.toggle('time')}
        />
        <DatePicker
          visible={limitDate.visible}
          title="选择日期"
          okText="确定"
          cancelText="取消"
          mode="date"
          min="2007-01-03"
          max="2019-11-23"
          value={limitDate.value}
          onOk={(value) => {
            this.setState({
              limitDate: {
                visible: false,
                value,
              },
            });
            Toast.show(JSON.stringify(value));
          }}
          onCancel={() => this.toggle('limitDate')}
        />
        <DatePicker
          visible={specDOM.visible}
          value={specDOM.value}
          onOk={(value) => {
            this.setState({
              specDOM: {
                visible: false,
                value,
              },
            });
            Toast.show(JSON.stringify(value));
          }}
          onCancel={() => this.toggle('specDOM')}
          getContainer={() => this.myRef.current}
        />
        <div
          id="test-div"
          style={{ position: 'relative', zIndex: 1 }}
          ref={this.myRef} 
          />
      </div>
    )
  }
}
ReactDOM.render(<Demo />, mountNode);

DateSelect 表单日期选择器

import { Cell, DateSelect, Icon } from 'zarm';
class Demo extends React.Component {
  constructor() {
    super();
    this.state = {
      value: "",
    };
  }
  render() {
    return (
      <div>
        <Cell title="日期选择">
          <DateSelect
            title="选择日期"
            placeholder="请选择日期"
            mode="date"
            min="1974-05-16"
            max="2027-05-15"
            value={this.state.value}
            onOk={(value) => {
              console.log('DateSelect onOk: ', value);
              this.setState({
                value,
              });
            }}
          />
        </Cell>
      </div>
    )
  }
}
ReactDOM.render(<Demo />, mountNode);

DatePickerView 平铺选择器

import { DatePickerView } from 'zarm';
class Demo extends React.Component {
  constructor() {
    super();
    this.state = {
      value: "",
    };
  }
  render() {
    return (
      <div>
        <DatePickerView
          mode="datetime"
          value={this.state.value}
          min="2018-1-13"
          onChange={(value) => {
            console.log('datePickerView => ', value);
          }}
        />
      </div>
    )
  }
}
ReactDOM.render(<Demo />, mountNode);

API

仅 DatePicker & DateSelect 支持的属性

仅 DateSelect 支持的属性