A simple, performant, multilingual, Material Design inspired date, time, and date range picker component for react-native-paper.
1. Installation.
# Yarn
$ yarn add react-native-paper-dates
# NPM
$ npm i react-native-paper-dates
2. Create a single date picker.
import React from "react";
import { View, Text } from "react-native";
import { Button } from 'react-native-paper';
import { DatePickerModal } from 'react-native-paper-dates';
import { SafeAreaProvider } from "react-native-safe-area-context";
export default function App() {
const [date, setDate] = React.useState(undefined);
const [open, setOpen] = React.useState(false);
const onDismissSingle = React.useCallback(() => {
setOpen(false);
}, [setOpen]);
const onConfirmSingle = React.useCallback(
(params) => {
setOpen(false);
setDate(params.date);
},
[setOpen, setDate]
);
return (
<SafeAreaProvider>
<View style={{justifyContent: 'center', flex: 1, alignItems: 'center'}}>
<Button onPress={() => setOpen(true)} uppercase={false} mode="outlined">
Pick single date
</Button>
<DatePickerModal
locale="en"
mode="single"
visible={open}
onDismiss={onDismissSingle}
date={date}
onConfirm={onConfirmSingle}
/>
</View>
</SafeAreaProvider>
);
}
2. Create a time picker.
import React from "react";
import { View, Text } from "react-native";
import { Button } from 'react-native-paper';
import { TimePickerModal } from 'react-native-paper-dates';
import { SafeAreaProvider } from "react-native-safe-area-context";
export default function App() {
const [visible, setVisible] = React.useState(false)
const onDismiss = React.useCallback(() => {
setVisible(false)
}, [setVisible])
const onConfirm = React.useCallback(
({ hours, minutes }) => {
setVisible(false);
console.log({ hours, minutes });
},
[setVisible]
);
return (
<SafeAreaProvider>
<View style={{justifyContent: 'center', flex: 1, alignItems: 'center'}}>
<Button onPress={() => setVisible(true)} uppercase={false} mode="outlined">
Pick time
</Button>
<TimePickerModal
visible={visible}
onDismiss={onDismiss}
onConfirm={onConfirm}
hours={12}
minutes={14}
/>
</View>
</SafeAreaProvider>
);
}
3. Create a date range picker.
import React from "react";
import { View, Text } from "react-native";
import { Button } from 'react-native-paper';
import { DatePickerModal } from 'react-native-paper-dates';
import { SafeAreaProvider } from "react-native-safe-area-context";
export default function App() {
const [range, setRange] = React.useState({ startDate: undefined, endDate: undefined });
const [open, setOpen] = React.useState(false);
const onDismiss = React.useCallback(() => {
setOpen(false);
}, [setOpen]);
const onConfirm = React.useCallback(
({ startDate, endDate }) => {
setOpen(false);
setRange({ startDate, endDate });
},
[setOpen, setRange]
);
return (
<SafeAreaProvider>
<View style={{justifyContent: 'center', flex: 1, alignItems: 'center'}}>
<Button onPress={() => setOpen(true)} uppercase={false} mode="outlined">
Pick range
</Button>
<DatePickerModal
locale="en"
mode="range"
visible={open}
onDismiss={onDismiss}
startDate={range.startDate}
endDate={range.endDate}
onConfirm={onConfirm}
/>
</View>
</SafeAreaProvider>
);
}
Author: web-ridge
Live Demo: View The Demo
Download Link: Download The Source Code
Official Website: https://github.com/web-ridge/react-native-paper-dates
License: MIT