react native中有關日期的組件DatePicker 示例

1.用node加載react-native-datepicker包

npm install react-native-datepicker

2.直接上代碼

import React, { PureComponent } from 'react';
import DatePicker from 'react-native-datepicker';

class MyDatePicker extends PureComponent {
  constructor(props) {
    super(props);
    this.state = {
　　　　data:new Date()  //默認顯示當前時間，如果為自定義則為（'1991-1-1'）
    };
  }
  render() {
    return (
      <DatePicker
        style={{ width: 50, justifyContent: 'center', alignItems: 'center' }}
        date={this.state.data}
        mode="date"
        confirmBtnText="Confirm"
        cancelBtnText="Cancel"
        iconSource={require('./../image/calendar.png')}  //自定義圖標
        customStyles={{
        }}
        hideText={true}  //不顯示日期文本
        onDateChange={(datetime) => { this.props.storq.datetimeFun(datetime); }}
      />
    );
  }
}

export default MyDatePicker;

 

3.在另一個文件中引用