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}
/>
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();
};
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()}
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();
};
isVisible={true/false}
onConfirm={this.handleDatePicked}
onCancel={this.hideDatePicker}
/>