Smooth and fast cross platform Material Design date and time picker for React Native Paper

Overview

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 (automatic day name, month translations without bundle size increase)
  • For Android Intl support please follow the android-caveats guide
  • Simple API
  • Typesafe
  • Endless (virtual) scrolling
  • Performant
  • Great React Native Web support
  • Dependencies are react-native-paper

Demo of react-native-paper-dates

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

Usage

Single date Picker

Pick single date ); } ">
import * as React from 'react';
import { Button } from 'react-native-paper';
import { DatePickerModal } from 'react-native-paper-dates';

export default function ReadMeExampleSingle() {
  const [date, setDate] = React.useState<Date | undefined>(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 (
    <>
      <Button onPress={() => setOpen(true)} uppercase={false} mode="outlined">
        Pick single date
      </Button>
      <DatePickerModal
        // locale={'en'} optional, default: automatic
        mode="single"
        visible={open}
        onDismiss={onDismissSingle}
        date={date}
        onConfirm={onConfirmSingle}
        // validRange={{
        //   startDate: new Date(2021, 1, 2),  // optional
        //   endDate: new Date(), // optional
        // }}
        // onChange={} // same props as onConfirm but triggered without confirmed by user
        // saveLabel="Save" // optional
        // label="Select date" // optional
        // animationType="slide" // optional, default is 'slide' on ios/android and 'none' on web
      />
    </>
  );
}

Range picker

Pick range ); } ">
import * as React from 'react';
import { Button } from 'react-native-paper';

import { DatePickerModal } from 'react-native-paper-dates';

export default function ReadMeExampleRange() {
  const [range, setRange] = React.useState<{
    startDate: Date | undefined;
    endDate: Date | undefined;
  }>({ 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 (
    <>
      <Button onPress={() => setOpen(true)} uppercase={false} mode="outlined">
        Pick range
      </Button>
      <DatePickerModal
        // locale={'en'} optional, default: automatic
        mode="range"
        visible={open}
        onDismiss={onDismiss}
        startDate={range.startDate}
        endDate={range.endDate}
        onConfirm={onConfirm}
        // validRange={{
        //   startDate: new Date(2021, 1, 2),  // optional
        //   endDate: new Date(), // optional
        // }}
        // onChange={} // same props as onConfirm but triggered without confirmed by user
        // locale={'nl'} // optional
        // saveLabel="Save" // optional
        // label="Select period" // optional
        // startLabel="From" // optional
        // endLabel="To" // optional
        // animationType="slide" // optional, default is slide on ios/android and none on web
      />
    </>
  );
}

Multiple dates picker

Pick multiple dates ); } ">
import * as React from 'react';
import { Button } from 'react-native-paper';

import { DatePickerModal } from 'react-native-paper-dates';

export default function ReadMeExampleMultiple() {
  const [dates, setDates] = React.useState<Date[] | undefined>();
  const [open, setOpen] = React.useState(false);

  const onDismiss = React.useCallback(() => {
    setOpen(false);
  }, [setOpen]);

  const onConfirm = React.useCallback((params) => {
    setOpen(false);
    setDates(params.dates);
    console.log('[on-change-multi]', params);
  }, []);

  return (
    <>
      <Button onPress={() => setOpen(true)} uppercase={false} mode="outlined">
        Pick multiple dates
      </Button>

      <DatePickerModal
        // locale={'en'} optional, default: automatic
        mode="multiple"
        visible={open}
        onDismiss={onDismiss}
        dates={dates}
        onConfirm={onConfirm}
        // moreLabel="More"
        // validRange={{
        //   startDate: new Date(2021, 1, 2),  // optional
        //   endDate: new Date(), // optional
        // }}
        // locale={'nl'} // optional
        // saveLabel="Save" // optional
        // label="Select period" // optional
        // startLabel="From" // optional
        // endLabel="To" // optional
        // animationType="slide" // optional, default is slide on ios/android and none on web
      />
    </>
  );
}

Time picker

) } ">
import * as React from 'react'
import { Button } from 'react-native-paper'
import { TimePickerModal } from 'react-native-paper-dates'

export default function TimePickerPage() {
  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 (
    <>
      <TimePickerModal
        visible={visible}
        onDismiss={onDismiss}
        onConfirm={onConfirm}
        hours={12} // default: current hours
        minutes={14} // default: current minutes
        label="Select time" // optional, default 'Select time'
        cancelLabel="Cancel" // optional, default: 'Cancel'
        confirmLabel="Ok" // optional, default: 'Ok'
        animationType="fade" // optional, default is 'none'
        locale={'en'} // optional, default is automically detected by your system
      />
      <Button onPress={()=> setVisible(true)}>
        Pick time
      </Button>
    </>
  )
}

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
    keyboardDismissMode="on-drag"
    keyboardShouldPersistTaps="handled"
    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

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

  • You have Hermes enabled
  • 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

update: Hermes is planning on native Intl support in version 0.65! when that's released we won't need any polyfills anymore!

But for now.

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)

// on top of your index.android.js file
const isAndroid = require('react-native').Platform.OS === 'android';
const isHermesEnabled = !!global.HermesInternal;

// in your index.js file
if (isHermesEnabled || isAndroid) {

  require('@formatjs/intl-getcanonicallocales/polyfill');
  require('@formatjs/intl-locale/polyfill');


  require('@formatjs/intl-pluralrules/polyfill');
  require('@formatjs/intl-pluralrules/locale-data/en.js'); // USE YOUR OWN LANGUAGE OR MULTIPLE IMPORTS YOU WANT TO SUPPORT

  require('@formatjs/intl-displaynames/polyfill');
  require('@formatjs/intl-displaynames/locale-data/en.js'); // USE YOUR OWN LANGUAGE OR MULTIPLE IMPORTS YOU WANT TO SUPPORT

  require('@formatjs/intl-listformat/polyfill');
  require('@formatjs/intl-listformat/locale-data/en.js'); // USE YOUR OWN LANGUAGE OR MULTIPLE IMPORTS YOU WANT TO SUPPORT

  require('@formatjs/intl-numberformat/polyfill');
  require('@formatjs/intl-numberformat/locale-data/en.js'); // USE YOUR OWN LANGUAGE OR MULTIPLE IMPORTS YOU WANT TO SUPPORT

  require('@formatjs/intl-relativetimeformat/polyfill');
  require('@formatjs/intl-relativetimeformat/locale-data/en.js'); // USE YOUR OWN LANGUAGE OR MULTIPLE IMPORTS YOU WANT TO SUPPORT

  require('@formatjs/intl-datetimeformat/polyfill');
  require('@formatjs/intl-datetimeformat/locale-data/en.js'); // USE YOUR OWN LANGUAGE OR MULTIPLE IMPORTS YOU WANT TO SUPPORT

  require('@formatjs/intl-datetimeformat/add-golden-tz.js');



  // https://formatjs.io/docs/polyfills/intl-datetimeformat/#default-timezone

  if ('__setDefaultTimeZone' in Intl.DateTimeFormat) {

    // If you are using react-native-cli
    let RNLocalize = require('react-native-localize');
    Intl.DateTimeFormat.__setDefaultTimeZone(RNLocalize.getTimeZone());

    //  Are you using Expo, use this instead of previous 2 lines
    //  Intl.DateTimeFormat.__setDefaultTimeZone(
    //    require("expo-localization").timezone
    //  );
  }
}

Contributing

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

License

MIT

Checkout our other libraries

Issues
  • not working on android

    not working on android

    type error: can not read property "prototype" of undefined, js engine: hermes

    documentation question Can't reproduce 
    opened by 034502219988 42
  • Support multiple date selection

    Support multiple date selection

    This PR plans to add multiple date support, to close #43.

    • [x] Add dates prop to Calendar, allowing it to receive multiple dates rather than just 1
    • [x] Add mode="multiple" to DatePicker
    • [x] Add label to DatePickerModalHeaderContent when selecting multiple dates
    • [x] ~~Add option to require at least 1 date (i.e. don't remove the last date if it's changed.) Maybe this should just be done by users by not changing the date if length < 1~~ Instead, we notify users with the day just clicked and whether it was added or removed

    @RichardLindhout Can you confirm that we can close this if I can get it done and make it work well?

    Thanks!

    opened by nandorojo 10
  • Feature Request: min/max date in range picker

    Feature Request: min/max date in range picker

    Adding MinDate Prop will be so usefull while selecting Dates Now We Can able to select previous dates also I want the User select after today Dates only

    enhancement good first issue Low priority 
    opened by Devathedeveloper 10
  • switch timepicker modal format from am/pm to 24 hours

    switch timepicker modal format from am/pm to 24 hours

    How to change am-pm to 24 hours format in date picker?

    Screenshot 2020-12-08 at 6 32 56 PM question Can't reproduce 
    opened by ganesh-papola 9
  • error seconDate.getFullYear is not a function

    error seconDate.getFullYear is not a function

    error getInitialIndex

    ExceptionsManager.js:179 TypeError: secondDate.getFullYear is not a function

    This error is located at: in Calendar (at StockForm.js:216) in RCTView (at View.js:34) in View (at StockForm.js:188) in RCTView (at View.js:34) in View (at StockForm.js:178) in RCTView (at View.js:34) in View (at StockForm.js:403) in RCTView (at View.js:34) in View (at StockForm.js:402) in RCTView (at View.js:34) in View (at ScrollView.js:1124)

    ExceptionsManager.js:179 TypeError: secondDate.getFullYear is not a function

    This error is located at: in Calendar (at DatePickerModalContent.tsx:186) in RCTView (at View.js:34) in View (at createAnimatedComponent.js:165) in AnimatedComponent (at createAnimatedComponent.js:215) in ForwardRef(AnimatedComponentWrapper) (at AnimatedCrossView.tsx:32) in RCTView (at View.js:34) in View (at AnimatedCrossView.tsx:31) in AnimatedCrossView (at DatePickerModalContent.tsx:183) in DatePickerModalContent (at DatePickerModal.tsx:124) in RCTView (at View.js:34) in View (at DatePickerModal.tsx:101) in RCTView (at View.js:34) in View (at DatePickerModal.tsx:97)

    question Can't reproduce 
    opened by arwysyah 9
  • Add date range support

    Add date range support

    Added support for an optional validRange prop. Closes #48.

    Usage:

    <DatePickerModal 
      validRange={{
        startDate: new Date(),
        endDate: dateInTheFuture()  
      }}
    />
    

    Both startDate and endDate are optional.

    List

    • [x] Disable clicking items not matching range
    • [x] Blur items outside of the range
    • [x] Make range opt-in only, per-field
    • [x] Add validRange to example app
    opened by nandorojo 9
  • Calendar’s weekdays are broken

    Calendar’s weekdays are broken

    This is a very urgent bug. The weekdays at the top of the calendar are incorrect, rendering the calendar a bit useless.

    image

    Notice the highlighted day in the photo. It says Friday March 6th. But today is Saturday March 6th. Calendars (at least in the US) typically start with a Sunday, so maybe that explains the problem.

    Compare with the correct dates from iPhone Calendar:

    image

    I have users trying to select dates based on weekdays, and they're choosing the wrong one.

    The problem happens on nearly every month. You can see it on the example app: https://www.reactnativepaperdates.com/

    Compare it to a calendar and you'll see that the days are wrong.

    @RichardLindhout please tell me if I can help solve this somehow. It's really important this gets fixed in order to keep using the library. Thank you!

    bug Priority DatePicker 
    opened by nandorojo 8
  • Add option to pass modal props to DatePickerModal

    Add option to pass modal props to DatePickerModal

    Hi,

    First of all wanted to say thank you, this package looks very nice 👍

    I think we should have an option to pass modal props such as animationType, presentationStyle instead of hard coded values like this https://github.com/web-ridge/react-native-paper-dates/blob/master/src/DatePickerModal.tsx#L97

    Let me know what do you think. I can send a PR if this sounds ok for you

    opened by ykliuiev 6
  • design issue on ipad

    design issue on ipad

    Screenshot 2021-01-08 at 1 17 09 PM design is not proper on ipads. gap between days and dates question Can't reproduce 
    opened by ganesh-papola 6
  • Add Time Picker

    Add Time Picker

    https://material.io/components/time-pickers

    enhancement v1.0.0 done in #development branch 
    opened by RichardLindhout 5
  • Introduce disabled dates prop.

    Introduce disabled dates prop.

    Pull request in response to issue #103.

    • This PR introduces a disabledDates prop for all calendar types. For example scenario refer to #103.
    opened by iM-GeeKy 2
  • chore(deps): bump tmpl from 1.0.4 to 1.0.5 in /example

    chore(deps): bump tmpl from 1.0.4 to 1.0.5 in /example

    Bumps tmpl from 1.0.4 to 1.0.5.

    Commits

    Dependabot compatibility score

    Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.


    Dependabot commands and options

    You can trigger Dependabot actions by commenting on this PR:

    • @dependabot rebase will rebase this PR
    • @dependabot recreate will recreate this PR, overwriting any edits that have been made to it
    • @dependabot merge will merge this PR after your CI passes on it
    • @dependabot squash and merge will squash and merge this PR after your CI passes on it
    • @dependabot cancel merge will cancel a previously requested merge and block automerging
    • @dependabot reopen will reopen this PR if it is closed
    • @dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually
    • @dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)
    • @dependabot use these labels will set the current labels as the default for future PRs for this repo and language
    • @dependabot use these reviewers will set the current reviewers as the default for future PRs for this repo and language
    • @dependabot use these assignees will set the current assignees as the default for future PRs for this repo and language
    • @dependabot use this milestone will set the current milestone as the default for future PRs for this repo and language

    You can disable automated security fix PRs for this repo from the Security Alerts page.

    dependencies 
    opened by dependabot[bot] 0
  • chore(deps): bump tmpl from 1.0.4 to 1.0.5

    chore(deps): bump tmpl from 1.0.4 to 1.0.5

    Bumps tmpl from 1.0.4 to 1.0.5.

    Commits

    Dependabot compatibility score

    Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.


    Dependabot commands and options

    You can trigger Dependabot actions by commenting on this PR:

    • @dependabot rebase will rebase this PR
    • @dependabot recreate will recreate this PR, overwriting any edits that have been made to it
    • @dependabot merge will merge this PR after your CI passes on it
    • @dependabot squash and merge will squash and merge this PR after your CI passes on it
    • @dependabot cancel merge will cancel a previously requested merge and block automerging
    • @dependabot reopen will reopen this PR if it is closed
    • @dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually
    • @dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)
    • @dependabot use these labels will set the current labels as the default for future PRs for this repo and language
    • @dependabot use these reviewers will set the current reviewers as the default for future PRs for this repo and language
    • @dependabot use these assignees will set the current assignees as the default for future PRs for this repo and language
    • @dependabot use this milestone will set the current milestone as the default for future PRs for this repo and language

    You can disable automated security fix PRs for this repo from the Security Alerts page.

    dependencies 
    opened by dependabot[bot] 0
  • chore(deps): bump semver-regex from 3.1.2 to 3.1.3

    chore(deps): bump semver-regex from 3.1.2 to 3.1.3

    Bumps semver-regex from 3.1.2 to 3.1.3.

    Commits

    Dependabot compatibility score

    Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.


    Dependabot commands and options

    You can trigger Dependabot actions by commenting on this PR:

    • @dependabot rebase will rebase this PR
    • @dependabot recreate will recreate this PR, overwriting any edits that have been made to it
    • @dependabot merge will merge this PR after your CI passes on it
    • @dependabot squash and merge will squash and merge this PR after your CI passes on it
    • @dependabot cancel merge will cancel a previously requested merge and block automerging
    • @dependabot reopen will reopen this PR if it is closed
    • @dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually
    • @dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)
    • @dependabot use these labels will set the current labels as the default for future PRs for this repo and language
    • @dependabot use these reviewers will set the current reviewers as the default for future PRs for this repo and language
    • @dependabot use these assignees will set the current assignees as the default for future PRs for this repo and language
    • @dependabot use this milestone will set the current milestone as the default for future PRs for this repo and language

    You can disable automated security fix PRs for this repo from the Security Alerts page.

    dependencies 
    opened by dependabot[bot] 0
  • Timepicker: selecting 12pm returns 24 hrs

    Timepicker: selecting 12pm returns 24 hrs

    Using version 0.4.6.

    There seems to be a bug with 12PM and 12AM-- selecting 12pm is returning "24 hours". and 12AM is returning "12 hours".

    Using the TimePicker with all defaults, just setting the onDismiss and onConfirm:

    <TimePickerModal
       visible={showTimePicker}
       onDismiss={onTimePickerDismissed}
       onConfirm={onTimePicked}     
    />
    

    Picking 12 pm somehow adds an extra 12 hrs as if it is midnight.

    Expected vs Actual (buggy) results below.

    Expected:

    | Selected | Value | |----|----| 11 AM | 11 hours| 12 PM | 12 hours| 1 PM | 13 hours|

    What the Bug Shows:

    | Selected | Value | |----|----| 11 AM | 11 hours| 12 PM | 24 hours| 1 PM | 13 hours|

    Is the time picker not using standard 24 hr time?

    If so, the hours should match as follows:

    | Selected | Value | |----|----| 1 AM | 1 hours| 2 AM | 2 hours| 3 AM | 3 hours| 4 AM | 4 hours| 5 AM | 5 hours| 6 PM | 6 hours| 7 AM | 7 hours| 8 PM | 8 hours| 9 PM | 9 hours| 10 AM | 10 hours| 11 PM | 11 hours| 12 PM | 12 hours| 1 PM | 13 hours| 2 PM | 14 hours| 3 PM | 15 hours| 4 PM | 16 hours| 5 PM | 17 hours| 6 PM | 18 hours| 7 PM | 19 hours| 8 PM | 20 hours| 9 PM | 21 hours| 10 PM | 22 hours| 11 PM | 23 hours| 12 AM | 24 hours|

    The logic for 12AM/PM has been swapped with this time picker.

    bug high priority 
    opened by aaronfg 9
  • Is there a way to make the page where startDate is the first page to show?

    Is there a way to make the page where startDate is the first page to show?

    Currently the component always opens the modal in the month corresponding to the current date.

    The UX problem with such approach arises when using the "range" or "multiple" modes and setting the startDate for a month different than the one for the current date. The startDate is not visible unless you specifically scroll/navigate to the corresponding month. That's not intuitive for average or non tech savvy users (I got real-life validation for this). I didn't find a prop where you can set/decide if the start dates page is the one for the current date or the one for the startDate.

    Am I missing something or is this a feature not currently implemented?

    Thank you in advance for the attention.

    enhancement 
    opened by mogarick 0
  • Support disable dates between the validRange for

    Support disable dates between the validRange for "multiple" or "range" modes

    First than all, congratulations for the component! It rocks!.

    Now going to the point.

    In a use case for an event that occurs along 3 to 4 days when a day is full and not accepting new registrations, such day should be disabled to pick. The current implementation only supports to provide a range and to disable weekDays but it doesn't support to disable specific date between the such range.

    So an additional and optional param would be needed in validRange named disabledDates where we can add dates to disable between the valid range . A validation would be needed to ensure the disabled dates are in range or just ignore them if they aren’t.

    Digging a little bit into de code of Month.tsx the next modif could be made inside code block starting at L240:

    
    if (inRange) {
    	disabled = false;
    	let inDisabledDates = validRangeDisabledDates.some(disabledDate => disabledDate === day);
    	if(inDisabledDates) {
    		disabled = true
    	}
    }
    
    

    A conversion for disabledDates may be needed to ensure a day vs day comparison and the result assigned to validRangeDisabledDates array where we can use it to make the comparison and determine if the day is disabled or not.

    I'm not sure if more modifs are needed since a didn't dig deeper into the code.

    Could it be possible such change?

    Thank you in advance.

    opened by mogarick 0
  • None of these files exist Single date picker

    None of these files exist Single date picker

    I got a Syntax Error with the error showing in the image. Saying none of these files exist on android emulator. I followed the Android caveats and it didn't work.

    This is my implementation code:

    export const DateInput = ({ mode, label }: DateInputProps) => {
      const [opened, setOpened] = React.useState(false);
    
      const onDismiss = React.useCallback(() => {
        setOpened(false);
      }, [setOpened]);
    
      return (
        <>
          <TextInput mode={mode} label={label}
            right={<TextInput.Icon color="rgba(0,0,0,0.6)" name="calendar" forceTextInputFocus={false}
              onPress={() => setOpened(true)}
            />}
          />
          <DatePickerModal mode="single" visible={opened} onConfirm={ () => console.log('confirmed')} onDismiss={onDismiss}/>
        </>
      );
    };
    

    image

    Any help is appreciated. Thanks

    opened by mschief148 1
  • DatePickerModal Output Format

    DatePickerModal Output Format

    Hello Sir,

    I need that the date should come in output in format DD/MM/YYYY I dont want to convert it Directly it should come in the above format

    or is there any good method of conversion

    opened by abhinay1435 1
  • The date isn't updated if user types at the middle.

    The date isn't updated if user types at the middle.

    5 If the user types at the middle of the input in this screen, the date isn't updated. Line 79-81 of TextInputMask.tsx file should be fixed like this if you don't mind.

        if (enhancedText.length === mask.length) {
          onChangeText && onChangeText(enhancedText)
        }
    
    bug enhancement high priority 
    opened by funnywebdev 0
Releases(v0.4.6)
  • v0.4.6(May 13, 2021)

  • v0.4.5(Apr 7, 2021)

  • v0.4.4(Apr 7, 2021)

  • v0.4.2(Apr 2, 2021)

  • v0.4.1(Mar 17, 2021)

  • v0.4.0(Mar 10, 2021)

    0.4.0 (2021-03-10)

    Bugfixes

    • DatePicker crashes when entering invalid date in edit. Thanks @chakrihacker!

    Features

    • min/max date in range picker by @nandorojo (Twitter
    • When using multiselect and selecting multiple days after each other show the range layout in background https://github.com/web-ridge/react-native-paper-dates/issues/50
    • also check valid range in input mode + show errors (92c7c94)
    • optional range util (7408a8c)
    • valid range support (1b5da06)

    Breaking changes

    • removed undocumented excludeInRange mode
    Source code(tar.gz)
    Source code(zip)
  • v0.3.2(Mar 6, 2021)

  • v0.3.1(Mar 6, 2021)

  • v0.3.0(Feb 20, 2021)

    0.3.0 (2021-02-20)

    New features

    You can use it like this

    import * as React from 'react';
    import { Button } from 'react-native-paper';
    
    import { DatePickerModal } from 'react-native-paper-dates';
    
    export default function ReadMeExampleMultiple() {
      const [dates, setDates] = React.useState<Date[] | undefined>();
      const [open, setOpen] = React.useState(false);
    
      const onDismiss = React.useCallback(() => {
        setOpen(false);
      }, [setOpen]);
    
      const onConfirm = React.useCallback((params) => {
        setOpen(false);
        setDates(params.dates);
        console.log('[on-change-multi]', params);
      }, []);
    
      return (
        <>
          <Button onPress={() => setOpen(true)} uppercase={false} mode="outlined">
            Pick multiple dates
          </Button>
    
          <DatePickerModal
            // locale={'en'} optional, default: automatic
            mode="multiple"
            visible={open}
            onDismiss={onDismiss}
            dates={dates}
            onConfirm={onConfirm}
            // locale={'nl'} // optional
            // saveLabel="Save" // optional
            // label="Select period" // optional
            // startLabel="From" // optional
            // endLabel="To" // optional
            // animationType="slide" // optional, default is slide on ios/android and none on web
          />
        </>
      );
    }
    
    Source code(tar.gz)
    Source code(zip)
  • v0.2.15(Jan 20, 2021)

    0.2.15 (2021-01-20)

    Bug Fixes

    • Fix for 'Not working on Android' (https://github.com/web-ridge/react-native-paper-dates/issues/33) Thanks to @dviluk for helping me on the issue 👌!

    You should re-read the instructions for Android since we didn't follow the flow diagram provided by FormatJS it will result in errors on Android if not using Hermes (but it will potentially also result in bugs in the future when using Hermes)

    The import order of the formatjs imports was wrong and should change to the code below.

    // on top of your index.js file
    const isAndroid = require('react-native').Platform.OS === 'android';
    const isHermesEnabled = !!global.HermesInternal;
    
    // in your index.js file
    if (isHermesEnabled || isAndroid) {
    
      require('@formatjs/intl-getcanonicallocales/polyfill');
      require('@formatjs/intl-locale/polyfill');
    
    
      require('@formatjs/intl-pluralrules/polyfill');
      require('@formatjs/intl-pluralrules/locale-data/en.js'); // USE YOUR OWN LANGUAGE OR MULTIPLE IMPORTS YOU WANT TO SUPPORT
    
      require('@formatjs/intl-displaynames/polyfill');
      require('@formatjs/intl-displaynames/locale-data/en.js'); // USE YOUR OWN LANGUAGE OR MULTIPLE IMPORTS YOU WANT TO SUPPORT
      
      require('@formatjs/intl-listformat/polyfill');
      require('@formatjs/intl-listformat/locale-data/en.js'); // USE YOUR OWN LANGUAGE OR MULTIPLE IMPORTS YOU WANT TO SUPPORT
      
      require('@formatjs/intl-numberformat/polyfill');
      require('@formatjs/intl-numberformat/locale-data/en.js'); // USE YOUR OWN LANGUAGE OR MULTIPLE IMPORTS YOU WANT TO SUPPORT
      
      require('@formatjs/intl-relativetimeformat/polyfill');
      require('@formatjs/intl-relativetimeformat/locale-data/en.js'); // USE YOUR OWN LANGUAGE OR MULTIPLE IMPORTS YOU WANT TO SUPPORT
    
      require('@formatjs/intl-datetimeformat/polyfill');
      require('@formatjs/intl-datetimeformat/locale-data/en.js'); // USE YOUR OWN LANGUAGE OR MULTIPLE IMPORTS YOU WANT TO SUPPORT
    
      require('@formatjs/intl-datetimeformat/add-golden-tz.js');
    
    
    
      // https://formatjs.io/docs/polyfills/intl-datetimeformat/#default-timezone
      let RNLocalize = require('react-native-localize');
      if ('__setDefaultTimeZone' in Intl.DateTimeFormat) {
        Intl.DateTimeFormat.__setDefaultTimeZone(RNLocalize.getTimeZone());
      }
    }
    

    Source: formatjs.io/docs/polyfills

    Schermafbeelding 2021-01-20 om 21 21 43 Source code(tar.gz)
    Source code(zip)
  • v0.2.14(Jan 8, 2021)

  • v0.2.13(Jan 8, 2021)

  • v0.2.12(Dec 29, 2020)

  • v0.2.11(Dec 29, 2020)

  • v0.2.10(Dec 29, 2020)

    0.2.10 (2020-12-29)

    Improvements

    • Scroll automatically to specified startDate or date
    • Remove VirtualizedList and replace with ScrollView (iOS, Android) to prevent calculations on startup
    • Faster opening of modal by lazy rendering the Calendar (after layout has rendered)

    Bug Fixes

    • selecting year in single date picker (https://github.com/web-ridge/react-native-paper-dates/issues/4)
    • fix time picker on Android (b444a14)
    • improve debounce web + bugfix for calendar size on bigger screens (b539191)
    Source code(tar.gz)
    Source code(zip)
  • v0.2.9(Dec 28, 2020)

    0.2.9 (2020-12-28)

    Improvements

    • Dynamically calculate month offsets instead of calculating all offsets at startup (performance improvement) (5d1d32f)
    • Remove dependency on react-window (performance and bundle size improvement) (5d1d32f)

    Bug Fixes

    • pick right status bar color when dark text should be used fixed #30 (5de39c9)
    Source code(tar.gz)
    Source code(zip)
  • v0.2.8(Dec 25, 2020)

  • v0.2.7(Dec 19, 2020)

    0.2.7 (2020-12-19)

    0.2.6 (2020-12-19)

    Fix bug where time picker would not work good on some numbers (fixed https://github.com/web-ridge/react-native-paper-dates/issues/26)

    You can now use locale to force a language if automatic detection is not good enough, fixed https://github.com/web-ridge/react-native-paper-dates/issues/12

      <DatePickerModal
            locale="en"
            ....rest
    />
    
      <TimePickerModal
            locale="en"
            ....rest
    />
    
    Source code(tar.gz)
    Source code(zip)
  • v0.2.6(Dec 19, 2020)

  • v0.2.5(Dec 15, 2020)

  • v0.2.4(Dec 15, 2020)

  • v0.2.3(Nov 12, 2020)

  • v0.2.2(Nov 12, 2020)

  • v0.2.1(Nov 11, 2020)

  • v0.2.0(Nov 11, 2020)

    0.2.0 (2020-11-11)

    Features

    • Bugfixes for calendar (wrong year was used for days in month)
    • Added time picker (closes https://github.com/web-ridge/react-native-paper-dates/issues/3)
    • Dark mode support (closes https://github.com/web-ridge/react-native-paper-dates/issues/8)
    • Use the modal react-native-web provides (closes https://github.com/web-ridge/react-native-paper-dates/issues/16)
    • Numeric input on mobile web (closes https://github.com/web-ridge/react-native-paper-dates/issues/5)
    • animationType and better defaults (2df57d3), closes #21 Thanks @ykliuiev!

    Breaking Changes

    None, but you'll need later versions of react-native-web

    Source code(tar.gz)
    Source code(zip)
  • v0.1.6(Aug 19, 2020)

    • Smooth and fast cross platform date picker for React Native Paper
    • Tested on Android, iOS and the web platform!
    • Uses the native Date.Intl API's which work out of the box on the web / iOS
    • Simple API
    • Typesafe
    • Endless scrolling
    • Performant
    Source code(tar.gz)
    Source code(zip)
Owner
webRidge
We make modern software solutions and we provide our base blocks to the open-source community.
webRidge
Cross Platform Material Alert and Prompt Dialogs for React Native. Imperative API, Android, IOS, Web

React Native Paper Alerts Cross Platform Material Alert and Prompt for React Native. It tries to follow the API and function signature of React Native

Arafat Zahan 5 Aug 5, 2021
Material Design for React Native (Android & iOS)

Material design for React Native. reactnativepaper.com Features Follows material design guidelines Works on both iOS and Android following platform ad

Callstack 8.5k Oct 4, 2021
iOS/Android image picker with support for camera, video, configurable compression, multiple images and cropping

react-native-image-crop-picker iOS/Android image picker with support for camera, video, configurable compression, multiple images and cropping Result

Ivan Pusic 5.2k Oct 11, 2021
Pixel–perfect, native–looking typographic styles for React Native ✒️

Pixel–perfect, native–looking typographic styles for React Native. Why Creating great Text Styles in React Native is not a simple task, it requires a

Hector Garcia 3.3k Oct 14, 2021
🔽 A Picker component for React Native which emulates the native select> interfaces for iOS and Android

react-native-picker-select A Picker component for React Native which emulates the native <select> interfaces for iOS and Android For iOS, by default w

LawnStarter Organization 1.4k Oct 14, 2021
react-native-wheel-picker-android ★186 - Simple and flexible React native wheel picker for Android, including DatePicker and TimePicker.

React native wheel picker V2 A simple Wheel Picker for Android (For IOs is using Picker from react-native) Example You can clone the repo and run exam

Kalon.Tech 289 Sep 27, 2021
Bringing Material Design to React Native

A set of UI components, in the purpose of introducing Material Design to apps built with React Native, quickly and painlessly. Getting Started First,

Yingxin Wu 4.8k Oct 9, 2021
😍 A beautiful, fluid, and extensible dialogs API for Kotlin & Android.

Material Dialogs View Releases and Changelogs Modules The core module is the fundamental module that you need in order to use this library. The others

Aidan Follestad 19k Oct 6, 2021
An unified React Native Picker Modal component for iOS and Android.

React Native Picker Modal View React Native Module to select item picker modal. Created by Pankod An alternative to Picker and PickerIOS components wi

Pankod 166 Sep 24, 2021
Color picker component for IOS/Android

react-native-color-picker React Native implementation of color picker for both Android and iOS. works both in controlled and uncontrolled way old colo

null 237 Oct 14, 2021
Date Dialog for Hijri calendar for android

react-native-hijri-date-picker-android #This Module version is experimental, if you found any issues, kindly submit. Getting started Versions For Reac

Codelab 13 Jul 11, 2019
react-native-wheel-picker ★190 - React native cross platform picker.

react-native-wheel-picker Introduction Cross platform Picker component based on React-native. Since picker is originally supported by ios while Androi

Yu Zheng (Sam) 284 Oct 3, 2021
A Native Picker with high performance.

react-native-picker Documentation Params Key Type Default Support Description isLoop Boolean false Android pickerTextEllipsisLen number 6 Android pick

beefe 1.7k Oct 7, 2021
🇦🇶 Country picker provides a modal allowing a user to select a country from a list. It display a flag next to each country name.

Country Picker for React Native. iOS Android Web Demo ?? GO TO WEB DEMO ?? snack example Installation $ yarn add react-native-country-picker-modal Bas

Xavier Carpentier 854 Oct 3, 2021
React Native Picker Module Android & IOS

React Native Picker Module for Android & IOS With this package you can easily use picker with onPress function. Using react-native-modal and @react-na

Talut TASGIRAN 79 Oct 8, 2021
Development is switched to prscX/react-native-app-tour

Note: Development is switched to prscX/react-native-app-tour** Migration is with respect to ISSUE: 6 React Native Material Showcase iOS React Native B

Pranav Raj Singh Chauhan 91 Jun 2, 2021
A simple picker for React Native.

React Native Simple Picker A simple picker for React Native. Install $ npm install react-native-simple-picker --save iOS and Android From version 2.0

chris andersson 90 Aug 16, 2021
react native Picker component for both Android and iOS based on pure JavaScript [for the old realize, you can use the version 0.0.8]

The React-Native-Picker react native Picker component for both Android and iOS based on pure JavaScript. Main For the iOS, using PickerIOS as the basi

X  Fruit Team 78 Aug 3, 2021
Easier and faster developing your React Native apps

React Native Fast Base Easier and faster developing your React native apps Installation If you use yarn: yarn add react-native-fast-base Or by npm: n

M.H.Pousti 3 Jun 5, 2021