React-native-modal-datetime-picker: time picker always return invalid date

Created on 31 Jul 2018  路  7Comments  路  Source: mmazzarolo/react-native-modal-datetime-picker

react-native-modal-datetime-picker: "^6.0.0",
react-native: "0.55.4"

Platform: Android

handleTimePicked = (time) => {
    console.log(time);    // Invalid date
    this.hideTimePicker();
  };

<DateTimePicker
        mode='time'
        date={new Date(this.state.selectedTime)}
        isVisible={this.state.isTimePickerVisible}
        onConfirm={this.handleTimePicked}
        onCancel={this.hideTimePicker}
      />

Most helpful comment

import DateTimePicker from 'react-native-modal-datetime-picker';
import moment from 'moment';

constructor(props) {
super(props);
this.state = {
selectedDate: moment(new Date()).format('DD-MM-YYYY'),
selectedTime: moment(new Date()).format('HH:mm'),
};
}

handleDatePicked = (date) => {
const newDate = moment(new Date(date.toString().substr(0, 16))).format('DD-MM-YYYY');
this.setState({ selectedDate: newDate });
this.hideDatePicker();
};

date={new Date(this.state.selectedDate)}
isVisible={true/false}
onConfirm={this.handleDatePicked}
onCancel={this.hideDatePicker}
/>

All 7 comments

Its solved now.. just remove date props when using with only 'time' mode

@onusgit - How to set initial time for timePicker !!

import DateTimePicker from 'react-native-modal-datetime-picker';
import moment from 'moment';

constructor(props) {
super(props);
this.state = {
selectedDate: moment(new Date()).format('DD-MM-YYYY'),
selectedTime: moment(new Date()).format('HH:mm'),
};
}

handleDatePicked = (date) => {
const newDate = moment(new Date(date.toString().substr(0, 16))).format('DD-MM-YYYY');
this.setState({ selectedDate: newDate });
this.hideDatePicker();
};

date={new Date(this.state.selectedDate)}
isVisible={true/false}
onConfirm={this.handleDatePicked}
onCancel={this.hideDatePicker}
/>

@VKGraphics - you are not getting.
I am asking for
mode='time'
You are giving example for Date.

@VKGraphics

worked, like this

Yup, worked,

state = {
    isDateTimePickerVisible: false,
    selectedDate: '07:00 AM'
};

render() {
    return (
      <Container>
        <Text style={{color: 'white'}}>This is SunRise Screen</Text>
        <TouchableOpacity onPress={this.showDateTimePicker}>
          <Text>Show DatePicker</Text>
        </TouchableOpacity>
        <Text>{this.state.selectedDate}</Text>
        <DateTimePicker
          mode="time"
          date={moment(`2000/10/1 ${this.state.selectedDate}`).toDate()}
          is24Hour={true}
          isVisible={this.state.isDateTimePickerVisible}
          onConfirm={this.handleDatePicked}
          onCancel={this.hideDateTimePicker}
        />
      </Container>
    );
  }

Thank for pointing out this and posting the solution!

@onusgit - How to set initial time for timePicker !!

date={new Date()}

Was this page helpful?
0 / 5 - 0 ratings