index.js

import React, { Component } from 'react'
import { connect } from 'dva'
import { DatePicker, List } from 'antd-mobile';
import enUs from 'antd-mobile/lib/date-picker/locale/en_US';

const nowTimeStamp = new Date('1963-01-01');
const today = new Date();
const now = new Date();

// GMT is not currently observed in the UK. So use UTC now.
const utcNow = new Date(now.getTime() + (now.getTimezoneOffset() * 60000));
// Make sure that in `time` mode, the maxDate and minDate are within one day.
let minDate = new Date('1963-01-01');
const maxDate = new Date(nowTimeStamp );
console.log(minDate, maxDate);
if (minDate.getDate() !== maxDate.getDate()) {
  // set the minDate to the 0 of maxDate
  minDate = new Date(maxDate.getFullYear(), maxDate.getMonth(), maxDate.getDate());
}

function formatDate(date) {
  /* eslint no-confusing-arrow: 0 */
  const pad = n => n < 10 ? `0${n}` : n;
  const dateStr = `${date.getFullYear()}-${pad(date.getMonth() + 1)}-${pad(date.getDate())}`;
  const timeStr = `${pad(date.getHours())}:${pad(date.getMinutes())}`;
  return `${dateStr} ${timeStr}`;
}

// If not using `List.Item` as children
// The `onClick / extra` props need to be processed within the component
const CustomChildren = ({ extra, onClick, children }) => (
  <div
    onClick={onClick}
    style={{ backgroundColor: '#fff', height: '45px', lineHeight: '45px', padding: '0 15px' }}
  >
    {children}
    <span style={{ float: 'right', color: '#888' }}>{extra}</span>
  </div>
);

class datePicker extends Component {
  state = {
    date: now,
    time: now,
    utcDate: utcNow,
    dpValue: null,
    customChildValue: null,
    visible: false,
  }

  componentDidMount() {
    this.props.onRef(this)
    this.setState({
      date: this.props.birthday ? new Date(this.props.birthday) : now
    })
    console.log('componentDidMount---',this.props.birthday)
  }
  componentWillReceiveProps(nextProps) { // 父组件重传props时就会调用这个方法
    if(nextProps.birthday && nextProps.birthday != this.state.date){
      this.setState({
        date:new Date(nextProps.birthday)
      })
    }
  }
  showDate=()=>{
    document.getElementsByTagName('body')[0].style.overflowY = 'hidden';
    this.setState({
      visible: true,
    });
  }

  showDate1=()=> {
    document.getElementsByTagName('body')[0].style.overflowY = 'hidden';
    this.setState({
      visible: true,
    });
  }



  render() {
    let defaultdate = today.getFullYear()-101;//默认范围值为100岁
    console.log('render---',this.props.birthday)
    let minDate = this.props.minYear ? new Date(this.props.minYear, today.getMonth(), today.getDate() + 1) : new Date(defaultdate, 0, 1, 0, 0, 0);
    return (
      <List className="date-picker-list" style={{ backgroundColor: 'white',opacity:0 ,width:0,display:'none'}}>
        {/*<DatePicker
          value={this.state.date}
          onChange={date => this.setState({ date })}
        >
          <List.Item arrow="horizontal">Datetime</List.Item>
        </DatePicker>*/}
        <DatePicker
          visible={this.state.visible}
          mode="date"
          title="出生日期"
          extra="Optional"
          value={this.state.date}
          minDate={minDate}
          maxDate={new Date()}
          onChange={date => {
            console.log('--DatePicker--onChange--->',date)
            //this.setState({ date })
          }}
          onValueChange={(date,index) => {
            let data1 = new Date(date[0],date[1],date[2]);
             console.log('--DatePicker--onValueChange--->',data1)
            this.setState({ date:data1 })
          }}
          onOk = {
            (date)=>{
              console.log('--DatePicker--ok--->',date)
              this.setState({ visible:false })
              this.props.getDate(date)
            }
          }
          onDismiss={
            ()=>{
              this.setState({ visible:false,date:this.props.birthday ? new Date(this.props.birthday) : now })
              console.log('--DatePicker--onDismiss--->',this.state.date)
            }
          }
        >
          <List.Item arrow="horizontal">Date</List.Item>
        </DatePicker>

       {/* <DatePicker
          mode="time"
          minuteStep={2}
          use12Hours
          value={this.state.time}
          onChange={time => this.setState({ time })}
        >
          <List.Item arrow="horizontal">Time (am/pm)</List.Item>
        </DatePicker>
        <DatePicker
          mode="time"
          minDate={minDate}
          maxDate={maxDate}
          value={this.state.time}
          onChange={time => this.setState({ time })}
        >
          <List.Item arrow="horizontal">Limited time</List.Item>
        </DatePicker>

        <DatePicker
          mode="time"
          locale={enUs}
          format={val => `UTC Time: ${formatDate(val).split(' ')[1]}`}
          value={this.state.utcDate}
          onChange={date => this.setState({ utcDate: date })}
        >
          <List.Item arrow="horizontal">UTC time</List.Item>
        </DatePicker>

        <List.Item
          extra={this.state.dpValue && formatDate(this.state.dpValue)}
          onClick={() => this.setState({ visible: true })}
        >
          External control visible state
        </List.Item>
        <DatePicker
          visible={this.state.visible}
          value={this.state.dpValue}
          onOk={date => this.setState({ dpValue: date, visible: false })}
          onDismiss={() => this.setState({ visible: false })}
        />

        <DatePicker
          mode="time"
          format="HH:mm"
          title="Select Time"
          value={this.state.customChildValue}
          onChange={v => this.setState({ customChildValue: v })}
          extra="click to choose"
        >
          <CustomChildren>With customized children</CustomChildren>
        </DatePicker>*/}
      </List>
    );
  }
}


export default connect()(datePicker)
/*ReactDOM.render(<Demo />, mountNode);
.date-picker-list .am-list-item .am-list-line .am-list-extra {
  flex-basis: initial;
}*/