Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Update to use @react-native-community/datetimepicker #429

Open
wants to merge 1 commit into
base: master
Choose a base branch
from
Open

Update to use @react-native-community/datetimepicker #429

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
106 changes: 24 additions & 82 deletions datepicker.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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',
Expand All @@ -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);
Expand All @@ -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);
}

Expand Down Expand Up @@ -184,7 +181,7 @@ class DatePicker extends Component {
);
}

onDateChange(date) {
onDateChange(event,date) {
this.setState({
allowPointerEvents: false,
date: date
Expand All @@ -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();
}
}

Expand All @@ -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') {
Expand Down Expand Up @@ -391,12 +331,12 @@ class DatePicker extends Component {
style={[Style.datePickerCon, {height: this.state.animatedHeight}, customStyles.datePickerCon]}
>
<View pointerEvents={this.state.allowPointerEvents ? 'auto' : 'none'}>
<DatePickerIOS
date={this.state.date}
<DateTimePicker
value={this.state.date}
mode={mode}
minimumDate={minDate && this.getDate(minDate)}
maximumDate={maxDate && this.getDate(maxDate)}
onDateChange={this.onDateChange}
onChange={this.onDateChange}
minuteInterval={minuteInterval}
timeZoneOffsetInMinutes={timeZoneOffsetInMinutes ? timeZoneOffsetInMinutes : null}
style={[Style.datePicker, customStyles.datePicker]}
Expand Down Expand Up @@ -433,6 +373,8 @@ class DatePicker extends Component {
</TouchableComponent>
</View>
</Modal>}
{(mode === 'time' && this.state.isPicker)?<DateTimePicker mode="time" value={this.state.date} onChange={this.onTimePicked}/>:null}
{(mode === 'date' && this.state.isPicker)?<DateTimePicker mode="date" minimumDate={minDate && this.getDate(minDate)} maximumDate={maxDate && this.getDate(maxDate)} value={this.state.date} onChange={this.onDatePicked}/>:null}
</View>
</TouchableComponent>
);
Expand Down