DatePicker.js 3.28 KB
'use strict';

import React from 'react';
import ReactNative from 'react-native';


const {
    Component,
} = React;


const {
    View,
    Text,
    StyleSheet,
    Dimensions,
    Platform,
    DatePickerAndroid,
    TouchableHighlight,
    Image,
} = ReactNative;


export default class DatePicker extends Component {

    static propTypes = {
        containerStyle: View.propTypes.style,
    };

    constructor(props) {
        super(props);
        this._showDatePicker = this._showDatePicker.bind(this);
    }

	render() {

        return (
            <View style={[styles.container, this.props.containerStyle]}>

                <TouchableHighlight underlayColor={'white'}
                    onPress={() => {this._showDatePicker(this.props.currentStartDate, '2000-1-1', this.props.currentEndDate, true)}}>
                    <View style={styles.dateContainer}>
                        <Text style={styles.dateText}>{this.props.currentStartDate}</Text>
                        <Image source={require('../images/down.png')}/>
                    </View>
                </TouchableHighlight>
                <Text style={styles.middleText}></Text>
                <TouchableHighlight underlayColor={'white'}
                    onPress={() => {this._showDatePicker(this.props.currentEndDate, this.props.currentStartDate, this.props.maxDate, false)}}>
                    <View style={styles.dateContainer}>
                        <Text style={styles.dateText}>{this.props.currentEndDate}</Text>
                        <Image source={require('../images/down.png')}/>
                    </View>
                </TouchableHighlight>

            </View>
        );
    }

    async _showDatePicker(currentDate, minDate, maxDate, ifStartDate) {
        let currentDateArr = currentDate.split('-');
        let minDateArr = minDate.split('-');
        let maxDateArr = maxDate.split('-');
        if (Platform.OS === 'android') {
            try {
                const {action, year, month, day} = await DatePickerAndroid.open({
                    date: new Date(currentDateArr[0], (currentDateArr[1] - 1), currentDateArr[2]),
                    minDate: new Date(minDateArr[0], (minDateArr[1] - 1), minDateArr[2]),
                    maxDate: new Date(maxDateArr[0], (maxDateArr[1] - 1), maxDateArr[2]),
                });
                if (action !== DatePickerAndroid.dismissedAction) {
                    let pickedDate = year + '-' + (month + 1) + '-' + day;
                    this.props.newDatePicked(pickedDate, ifStartDate);
                }
            } catch ({code, message}) {

            }

        } else {
            this.props.showDatePickerIOS(true, ifStartDate);
        }

    }
}

let {width, height} = Dimensions.get('window');

let styles = StyleSheet.create({
    container: {
        width,
        height: 45,
        backgroundColor: 'white',
        flexDirection: 'row',
        alignItems: 'center',
        justifyContent: 'center',
    },
    middleText: {
        marginLeft: 15,
        marginRight: 15,
        color: '#444444',
        fontSize: 14,
    },
    dateText: {
        color: '#444444',
        fontSize: 14,
        paddingRight: 5,
    },
    dateContainer: {
        flex: 1,
        flexDirection: 'row',
        alignItems: 'center',
        justifyContent: 'center',
    }

});