React Native DatePickerIOS

標籤：

/**? Sample React Native App?
 *  https://github.com/facebook/react-native?
 *  @flow? */


"use strict"

import React, {Component} from ‘react‘
import {
    AppRegistry,
    View,
    Text,
    DatePickerIOS,
    StyleSheet
} from ‘react-native‘

class HelloWorld extends Component {


    constructor(props) {
        super(props)

        let remindTime = "2018/12/20" // 如果是 2018-12-20 ,轉回會失敗
        let maxDate = new Date(remindTime)

        let tempDate = new Date()

        this.state={
            defaultDate: tempDate,
            maxDate: maxDate,
            currDateStr: tempDate.toDateString()
        }
    }

    // 遺留問題： datePicker 無法選擇時間，不管怎麼滑動鬆手後會立刻恢複到目前時間。 一時間不知如何是好
    datePickerChanged(date) {

        this.setState = ({
            // defaultDate: date,
            currDateStr: date.toDateString()
        });
    }

    render() {
        return (
            <View style={styles.container}>
                <Text style={styles.text}>{this.state.currDateStr}</Text>
                <DatePickerIOS
                    date={this.state.defaultDate} //預設的時間
                    mode={‘date‘} // datePicker樣式 ‘date‘(日期), ‘time‘(時間), ‘datetime‘(日期和時間)
                    minimumDate={new Date()} //最小時間 (這裡設定的是當前的時間)
                    maximumDate={this.state.maxDate}
                    minuteInterval={1} //最小時間間隔 (預設 1 分鐘,若設定 5,則picker上顯示:00、05、10......)
                    onDateChange={(date) => this.datePickerChanged(date)}/>
            </View>
        );
    }
}

const styles = StyleSheet.create({

    container: {
        flex: 1,
        justifyContent: ‘center‘,
        alignItems: ‘center‘,
        backgroundColor: ‘#F5FCFF‘
    },
    text: {
        width: 200,?
        height: 60,
        backgroundColor: ‘white‘,?
        justifyContent:‘center‘,?
        alignItems: ‘center‘,?
        borderRadius: 5,
    },
    picker:{
        padding: 50

    }
})


AppRegistry.registerComponent(‘HelloWorld‘, () => HelloWorld);


****************************** 相關知識點 ******************************

/*
* 2、擷取myDate的年
 var myDate = new Date();
 myDate.getYear();        //擷取當前年份(2位)
 myDate.getFullYear();    //擷取完整的年份(4位)
 myDate.getMonth();       //擷取當前月份(0-11,0代表1月)
 myDate.getMonth()+1;       //擷取正確月份
 myDate.getDate();        //擷取當前日(1-31)
 myDate.getDay();         //擷取當前星期X(0-6,0代表星期天)
 myDate.getTime();        //擷取目前時間(從1970.1.1開始的毫秒數)
 myDate.getHours();       //擷取當前小時數(0-23)
 myDate.getMinutes();     //擷取當前分鐘數(0-59)
 myDate.getSeconds();     //擷取當前秒數(0-59)
 myDate.getMilliseconds();    //擷取當前毫秒數(0-999)
 myDate.toLocaleDateString();     //擷取當前日期
 var mytime=myDate.toLocaleTimeString();     //擷取目前時間
 myDate.toLocaleString( );        //擷取日期與時間
* */

******************************  ******************************

 

React Native DatePickerIOS