A simple, performant, multilingual, Material Design inspired date, time, and date range picker component for react-native-paper.
How to use it:
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> ); }
Previews:
Download Details:
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