Demo: DateTime

DateTime component for React Native. (Android & iOS)

import React from 'react';
import { View, Text, Button, Overlay } from 'react-native';

const DateTime = Overlay.DateTime;

class App extends React.Component {
    constructor(props) {
        super(props);

        this.state = {
            dt0: [-1, -1, -1],
            dt1: [18, 25, 30],
            dt2: [2015, 3, 20, 18, 30, 50],
            dt3: [-1, -1, -1]
        };
    }

    render() {
        return <View style={{paddingTop:88}}>
            <Text style={{fontSize:30, textAlign:'center', paddingBottom:20}}>DateTime</Text>
            <DateTime placeholder='YYYY-MM-DD' placeholderColor='#666'
                value={this.state.dt0}
                onConfirm={(selectedVals) => {
                    this.setState({ dt0: selectedVals });
                }}
            ></DateTime>

            <Text style={{textAlign:'center', paddingTop:20}}>Time</Text>
            <DateTime placeholder='hh:mm:ss' placeholderColor='#666'
                mode="hms"
                value={this.state.dt1}
                min={{h: 10, m: 0, s: 0}}
                max={{h: 23, m: 59, s: 59}}
                onConfirm={(selectedVals) => {
                    this.setState({ dt1: selectedVals });
                }}
            ></DateTime>

            <Text style={{textAlign:'center', paddingTop:20}}>Date & Time & Title</Text>
            <DateTime placeholder='YYYY-MM-DD hh:mm:ss' placeholderColor='#666'
                mode="YMDhms"
                titles={['年', '月', '日', '时', '分', '秒']}
                value={this.state.dt2}
                min={{Y:2010, M:1, D:1, h: 0, m: 0, s: 0}}
                max={{Y:2020, M:12, D:31, h: 23, m: 59, s: 59}}
                onConfirm={(selectedVals) => {
                    this.setState({ dt2: selectedVals });
                }}
            ></DateTime>

            <Text style={{textAlign:'center', paddingTop:20}}>Customized Head & Input</Text>
            <DateTime
                mode="YMD"
                value={this.state.dt3}
                min={{Y:2010, M:1, D:1}}
                max={{Y:2020, M:12, D:31}}
                input={() => { // customize input
                    return <View style={{backgroundColor:'#333', paddingVertical:18}}>
                        {
                            this.state.dt3.findIndex(T => T < 0) >= 0
                            &&
                            <Text style={{color:'#aaa', textAlign:'center'}}>年月日</Text>
                            ||
                            <Text style={{color:'yellow', textAlign:'center'}}>{this.state.dt3[0]}年{this.state.dt3[1]}月{this.state.dt3[2]}日</Text>
                        }
                        <Image/>
                    </View>;
                }}
                head={function() {
                    return <View style={{backgroundColor:'yellow', flexDirection:'row', justifyContent:'center', alignItems:'center', paddingVertical:18}}>
                        <Text>Head</Text>
                        <Button title="确定" onPress={() => {
                            // fire confirm event ==> select and close
                            this.fireConfirm();
                        }}/>
                        <Button title="关闭" onPress={() => {
                            this.close();
                        }}/>
                    </View>;
                }}
                onConfirm={(selectedVals) => {
                    this.setState({ dt3: selectedVals });
                }}
            ></DateTime>
        </View>;
    }
}

export default App;