React Native simple date & time picker component for iOS and Android, using @react-native-community/datetimepicker
iOS | |
Android | |
IMPORTANT - At first, you have to install @react-native-community/datetimepicker as a peer dependecy, and link it
npm install --save simple-react-native-datepicker
import React, { Component } from 'react';
import { View, SafeAreaView, Text, Button } from 'react-native';
import DateTimePicker from 'simple-react-native-datepicker'
interface IState {
visible: boolean;
dateStr?: string;
date?: Date;
}
class App extends Component<{}, IState> {
constructor(props: {}) {
super(props);
this.state = { dateStr: '', date: new Date(), visible: false };
}
public render() {
return (
<SafeAreaView style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
<View>
<Text style={{ marginBottom: 20 }}>Hello! simple date picker!</Text>
<Text style={{ marginBottom: 20 }}>time is {String(this.state.dateStr)}</Text>
<Button onPress={() => this.showDatePicker()} title="show" />
<DatePciker
visible={this.state.visible}
onDateChange={(dateStr, date) => this.onDateChange(dateStr, date)}
date={this.state.date}
/>
</View>
</SafeAreaView>
);
}
public showDatePicker() {
this.setState({ visible: true });
}
public onDateChange(dateStr?: string, date?: Date) {
if (dateStr === undefined) {
dateStr = 'canceled';
}
this.setState({ dateStr, date, visible: false });
}
}
export default App;
Defines show or hide the picker.
<RNDateTimePicker visible={true} />
<RNDateTimePicker visible={this.state.isShowDatePicker} />
Defines date string format. Please refer to moment format
<RNDateTimePicker mode="date" format="YYYY-MM-DD" />
Defines the type of the picker.
List of possible values:
"date"
(default foriOS
andAndroid
)"time"
"datetime"
(iOS
only)"countdown"
(iOS
only)
<RNDateTimePicker mode="time" />
Defines the visual display of the picker for Android and will be ignored for iOS.
List of possible values:
"default"
"spinner"
"calendar"
(only fordate
mode)"clock"
(only fortime
mode)
<RNDateTimePicker display="spinner" />
Date change handler.
This is called when the user changes the date or time in the UI. It receives the formatted dateStr and the date as parameters.
If dateStr and date receives undefined, it mean's datepicker canceled like press cacel button.
setDate = (dateStr, date) => {
if (dateStr === undefined && date === undefined) {
// cancel handler execute
}
};
<RNDateTimePicker onChange={this.setDate} />;
Defines the date or time value used in the component.
<RNDateTimePicker date={new Date()} />
Defines the maximum date that can be selected.
<RNDateTimePicker maximumDate={new Date(2300, 10, 20)} />
Defines the minimum date that can be selected.
<RNDateTimePicker minimumDate={new Date(1950, 0, 1)} />
Allows changing of the timeZone of the date picker. By default it uses the device's time zone.
// GMT+1
<RNDateTimePicker timeZoneOffsetInMinutes={60} />
Allows changing of the textColor of the date picker.
<RNDateTimePicker textColor="red" />
Allows changing of the locale of the component. By default it uses the device's locale. Please refer to here
<RNDateTimePicker locale="es-ES" />
Allows changing of the time picker to a 24 hour format.
<RNDateTimePicker is24Hour={true} />
The interval at which minutes can be selected.
Possible values are: 1, 2, 3, 4, 5, 6, 10, 12, 15, 20, 30
<RNDateTimePicker minuteInterval={10} />
Defines iOS datepicker confirm button title
<RNDateTimePicker confirmText="확인" />
Defines iOS datepicker cancel button title
<RNDateTimePicker confirmText="취소" />
Defines iOS datepicker confirm button title style
<RNDateTimePicker confirmTextStyle={{ color: 'red' }} />
Defines iOS datepicker cancel button title style
<RNDateTimePicker cancelTextStyle={{ color: 'black' }} />
- Install required pods in
demo/ios
by runningpods install
- Run
npm start
to start Metro Bundler - Run
npm run start ios
ornpm run start android