CODEWITHSUNDEEP
react-native
Boky
Boky

Reputation: 12064

How to use React Native DatePickerAndroid

I'm trying to use DatePickerAndroid in React Native.

De function is as follows:

showAndroidDatePicker = async () => {
        try {
            const {action, year, month, day} = await DatePickerAndroid.open({
                date: this.state.selectedValue
            });
            if (action !== DatePickerAndroid.dismissedAction) {
                var date = new Date(year, month, day);
                this.setState({selectedValue: date.toLocaleDateString()});
            }
        } catch ({code, message}) {
            console.warn('Cannot open date picker', message);
        }
    };

render function is as follows:

render() {
        let numbers = [];
        for(var i=0; i<=this.props.max; i++) numbers.push((i + ''));
        return (
            <View>
                {this.renderModal()}
                <ItemDetail selectItem={this.selectItem.bind(this)} resetItem={this.resetItem.bind(this)} title={this.props.title} value={formatDate(this.props.value)} icon={this.props.icon} />
            </View>
        )
    }

And render modal function is as follows:

renderModal() {
        if(!this.state.itemPickerVisible) return;

        let datePicker = <DatePickerIOS date={this.state.selectedValue} mode="date" timeZoneOffsetInMinutes={this.state.timeZoneOffsetInHours * 60} onDateChange={(date) => { this.setState({selectedValue: date})}} />;
        if (Platform.OS === "android"){
            datePicker = this.showAndroidDatePicker()
        }

        return(
            <Modal animationType="fade" transparent={true} visible={this.state.itemPickerVisible}>
                <View style={{flex: 1, flexDirection: 'column', justifyContent: 'flex-end'}}>
                    <View style={{flex: 1, backgroundColor: '#000', opacity: 0.4}}>
                    </View>
                    <View style={{backgroundColor: '#fff'}}>
                        <View style={{backgroundColor: '#ddd', flexDirection: 'row', justifyContent: 'space-between', padding: 7}}>
                            <Text style={{padding: 4}}>{this.props.title}</Text>
                            <TouchableHighlight onPress={this.selectedItem.bind(this)}>
                                <Text style={{padding: 4, color: s.colorDark}}>{gettext("Done")}</Text>
                            </TouchableHighlight>
                        </View>
                        <View>                            
                            {datePicker}
                        </View>
                    </View>
                </View>
            </Modal>
        )
    }

But when the renderModal needs to be rendered I get an error :

enter image description here

Upvotes: 1

Views: 4262

Answers (2)

Stanislau Buzunko
Stanislau Buzunko

Reputation: 1811

You cannot render DatePickerAndroid this way. In your code

datePicker = this.showAndroidDatePicker()

datePicker contains results of execution of this.showAndroidDatePicker which is not a valid element.

Instead, you should call your method either onClick or in some lifecycle method, componentDidMount is a good place to call or even in a render

if (showDatePicker && Platform.OS !== 'ios') {
  this.showAndroidDatePicker()
}

If you want to customize the view, then you need to use some library instead of the native picker.

Upvotes: 1

NiFi
NiFi

Reputation: 2458

If Platform.OS === "android", the datePicker variable will contain whatever is returned by showAndroidDatePicker, currently nothing (actually undefined). To display platform-specific pickers, you can use the following inside the modal:

<View>
  {Platform.OS === 'ios' ?
    <DatePickerIOS date={this.state.selectedValue} mode="date" timeZoneOffsetInMinutes={this.state.timeZoneOffsetInHours * 60} onDateChange={(date) => { this.setState({selectedValue: date})}} /> :
    null
  }
</View>

and invoke showAndroidDatePicker e.g. in componentDidMount.

Upvotes: 0

Related Questions