https://github.com/hoadv/react-native-date-picker
React Native date picker expo component for iOS, Android and browser. Designed using ScrollView.
https://github.com/hoadv/react-native-date-picker
Last synced: 5 months ago
JSON representation
React Native date picker expo component for iOS, Android and browser. Designed using ScrollView.
- Host: GitHub
- URL: https://github.com/hoadv/react-native-date-picker
- Owner: hoadv
- License: mit
- Created: 2022-07-06T01:58:52.000Z (almost 4 years ago)
- Default Branch: master
- Last Pushed: 2022-07-08T04:58:51.000Z (almost 4 years ago)
- Last Synced: 2024-04-25T06:02:44.106Z (about 2 years ago)
- Language: TypeScript
- Size: 1.95 MB
- Stars: 1
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE.md
Awesome Lists containing this project
README
🎯 Try component at snack.expo.io
React Native customizable date picker component for iOS and Android. Designed using ScrollView. Looks identical on all
devices. Support more month formats (January, Jan...)
## 💻 Example
## 💬 Installation
1. *Add dependencies to the project*
```bash
yarn add @hoadv/react-native-date-picker
npm install @hoadv/react-native-date-picker --save
```
2. *Install additional dependencies*
```bash
yarn add expo-linear-gradient
npm install expo-linear-gradient --save
```
3. *Then, import with ...*
```js
import DatePicker from '@hoadv/react-native-date-picker';
```
4. *If you are not using Expo*
> You should also follow these additional [installation instructions](https://github.com/expo/expo/tree/master/packages/expo-linear-gradient#installation-in-bare-react-native-projects).
## 👩💻 Usage
- *Simple code example*
```javascript
import React, {useState} from "react";
import {Text, View} from "react-native";
import DatePicker from "@hoadv/react-native-date-picker";
export default function App() {
const [date, setDate] = useState();
return (
{date ? date.toDateString() : "Select date..."}
setDate(value)}
format="yyyy-MM-dd"
/>
);
}
```
## 📚 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`, `MM`, `M`. Example: `'yyyy-mm-dd'` or `'dd-mm-yyyy'` and other |
## 📂 Project Layout
- [`example`](/example) *Simple project with date picker. It is presented on gif.*
- [`src`](/src) *Source code of date picker.*
- [`lib`](/lib) *Shared packages.*
- [`commonjs`](/lib/commonjs) *Package built as common js library.*
- [`module`](/lib/module) *Package built as module.*
- [`typescript`](/lib/typescript) *Built files for static typing.*
## 📃 License
Source code is made available under the [MIT license](LICENSE.md). Some dependencies may be licensed differently.
## ☕ Support
You can support me so that there will be more good open source projects in the future
