react-native-paper-dates

• Smooth and fast cross platform Material Design date picker and time picker for (react-native-paper)
• Tested on Android, iOS and the web
• Uses the native Date.Intl API's which work out of the box on the web / iOS an on Android with Hermes from RN version 0.66 (automatic day name, month translations without bundle size increase)
• For RN below 0.66 see for Android Intl support the android-caveats guide
• Simple API
• Typesafe
• Endless (virtual) scrolling
• Performant
• Great React Native Web support
• Dependencies are react-native-paper

View video in better frame on YouTube

Web demo: reactnativepaperdates.com

About us

We want developers to be able to build software faster using modern tools like GraphQL, Golang and React Native.

Give us a follow on Twitter: RichardLindhout, web_ridge

Donate

Please contribute or donate so we can spend more time on this library

Donate with PayPal

Getting started

First install and follow the guides at react-native-paper

Yarn

yarn add react-native-paper-dates

npm

npm install react-native-paper-dates --save

Import some localized strings

Ideally you do this somewhere in your index.js before react-native-paper-dates is used. Currently we only have en/nl/pl translations but it's really easy to add one extra since it are only some labels and error messages

1// e.g in your index.js
2import {
3  // en,
4  // nl,
5  // pl,
6  enGB,
7  registerTranslation,
8} from 'react-native-paper-dates'
9// registerTranslation('en', en)
10// registerTranslation('nl', nl)
11// registerTranslation('pl', pl)
12registerTranslation('en-GB', enGB)

or register your own

Please send a PR with your language to make sure all locales are there next time

1import {
2  registerTranslation,
3} from 'react-native-paper-dates'
4registerTranslation("pl", {
5  save: 'Save',
6  selectSingle: 'Select date',
7  selectMultiple: 'Select dates',
8  selectRange: 'Select period',
9  notAccordingToDateFormat: (inputFormat: string) =>
10    `Date format must be ${inputFormat}`,
11  mustBeHigherThan: 'Must be later then',
12  mustBeLowerThan: 'Must be earlier then',
13  mustBeBetween: 'Must be between',
14  dateIsDisabled: 'Day is not allowed',
15})

Usage

Single date Picker (modal)

1import * as React from 'react';
2import { Button } from 'react-native-paper';
3import { DatePickerModal } from 'react-native-paper-dates';
4
5export default function ReadMeExampleSingle() {
6  const [date, setDate] = React.useState<Date | undefined>(undefined);
7  const [open, setOpen] = React.useState(false);
8
9  const onDismissSingle = React.useCallback(() => {
10    setOpen(false);
11  }, [setOpen]);
12
13  const onConfirmSingle = React.useCallback(
14    (params) => {
15      setOpen(false);
16      setDate(params.date);
17    },
18    [setOpen, setDate]
19  );
20
21  return (
22    <>
23      <Button onPress={() => setOpen(true)} uppercase={false} mode="outlined">
24        Pick single date
25      </Button>
26      <DatePickerModal
27        locale="en"
28        mode="single"
29        visible={open}
30        onDismiss={onDismissSingle}
31        date={date}
32        onConfirm={onConfirmSingle}
33        // validRange={{
34        //   startDate: new Date(2021, 1, 2),  // optional
35        //   endDate: new Date(), // optional
36        //   disabledDates: [new Date()] // optional
37        // }}
38        // onChange={} // same props as onConfirm but triggered without confirmed by user
39        // saveLabel="Save" // optional
40        // label="Select date" // optional
41        // animationType="slide" // optional, default is 'slide' on ios/android and 'none' on web
42      />
43    </>
44  );
45}

Range picker (modal)

1import * as React from 'react';
2import { Button } from 'react-native-paper';
3
4import { DatePickerModal } from 'react-native-paper-dates';
5
6export default function ReadMeExampleRange() {
7  const [range, setRange] = React.useState<{
8    startDate: Date | undefined;
9    endDate: Date | undefined;
10  }>({ startDate: undefined, endDate: undefined });
11
12  const [open, setOpen] = React.useState(false);
13
14  const onDismiss = React.useCallback(() => {
15    setOpen(false);
16  }, [setOpen]);
17
18  const onConfirm = React.useCallback(
19    ({ startDate, endDate }) => {
20      setOpen(false);
21      setRange({ startDate, endDate });
22    },
23    [setOpen, setRange]
24  );
25
26  return (
27    <>
28      <Button onPress={() => setOpen(true)} uppercase={false} mode="outlined">
29        Pick range
30      </Button>
31      <DatePickerModal
32        locale="en"
33        mode="range"
34        visible={open}
35        onDismiss={onDismiss}
36        startDate={range.startDate}
37        endDate={range.endDate}
38        onConfirm={onConfirm}
39        // validRange={{
40        //   startDate: new Date(2021, 1, 2),  // optional
41        //   endDate: new Date(), // optional
42        //   disabledDates: [new Date()] // optional
43        // }}
44        // onChange={} // same props as onConfirm but triggered without confirmed by user
45        // saveLabel="Save" // optional
46        // label="Select period" // optional
47        // startLabel="From" // optional
48        // endLabel="To" // optional
49        // animationType="slide" // optional, default is slide on ios/android and none on web
50      />
51    </>
52  );
53}
54

Multiple dates picker

1import * as React from 'react';
2import { Button } from 'react-native-paper';
3
4import { DatePickerModal } from 'react-native-paper-dates';
5
6export default function ReadMeExampleMultiple() {
7  const [dates, setDates] = React.useState<Date[] | undefined>();
8  const [open, setOpen] = React.useState(false);
9
10  const onDismiss = React.useCallback(() => {
11    setOpen(false);
12  }, [setOpen]);
13
14  const onConfirm = React.useCallback((params) => {
15    setOpen(false);
16    setDates(params.dates);
17    console.log('[on-change-multi]', params);
18  }, []);
19
20  return (
21    <>
22      <Button onPress={() => setOpen(true)} uppercase={false} mode="outlined">
23        Pick multiple dates
24      </Button>
25
26      <DatePickerModal
27        locale="en"
28        mode="multiple"
29        visible={open}
30        onDismiss={onDismiss}
31        dates={dates}
32        onConfirm={onConfirm}
33        // moreLabel="More"
34        // validRange={{
35        //   startDate: new Date(2021, 1, 2),  // optional
36        //   endDate: new Date(), // optional
37        //   disabledDates: [new Date()] // optional
38        // }}
39        // saveLabel="Save" // optional
40        // label="Select period" // optional
41        // startLabel="From" // optional
42        // endLabel="To" // optional
43        // animationType="slide" // optional, default is slide on ios/android and none on web
44      />
45    </>
46  );
47}

Input date with modal button

1export default function ReadMeExampleDatePickerInput() {
2  const [inputDate, setInputDate] = React.useState<Date | undefined>(undefined)
3
4  return (
5    <>
6      <DatePickerInput
7        locale="en"
8        label="Birthdate"
9        value={inputDate}
10        onChange={(d) => setInputDate(d)}
11        inputMode="start"
12        // mode="outlined" (see react-native-paper docs)
13        // other react native TextInput props
14      />
15    </>
16  )
17}
18

Time picker

1import * as React from 'react'
2import { Button } from 'react-native-paper'
3import { TimePickerModal } from 'react-native-paper-dates'
4
5export default function TimePickerPage() {
6  const [visible, setVisible] = React.useState(false)
7  const onDismiss = React.useCallback(() => {
8    setVisible(false)
9  }, [setVisible])
10
11  const onConfirm = React.useCallback(
12    ({ hours, minutes }) => {
13      setVisible(false);
14      console.log({ hours, minutes });
15    },
16    [setVisible]
17  );
18
19
20  return (
21    <>
22      <TimePickerModal
23        visible={visible}
24        onDismiss={onDismiss}
25        onConfirm={onConfirm}
26        hours={12} // default: current hours
27        minutes={14} // default: current minutes
28        label="Select time" // optional, default 'Select time'
29        cancelLabel="Cancel" // optional, default: 'Cancel'
30        confirmLabel="Ok" // optional, default: 'Ok'
31        animationType="fade" // optional, default is 'none'
32        locale="en" // optional, default is automically detected by your system
33      />
34      <Button onPress={()=> setVisible(true)}>
35        Pick time
36      </Button>
37    </>
38  )
39}

Roadmap

Things on our roadmap have labels with enhancement. https://github.com/web-ridge/react-native-paper-dates/issues

Tips & Tricks

• Use 0.14+ version of React-Native-Web (Modal and better number input)
• Try to avoid putting the Picker Modals inside of a scrollView If that is not possible use the following props on the surrounding ScrollViews/Flatlists

1    keyboardDismissMode="on-drag"
2    keyboardShouldPersistTaps="handled"
3    contentInsetAdjustmentBehavior="always"

This is to prevent the need to press 2 times before save or close button in modal works (1 press for closing keyboard, 1 press for confirm/close) React Native Issue: #10138

Android Caveats

We recommend Hermes with React Native >= 0.66 you won't need these polyfills at all!

Below React Native 0.66

You will need to add a polyfill for the Intl API on Android if:

• You have Hermes enabled and are below React Native 0.66
• You have Hermes disabled and you want to support locales outside of en-US and you don't have the org.webkit:android-jsc-intl:+ variant enabled in your app/build.gradle

Install polyfills with Yarn

yarn add react-native-localize @formatjs/intl-pluralrules @formatjs/intl-getcanonicallocales @formatjs/intl-listformat @formatjs/intl-displaynames @formatjs/intl-locale @formatjs/intl-datetimeformat @formatjs/intl-numberformat @formatjs/intl-relativetimeformat

or npm

npm install react-native-localize @formatjs/intl-pluralrules @formatjs/intl-getcanonicallocales @formatjs/intl-listformat @formatjs/intl-displaynames @formatjs/intl-locale @formatjs/intl-datetimeformat @formatjs/intl-numberformat @formatjs/intl-relativetimeformat --save

In your app starting entrypoint e.g. ./index.js or even better use a index.android.js to prevent importing on iOS/web put the following code. (don't forget to import the languages you want to support, in the example only english language is supported)

1// on top of your index.android.js file
2const isAndroid = require('react-native').Platform.OS === 'android'; // this line is only needed if you don't use an .android.js file
3const isHermesEnabled = !!global.HermesInternal;  // this line is only needed if you don't use an .android.js file
4
5// in your index.js file
6if (isHermesEnabled || isAndroid) {  // this line is only needed if you don't use an .android.js file
7
8  require('@formatjs/intl-getcanonicallocales/polyfill');
9  require('@formatjs/intl-locale/polyfill');
10
11
12  require('@formatjs/intl-pluralrules/polyfill');
13  require('@formatjs/intl-pluralrules/locale-data/en.js'); // USE YOUR OWN LANGUAGE OR MULTIPLE IMPORTS YOU WANT TO SUPPORT
14
15  require('@formatjs/intl-displaynames/polyfill');
16  require('@formatjs/intl-displaynames/locale-data/en.js'); // USE YOUR OWN LANGUAGE OR MULTIPLE IMPORTS YOU WANT TO SUPPORT
17
18  require('@formatjs/intl-listformat/polyfill');
19  require('@formatjs/intl-listformat/locale-data/en.js'); // USE YOUR OWN LANGUAGE OR MULTIPLE IMPORTS YOU WANT TO SUPPORT
20
21  require('@formatjs/intl-numberformat/polyfill');
22  require('@formatjs/intl-numberformat/locale-data/en.js'); // USE YOUR OWN LANGUAGE OR MULTIPLE IMPORTS YOU WANT TO SUPPORT
23
24  require('@formatjs/intl-relativetimeformat/polyfill');
25  require('@formatjs/intl-relativetimeformat/locale-data/en.js'); // USE YOUR OWN LANGUAGE OR MULTIPLE IMPORTS YOU WANT TO SUPPORT
26
27  require('@formatjs/intl-datetimeformat/polyfill');
28  require('@formatjs/intl-datetimeformat/locale-data/en.js'); // USE YOUR OWN LANGUAGE OR MULTIPLE IMPORTS YOU WANT TO SUPPORT
29
30  require('@formatjs/intl-datetimeformat/add-golden-tz.js');
31
32
33
34  // https://formatjs.io/docs/polyfills/intl-datetimeformat/#default-timezone
35
36  if ('__setDefaultTimeZone' in Intl.DateTimeFormat) {
37
38    // If you are using react-native-cli
39    let RNLocalize = require('react-native-localize');
40    Intl.DateTimeFormat.__setDefaultTimeZone(RNLocalize.getTimeZone());
41
42    //  Are you using Expo, use this instead of previous 2 lines
43    //  Intl.DateTimeFormat.__setDefaultTimeZone(
44    //    require("expo-localization").timezone
45    //  );
46  }
47} // this line is only needed if you don't use an .android.js file

Contributing

See the contributing guide to learn how to contribute to the repository and the development workflow.

License

MIT

Checkout our other libraries

• Simple form library for React Native with great UX for developer and end-user react-native-use-form
• Smooth and fast cross platform Material Design Tabs for React Native Paper: react-native-paper-tabs
• Simple translations in React (Native): react-ridge-translations
• Simple global state management in React (Native): react-ridge-state
• 1 command utility for React Native (Web) project: create-react-native-web-application