RN学习之DatePickerIOS

RN学习之DatePickerIOS

• date：选中的日期。

• maximumDate：最大日期。选择的日期大于此日期则回到此日期。

• minimumDate：最小日期。选择的日期小于此日期则回到此日期。

• mode：(‘date’, ‘time’, ‘datetime’) 选择器模式。

• minuteInterval：最小间隔。(1, 2, 3, 4, 5, 6, 10, 12, 15, 20, 30)

• onDateChange：日期变化大回调函数.

• timeZoneOffsetInMinutes：时区差，单位是分钟。默认是手机当前时区。

import React, { Component } from 'react';
import PropTypes from 'prop-types';
import { 
  View, 
  Text,
  StyleSheet,
  Button,
  DatePickerIOS,
  NavigatorIOS,
} from 'react-native';

class DatePickerView extends Component {
  static propTypes = { ////定义传入props中的属性各种类型
    route: PropTypes.shape({
      title: PropTypes.string.isRequired
    }),
    navigator: PropTypes.object.isRequired
  }

  static defaultProps = {  ////类的静态属性

  }

  static navigationOptions={
    title:'DatePickerIOS'
  }

  maxDate = new Date();
  minDate = new Date();

  constructor(props) { //构造函数
    super(props);
    this.maxDate.setDate(new Date().getDate() + 365 )
    this.minDate.setDate(new Date().getDate() - 365)
    this.state = {
      date: new Date(),
      dateText: new Date().getFullYear(),
      maxDate: this.maxDate,
      minDate: this.minDate,
      mode: 'datetime',
      minuteInterval:1,
      timeZoneOffsetInMinutes: 8 * 60,
    };
  }
  // 在渲染前调用,在客户端也在服务端。
  componentWillMount(){
    console.log("WillMount"+this.state.mode)
  }

  // 在第一次渲染后调用，只在客户端。之后组件已经生成了对应的DOM结构，可以通过this.getDOMNode()来进行访问。
  componentDidMount(){
    console.log("DidMount"+this.state.mode)
  }
  // 在组件接收到一个新的 prop (更新后)时被调用。这个方法在初始化render时不会被调用。
  componentWillReceiveProps(){
    console.log("ReceiveProp"+this.state.mode)
  }

  // 返回一个布尔值。在组件接收到新的props或者state时被调用。在初始化时或者使用forceUpdate时不被调用。 
  // 可以在你确认不需要更新组件时使用。
  shouldComponentUpdate(){
    console.log("sholudupdate"+this.state.mode)
    return true
  }
  // 在组件接收到新的props或者state但还没有render时被调用。在初始化时不会被调用
  componentWillUpdate(){
    console.log("WillUpdate"+this.state.mode)
  }
  // 在组件完成更新后立即调用。在初始化时不会被调用。
  ComponentDidupdate(){
    console.log("didupdate"+this.state.mode)
  }
  // 在组件从 DOM 中移除之前立刻被调用。
  componentWillUnmount(){
    console.log("WillUnmount"+this.state.mode)
  }


  render() {
    return (
      
          {"选中的日期"+this.state.dateText}
          
            设置mode:
             {this.setState({
              mode:'date'
            })} }>
             {this.setState({
              mode:'time'
            })} }>
            {/* 调用setState时，使用callback函数，因为setState是异步的，想要拿到更新后的值，可以使用回调函数 */}
             {this.setState({
              mode: 'datetime'
            }, ()=>{"callback回调"+console.log(this.state.mode)} )}  }/>
          
            
          {/* 设置设置minuteInterval */}
          
            设置minuteInterval:
             {
              this.setState({
                minuteInterval:1
              }, ()=>{
                console.log("callback"+this.state.minuteInterval)
              })
            }} >
             {
              this.setState({
                minuteInterval: 5
              }, () => {
                console.log("callBakc"+this.state.minuteInterval)
              });
            }}>
             {
              this.setState({
                minuteInterval:30 
              }, () => {
                console.log("callBakc"+this.state.minuteInterval)
              });
            }}>
            
          
          {/* 设置时区 */}
          
            设置timeZoneOffsetInMinutes:
            {this.setState({timeZoneOffsetInMinutes:9*60}, ()=>{"callBack:"+this.state.timeZoneOffsetInMinutes})} }>
            {this.setState({timeZoneOffsetInMinutes:8*60}, ()=>{"callBack:"+this.state.timeZoneOffsetInMinutes})}}>
            {this.setState({timeZoneOffsetInMinutes:7*60}, ()=>{"callBack:"+this.state.timeZoneOffsetInMinutes})}}>
          
            
          {/* datePickerIos控件 */}
          {
              this.setState({date:newDate});
              var year = newDate.getFullYear();
              var month = newDate.getMonth();
              var date1 = newDate.getDate();
              var hour = newDate.getHours();
              var mins = newDate.getMinutes();
              var secs = newDate.getSeconds();
              var msecs = newDate.getMilliseconds();
              var dateString = newDate.toLocaleDateString();
              var s = year+"-"+month+"-"+date1+' '+hour+':'+mins+':'+secs+':'+msecs;
              var hm = hour + ":" + mins;
              console.log(hm)
              this.setState({dateText:dateString});
            }}
          >

      
    );
  }
}

export default DatePickerView;