0
votes

I am new to react native. I have created a screen from where I send date and time to server using datetimepicker But when I tap on show date picker then calendar is opening But issue is when I select date then this selected date not showing just show date picker button showing again. and same happens with timepicker also. please help . thanks..

here is my code

import React, {Component} from 'react';
import {View, Button, Platform} from 'react-native';
import DateTimePicker from '@react-native-community/datetimepicker';

export default class App extends Component {
  state = {
    date: new Date('2020-06-12T14:42:42'),
    mode: 'date',
    show: false,
  }

  setDate = (event, date) => {
    date = date || this.state.date;

    this.setState({
      show: Platform.OS === 'ios' ? true : false,
      date,
    });
  }

  show = mode => {
    this.setState({
      show: true,
      mode,
    });
  }

  datepicker = () => {
    this.show('date');
  }

  timepicker = () => {
    this.show('time');
  }

  render() {
    const { show, date, mode } = this.state;

    return (
      <View>
        <View>
          <Button onPress={this.datepicker} title="Show date picker!" />
        </View>
        <View>
          <Button onPress={this.timepicker} title="Show time picker!" />
        </View>
        { show && <DateTimePicker value={date}
                    mode={mode}
                    is24Hour={true}
                    display="default"
                    onChange={this.setDate} />
        }
      </View>
    );
  }
}
1
What are you trying to achieve in here? Your code basically just adjust the date/ time and save it. snack.expo.io/7VOdpzbUvyairmea
I want to show My selected date and time below the date button and time below the time buttonSohil Shaikh

1 Answers

2
votes

A simple way to show your adjusted Date is just to wrap it in a

  <Text>A simple view of dateTime: {String(this.state.date)}</Text>
  

https://snack.expo.io/WGQYSpXip