npmpackage.info

Gathering detailed insights and metrics for react-native-date-picker

Other packages similar to react-native-date-picker

@velotzy/react-native-date-range

1.5.3

A Simple React Native date picker.

@dietime/react-native-date-picker

1.2.1

React Native date picker expo component for iOS, Android and browser. Designed using ScrollView.

react-native-common-date-picker

2.3.9

An awesome and cross-platform React Native date picker and calendar component for iOS and Android

@henninghall/react-native-date-picker

1.0.3

React native date picker

Gathering detailed insights and metrics for react-native-date-picker

react-native-date-picker

React Native Date Picker is datetime picker for Android and iOS. It includes date, time and datetime picker modes. The datepicker is customizable and is supporting different languages. It's written with native code to achieve the best possible look, feel and performance.

5.0.7

2,256

MIT

Java

19,258,683 3.1

Installations

npm install react-native-date-picker

Pull Requests

Open

0

Total

262

Closed

38

Merged

224

Issues

Open

33

Total

527

Closed

494

Releases

5.0.7

Published on 31 Aug 2024

5.0.6

Published on 30 Aug 2024

5.0.5

Published on 25 Aug 2024

5.0.4

Published on 28 May 2024

5.0.3

Published on 24 May 2024

5.0.2

Published on 19 Apr 2024

View all 99 releases

Developer

henninghall

Developer Guide

BETA

Module System

CommonJS

Min. Node Version

Typescript Support

No

Node Version

18.20.4

NPM Version

10.7.0 Statistics

2,256 Stars

624 Commits

346 Forks

8 Watching

74 Branches

44 Contributors

Updated on 26 Nov 2024

Languages

Java (82.63%)

JavaScript (9.03%)

Objective-C++ (5.33%)

Objective-C (1.54%)

TypeScript (0.66%)

Shell (0.48%)

Ruby (0.33%)

Total Downloads

Cumulative downloads

Total Downloads

19,258,683

Last day

-5.2%

38,387

Compared to previous day

Last week

8.3%

207,662

Compared to previous week

Last month

8.6%

833,339

Compared to previous month

Last year

67.4%

8,523,519

Compared to previous year

Daily Downloads

Weekly Downloads

Monthly Downloads

Yearly Downloads

Peer Dependencies

react react-native

Dev Dependencies

@babel/core @babel/preset-env @react-native/eslint-config @types/jest @types/react babel-jest eslint eslint-plugin-ft-flow jest prettier react-native typescript

Versions

React Native Date Picker

This is a React Native Date Picker with following main features:

📱 Supports iOS, Android and Expo
🕑 3 different modes: Time, Date, DateTime
🌍 Various languages
🎨 Customizable
🖼 Modal or Inlined

Modal

The first option is to use the built-in modal. See code.


iOS	Android

Inlined

The second option is to use the inlined picker. Place it in a View or a custom made modal. See code.


iOS	Android

Requirements

Xcode >= 11.6
React Native >= 0.57.
If using React Native 0.64, 0.64.2 or later must be used.
If using Expo, SDK 42 or later must be used. If using Expo SDK 44, 44.0.4 or later must be used.

Expo

✅ You can use this library with Development Builds. No config plugin is required.
❌ This library can't be used in the "Expo Go" app because it requires custom native code.

Installation

Download package

1# npm
2npm install react-native-date-picker
3
4# yarn
5yarn add react-native-date-picker
6
7# pnpm
8pnpm add react-native-date-picker

Install pods (skip for expo projects)

cd ios && pod install

Rebuild the project

1# expo projects
2npx expo run:android
3npx expo run:ios
4
5# non-expo projects
6npx react-native run-android
7npx react-native run-ios

If you're having troubles after following these steps, there might be a linking issue.

Example 1: Modal

1import React, { useState } from 'react'
2import { Button } from 'react-native'
3import DatePicker from 'react-native-date-picker'
4
5export default () => {
6  const [date, setDate] = useState(new Date())
7  const [open, setOpen] = useState(false)
8
9  return (
10    <>
11      <Button title="Open" onPress={() => setOpen(true)} />
12      <DatePicker
13        modal
14        open={open}
15        date={date}
16        onConfirm={(date) => {
17          setOpen(false)
18          setDate(date)
19        }}
20        onCancel={() => {
21          setOpen(false)
22        }}
23      />
24    </>
25  )
26}

Example 2: Inlined

1import React, { useState } from 'react'
2import DatePicker from 'react-native-date-picker'
3
4export default () => {
5  const [date, setDate] = useState(new Date())
6
7  return <DatePicker date={date} onDateChange={setDate} />
8}

Props

Prop	Description	Screenshots iOS	Screenshot Android
`date`	The currently selected date.
`onDateChange`	Date change handler ( Inline only )
`maximumDate`	Maximum selectable date. Example: `new Date("2021-12-31")`
`minimumDate`	Minimum selectable date. Example: `new Date("2021-01-01")`
`minuteInterval`	The interval at which minutes can be selected.
`mode`	The date picker mode. `"datetime"`, `"date"`, `"time"`
`locale`	The locale for the date picker. Changes language, date order and am/pm preferences. Value needs to be a Locale ID.
`timeZoneOffsetInMinutes`	Timezone offset in minutes (default: device's timezone)
`is24hourSource`	Change how the 24h mode (am/pm) should be determined, by device settings or by locale. {'locale', 'device'} (android only, default: 'device')
`modal`	Boolean indicating if modal should be used. Default: `"false"`. When enabled, the other modal props needs to be used. See example.
`theme`	The theme of the modal. `"light"`, `"dark"`, `"auto"`. Defaults to `"auto"`.
`open`	Modal only: Boolean indicating if modal should be open.
`onConfirm`	Modal only: Date callback when user presses confirm button
`onCancel`	Modal only: Callback for when user presses cancel button or closing the modal by pressing outside it.
`title`	Modal only: Title text. Can be set to null to remove text.
`confirmText`	Modal only: Confirm button text.
`cancelText`	Modal only: Cancel button text.
`buttonColor`	Color of the confirm and cancel buttons. (android modal only)
`dividerColor`	Color of the divider / separator. (android only)
`onStateChange`	Spinner state change handler. Triggered on changes between "idle" and "spinning" state (Android inline only)

React Native's new architecture

This package supports React Native's new architecture (Fabric + Turbo Modules) from React Native 0.71 and forward. Support was introduced in version 4.3.0 of react-native-date-picker.

Linking

This package supports automatic linking. Usually, the only thing you need to do is to install the package, the cocoapods dependencies (as described above). Then rebuild the project by running react-native run-ios, react-native run-android or start the build from within Xcode/Android Studio. If you're running a React Native version below 0.60 or your setup is having issues with automatic linking, you can run npx react-native link react-native-date-picker and rebuild. In some occations you'll have to manually link the package. Instructions in this issue.

FAQ

How do i change the date order? (To YYYY-MM-DD etc)

The order is determined by the locale prop. Set for instance locale='fr'to get the french preference. ⚠️ Setting the locale to a different id won't change the title, confirm button and cancel button texts language.

How do i change the 12/24h or AM/PM format?

On iOS the 12/24h preference is determined by the locale prop. Set for instance locale='fr'to get the french preference. On Android the 12/24h format is determined by the device setting by default. Add is24hourSource="locale" to let the locale determine the device setting on android as well. When using 12h mode the AM/PM part of the picker will be displayed. It is NOT recommended to force any specific 12/24h format, but this can be achieved by, choosing a locale which has the desired 24h preference and add is24hourSource="locale".

Is it possible to show only month and year?

This is unfortunately not possible due to the limitation in DatePickerIOS. You should be able to create your own month-year picker with for instance https://github.com/TronNatthakorn/react-native-wheel-pick.

Why does the Android app crash in production?

If you have enabled Proguard for Android you might need to ignore some classes to get the the picker to work properly in android production/release mode. Add these lines to you proguard file (often called proguard-rules.pro):

-keep public class net.time4j.android.ApplicationStarter
-keep public class net.time4j.PrettyTime

What does it take to upgrade to v4 (4.0.0)?

There are no breaking changes in v4, so just bump the version number in your package json.

How can we disable confirm button until the wheel has stopped spinning?

Use the onStateChange prop to track the state of the spinning wheel.

1const [state, setState] = useState("idle")
2...
3<DatePicker onStateChange={setState} />
4<ConfirmButton disabled={state === "spinning"} />

Three different modes

Here are some more info about the three different picker modes that are available.

Date time picker

Using the datetime mode gives you a react native date time picker where both date and time can be selected at the same time. The todays date will be replays with the string "Today" translated to the desired language. This is the default mode and look like this.

iOS	Android

Add the optional datetime mode property to use this mode. Since datetime is default this could also be exclude.

1<DatePicker
2  ...
3  mode="datetime"
4/>

Datepicker

The date mode displays a react native datepicker with year month and date where the year-month-date order will be adjusted to the locale. If will look similar to this:

iOS	Android

Just add the value date to mode property:

1<DatePicker
2  ...
3  mode="date"
4/>

Time picker

The time mode can be used when only the time matters. AM/PM will be added depending on locale and user setting. It can be useful to add the timeInterval to only display the time with for instance 15min intervals. The react native time picker look like this:

iOS	Android

Set mode property to time to show the time picker:

1<DatePicker
2  ...
3  mode="time"
4/>

About

React Native Date Picker is a cross platform component for iOS and Android. It uses native code from respective platform to get the genuine look and feel the users expect. A strong motivation for creating this picker was the datetime mode on Android. It's quite unique for the platform and avoids two different picker popups, which normally is necessary. Instead, this datetime mode requires fewer user actions and enables a great user-experience.

Support this package!

If you like this package, consider becoming a sponsor 🩷

No vulnerabilities found.

10

Maintained

Determines if the project is "actively maintained".

10

Dangerous-Workflow

Determines if the project's GitHub Action workflows avoid dangerous patterns.

10

License

Determines if the project has defined a license.

6

Binary-Artifacts

Determines if the project has generated executable (binary) artifacts in the source repository.

0

Code-Review

Determines if the project requires human code review before pull requests (aka merge requests) are merged.

0

CII-Best-Practices

Determines if the project has an OpenSSF (formerly CII) Best Practices Badge.

0

Security-Policy

Determines if the project has published a security policy.

0

Token-Permissions

Determines if the project's workflows follow the principle of least privilege.

0

Fuzzing

Determines if the project uses fuzzing.

0

Pinned-Dependencies

Determines if the project has declared and pinned the dependencies of its build process.

Reason

dependency not pinned by hash detected -- score normalized to 0

Details

Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/build-android.yml:19: update your workflow using https://app.stepsecurity.io/secureworkflow/henninghall/react-native-date-picker/build-android.yml/master?enable=pin
Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/build-android.yml:23: update your workflow using https://app.stepsecurity.io/secureworkflow/henninghall/react-native-date-picker/build-android.yml/master?enable=pin
Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/build-android.yml:29: update your workflow using https://app.stepsecurity.io/secureworkflow/henninghall/react-native-date-picker/build-android.yml/master?enable=pin
Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/build-android.yml:45: update your workflow using https://app.stepsecurity.io/secureworkflow/henninghall/react-native-date-picker/build-android.yml/master?enable=pin
Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/build-ios.yml:18: update your workflow using https://app.stepsecurity.io/secureworkflow/henninghall/react-native-date-picker/build-ios.yml/master?enable=pin
Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/build-ios.yml:22: update your workflow using https://app.stepsecurity.io/secureworkflow/henninghall/react-native-date-picker/build-ios.yml/master?enable=pin
Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/build-ios.yml:30: update your workflow using https://app.stepsecurity.io/secureworkflow/henninghall/react-native-date-picker/build-ios.yml/master?enable=pin
Warn: third-party GitHubAction not pinned by hash: .github/workflows/build-ios.yml:48: update your workflow using https://app.stepsecurity.io/secureworkflow/henninghall/react-native-date-picker/build-ios.yml/master?enable=pin
Warn: third-party GitHubAction not pinned by hash: .github/workflows/build-ios.yml:55: update your workflow using https://app.stepsecurity.io/secureworkflow/henninghall/react-native-date-picker/build-ios.yml/master?enable=pin
Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/lint.yml:14: update your workflow using https://app.stepsecurity.io/secureworkflow/henninghall/react-native-date-picker/lint.yml/master?enable=pin
Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/lint.yml:17: update your workflow using https://app.stepsecurity.io/secureworkflow/henninghall/react-native-date-picker/lint.yml/master?enable=pin
Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/publish.yml:13: update your workflow using https://app.stepsecurity.io/secureworkflow/henninghall/react-native-date-picker/publish.yml/master?enable=pin
Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/publish.yml:14: update your workflow using https://app.stepsecurity.io/secureworkflow/henninghall/react-native-date-picker/publish.yml/master?enable=pin
Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/test-android-e2e.yml:28: update your workflow using https://app.stepsecurity.io/secureworkflow/henninghall/react-native-date-picker/test-android-e2e.yml/master?enable=pin
Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/test-android-e2e.yml:32: update your workflow using https://app.stepsecurity.io/secureworkflow/henninghall/react-native-date-picker/test-android-e2e.yml/master?enable=pin
Warn: third-party GitHubAction not pinned by hash: .github/workflows/test-android-e2e.yml:38: update your workflow using https://app.stepsecurity.io/secureworkflow/henninghall/react-native-date-picker/test-android-e2e.yml/master?enable=pin
Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/test-android-unit.yml:13: update your workflow using https://app.stepsecurity.io/secureworkflow/henninghall/react-native-date-picker/test-android-unit.yml/master?enable=pin
Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/test-android-unit.yml:17: update your workflow using https://app.stepsecurity.io/secureworkflow/henninghall/react-native-date-picker/test-android-unit.yml/master?enable=pin
Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/test-ios-e2e.yml:18: update your workflow using https://app.stepsecurity.io/secureworkflow/henninghall/react-native-date-picker/test-ios-e2e.yml/master?enable=pin
Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/test-ios-e2e.yml:22: update your workflow using https://app.stepsecurity.io/secureworkflow/henninghall/react-native-date-picker/test-ios-e2e.yml/master?enable=pin
Warn: third-party GitHubAction not pinned by hash: .github/workflows/test-ios-e2e.yml:30: update your workflow using https://app.stepsecurity.io/secureworkflow/henninghall/react-native-date-picker/test-ios-e2e.yml/master?enable=pin
Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/test-ios-e2e.yml:39: update your workflow using https://app.stepsecurity.io/secureworkflow/henninghall/react-native-date-picker/test-ios-e2e.yml/master?enable=pin
Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/test-js.yml:15: update your workflow using https://app.stepsecurity.io/secureworkflow/henninghall/react-native-date-picker/test-js.yml/master?enable=pin
Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/test-js.yml:18: update your workflow using https://app.stepsecurity.io/secureworkflow/henninghall/react-native-date-picker/test-js.yml/master?enable=pin
Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/typecheck.yml:14: update your workflow using https://app.stepsecurity.io/secureworkflow/henninghall/react-native-date-picker/typecheck.yml/master?enable=pin
Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/typecheck.yml:17: update your workflow using https://app.stepsecurity.io/secureworkflow/henninghall/react-native-date-picker/typecheck.yml/master?enable=pin
Info: 0 out of 22 GitHub-owned GitHubAction dependencies pinned
Info: 0 out of 4 third-party GitHubAction dependencies pinned

0

Branch-Protection

Determines if the default and release branches are protected with GitHub's branch protection settings.

0

SAST

Determines if the project uses static code analysis.

0

Vulnerabilities

Determines if the project has open, known unfixed vulnerabilities.

Score

3.1

/10

Last Scanned on 2024-11-18

The Open Source Security Foundation is a cross-industry collaboration to improve the security of open source software (OSS). The Scorecard provides security health metrics for open source projects.

Learn More


Expo	Nordic Brain Tech	hesenger	hamxahussain	lepadatumihail

Other packages similar to react-native-date-picker

react-native-date-picker

Installations

Pull Requests

0

262

38

224

Issues

33

527

494

Releases

Developer

henninghall

Developer Guide

CommonJS

No

18.20.4

10.7.0

Statistics

Languages

Total Downloads

19,258,683

Daily Downloads

Weekly Downloads

Monthly Downloads

Yearly Downloads

Peer Dependencies

Dev Dependencies

React Native Date Picker

Sponsors

Modal

Inlined

Requirements

Expo

Installation

Example 1: Modal

Example 2: Inlined

Props

Font size

React Native's new architecture

Linking

FAQ

How do i change the date order? (To YYYY-MM-DD etc)

How do i change the 12/24h or AM/PM format?

Is it possible to show only month and year?

Why does the Android app crash in production?

What does it take to upgrade to v4 (4.0.0)?

How can we disable confirm button until the wheel has stopped spinning?

Three different modes

Date time picker

Datepicker

Time picker

About

Support this package!

10

10

10

6

0

0

0

0

0

0

0

0

0

3.1

/10

Other packages similar to react-native-date-picker