diff --git a/datepicker.js b/datepicker.js index ac6cacde29..03d8bdf489 100644 --- a/datepicker.js +++ b/datepicker.js @@ -6,15 +6,13 @@ import { Image, Modal, TouchableHighlight, - DatePickerAndroid, - TimePickerAndroid, - DatePickerIOS, Platform, Animated, Keyboard } from 'react-native'; import Style from './style'; import Moment from 'moment'; +import DateTimePicker from '@react-native-community/datetimepicker'; const FORMATS = { 'date': 'YYYY-MM-DD', @@ -32,7 +30,8 @@ class DatePicker extends Component { date: this.getDate(), modalVisible: false, animatedHeight: new Animated.Value(0), - allowPointerEvents: true + allowPointerEvents: true, + isPicker: false, }; this.getDate = this.getDate.bind(this); @@ -45,8 +44,6 @@ class DatePicker extends Component { this.onPressMask = this.onPressMask.bind(this); this.onDatePicked = this.onDatePicked.bind(this); this.onTimePicked = this.onTimePicked.bind(this); - this.onDatetimePicked = this.onDatetimePicked.bind(this); - this.onDatetimeTimePicked = this.onDatetimeTimePicked.bind(this); this.setModalVisible = this.setModalVisible.bind(this); } @@ -184,7 +181,7 @@ class DatePicker extends Component { ); } - onDateChange(date) { + onDateChange(event,date) { this.setState({ allowPointerEvents: false, date: date @@ -197,53 +194,28 @@ class DatePicker extends Component { }, 200); } - onDatePicked({action, year, month, day}) { - if (action !== DatePickerAndroid.dismissedAction) { + onDatePicked(event,date) { + if (date === undefined) { + this.setState({isPicker: false}) + }else { this.setState({ - date: new Date(year, month, day) + date: Moment(date), + isPicker: false }); this.datePicked(); - } else { - this.onPressCancel(); } + } - onTimePicked({action, hour, minute}) { - if (action !== DatePickerAndroid.dismissedAction) { + onTimePicked(event, time) { + if (time === undefined) { + this.setState({isPicker: false}) + }else{ this.setState({ - date: Moment().hour(hour).minute(minute).toDate() + date: Moment(time), + isPicker: false }); this.datePicked(); - } else { - this.onPressCancel(); - } - } - - onDatetimePicked({action, year, month, day}) { - const {mode, androidMode, format = FORMATS[mode], is24Hour = !format.match(/h|a/)} = this.props; - - if (action !== DatePickerAndroid.dismissedAction) { - let timeMoment = Moment(this.state.date); - - TimePickerAndroid.open({ - hour: timeMoment.hour(), - minute: timeMoment.minutes(), - is24Hour: is24Hour, - mode: androidMode - }).then(this.onDatetimeTimePicked.bind(this, year, month, day)); - } else { - this.onPressCancel(); - } - } - - onDatetimeTimePicked(year, month, day, {action, hour, minute}) { - if (action !== DatePickerAndroid.dismissedAction) { - this.setState({ - date: new Date(year, month, day, hour, minute) - }); - this.datePicked(); - } else { - this.onPressCancel(); } } @@ -256,44 +228,12 @@ class DatePicker extends Component { // reset state this.setState({ - date: this.getDate() + date: this.getDate(), + isPicker: true }); if (Platform.OS === 'ios') { this.setModalVisible(true); - } else { - - const {mode, androidMode, format = FORMATS[mode], minDate, maxDate, is24Hour = !format.match(/h|a/)} = this.props; - - // 选日期 - if (mode === 'date') { - DatePickerAndroid.open({ - date: this.state.date, - minDate: minDate && this.getDate(minDate), - maxDate: maxDate && this.getDate(maxDate), - mode: androidMode - }).then(this.onDatePicked); - } else if (mode === 'time') { - // 选时间 - - let timeMoment = Moment(this.state.date); - - TimePickerAndroid.open({ - hour: timeMoment.hour(), - minute: timeMoment.minutes(), - is24Hour: is24Hour, - mode: androidMode - }).then(this.onTimePicked); - } else if (mode === 'datetime') { - // 选日期和时间 - - DatePickerAndroid.open({ - date: this.state.date, - minDate: minDate && this.getDate(minDate), - maxDate: maxDate && this.getDate(maxDate), - mode: androidMode - }).then(this.onDatetimePicked); - } } if (typeof this.props.onOpenModal === 'function') { @@ -391,12 +331,12 @@ class DatePicker extends Component { style={[Style.datePickerCon, {height: this.state.animatedHeight}, customStyles.datePickerCon]} > - } + {(mode === 'time' && this.state.isPicker)?:null} + {(mode === 'date' && this.state.isPicker)?:null} );