npmpackage.info

@dietime/react-native-date-picker

React Native customizable date picker component for iOS and Android. Designed using ScrollView.

1.2.1

MIT

TypeScript

Installations

npm install @dietime/react-native-date-picker

Pull Requests

Open

0

Total

1

Closed

1

Issues

Open

2

Total

8

Closed

6

Releases

Unable to fetch releases

Developer

DieTime

Developer Guide

BETA

Module System

CommonJS

Min. Node Version

Typescript Support

Yes

Node Version

18.17.1

NPM Version

9.6.7 Statistics

60 Stars

31 Commits

14 Forks

2 Watching

1 Branches

1 Contributors

Updated on 14 Nov 2024

Languages

TypeScript (99.02%)

JavaScript (0.98%)

Total Downloads

Cumulative downloads

Total Downloads

20,758

Last day

566.7%

Compared to previous day

Last week

41.3%

171

Compared to previous week

Last month

2.9%

668

Compared to previous month

Last year

10.5%

6,209

Compared to previous year

Daily Downloads

Weekly Downloads

Monthly Downloads

Yearly Downloads

Peer Dependencies

expo-linear-gradient react react-native

Dev Dependencies

@babel/core @types/react @types/react-dom @types/react-native expo-linear-gradient react react-dom react-native react-native-builder-bob typescript

Versions

🎯 Try component at snack.expo.io

npm type definitions npm bundle size

React Native customizable date picker component for iOS and Android. Designed using ScrollView. Looks identical on all devices.

💻 Example

💬 Installation

1. Add dependency to the project

1$ yarn add @dietime/react-native-date-picker

1$ npm install @dietime/react-native-date-picker --save

2. Import dependency

1import DatePicker from '@dietime/react-native-date-picker';

👩‍💻 Usage

1import React, {useState} from "react";
2import {Text, View} from "react-native";
3
4import DatePicker from "@dietime/react-native-date-picker";
5
6export default function App() {
7    const [date, setDate] = useState();
8
9    return (
10        <View>
11            <Text>{date ? date.toDateString() : "Select date..."}</Text>
12            <DatePicker
13                value={date}
14                onChange={(value) => setDate(value)}
15                format="yyyy-mm-dd"
16            />
17        </View>
18    );
19}

📚 Documentation

Prop	Required	Type	Description
value	✅	Date or null or undefined	Initial date for component
onChange	✅	(value: Date) : void	Callback on date change event
height	⛔	number	Custom component height
width	⛔	number or string	Custom component width such as `100` or `'50%'`
fontSize	⛔	number	Custom digits font size
textColor	⛔	string	Custom digits text color such as hex, rgb or rgba
endYear	⛔	number	Max year in component, default is current year
startYear	⛔	number	Min year in component, default is `endYear - 100`
markColor	⛔	string	Custom middle mark color such as `hex`, `rgb` or `rgba`
markHeight	⛔	number	Custom height of middle mark
markWidth	⛔	number or string	Custom width of middle mark such as `100` or `'50%'`
fadeColor	⛔	string	Custom color for top and bottom fade effect `only hex colors!`
format	⛔	string	Custom picker format like reshuffle of `yyyy`, `mm`, `dd`. Example: `'yyyy-mm-dd'` or `'dd-mm-yyyy'` and other

📃 License

Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

No vulnerabilities found.

10

Binary-Artifacts

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

10

License

Determines if the project has defined a license.

0

Code-Review

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

0

Maintained

Determines if the project is "actively maintained".

0

SAST

Determines if the project uses static code analysis.

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

Fuzzing

Determines if the project uses fuzzing.

0

Branch-Protection

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

0

Vulnerabilities

Determines if the project has open, known unfixed vulnerabilities.

Score

1.7

/10

Last Scanned on 2024-11-25

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

Other packages similar to @dietime/react-native-date-picker

react-native-date-picker

5.0.7

A datetime picker for React Native. In-modal or inlined. Supports Android and iOS.

react-native-modal-datetime-picker

18.0.0

A react-native datetime-picker for Android and iOS

react-date-picker

11.0.0

A date picker for your React app.

react-time-picker

7.0.0

A time picker for your React app.