react-native-jalali-persian-date-picker
Version:
React Native Jalali Date Picker Component
170 lines (131 loc) • 11.3 kB
Markdown
# React Native Jalali Date Picker
A simple, customizable Calendar and Date/Time Picker for React native.
<div align="center">
<img src="./example/assets/screenshot-1.png" alt="date picker"/>
</div>
## Installation
```bash
npm i react-native-jalali-persian-date-picker @react-native-picker/picker
# or if you prefer Yarn:
yarn add react-native-jalali-persian-date-picker @react-native-picker/picker
```
## Usage
#### Date Picker
Here is a simple example of how to use the `DatePicker` component:
```jsx
import DatePicker from 'react-native-jalali-persian-date-picker';
export default function Example() {
const [value, setValue] = useState <string | undefined>();
return (
<DatePicker value={value} onChange={(date) => setValue(date)} />
)
}
```
#### Date Picker (Dark)
Here is a simple example of how to have a dark theme for the `DatePicker` component:
```jsx
import DatePicker from 'react-native-jalali-persian-date-picker';
export default function Example() {
const [value, setValue] = useState <string | undefined>();
return (
<DatePicker style={{ backgroundColor: '#161616' }} selectTimeDropdownIconColor={'white'}
eachMonthTextStyle={{ color: 'white' }} eachYearTextStyle={{ color: 'white' }}
selectTimePickerItemStyle={{ color: 'white', backgroundColor: '#161616' }}
datePickerDismissIconColor={'white'} yearMonthTextStyle={{ color: 'white' }}
datePickerModalStyle={{ backgroundColor: '#161616' }} dayTextColor={'#fff'}
value={value} onChange={(date) => setValue(date)} />
);
}
```
#### Calendar
Here is a simple example of how to use the `Calendar` component:
```jsx
import { Calendar } from 'react-native-jalali-persian-date-picker';
export default function Example() {
const [value, setValue] = useState < string | undefined > ();
return (
<Calendar value={value} style={styles.calendar} onChange={(date) => setValue(date)} />
)
}
const styles = StyleSheet.create({
calendar: {
borderColor: '#ccc',
borderWidth: 1,
margin: 10,
height: 450,
paddingVertical: 10,
paddingHorizontal: 5,
borderRadius: 10,
}
});
```
#### Time Picker
You can include a time picker by adding the `isShowSelectTime` prop to both the Calendar and DatePicker components.
```jsx
import DatePicker from 'react-native-jalali-persian-date-picker';
export default function Example() {
const [value, setValue] = useState < string | undefined > ();
return (
<DatePicker isShowSelectTime={true} value={value} onChange={(date) => setValue(date)} />
)
}
```
## Available props
| Prop | Default | Type | Availability (DatePicker/ Calendar) |
|:---------------------------:|:---------------------------------------------------------------------:|:--------------------------------------------:|:-----------------------------------:|
| style | see [`Props.ts`](src/props.ts) | `ViewStyle` | both |
| value | today | `string` | both |
| isShowSelectTime | false | `boolean` | both |
| showMonthLabel | false | `boolean` | both |
| dateSeparator | `/` | `string` | both |
| minDate | last year | `string` | both |
| maxDate | next year | `string` | both |
| onChange | date => console.log(date) | `Function` | both |
| headerContainerStyle | see [`Props.ts`](src/props.ts) | `ViewStyle` | both |
| yearMonthBoxStyle | see [`Props.ts`](src/props.ts) | `ViewStyle` | both |
| yearMonthTextStyle | { fontSize: 22, color: 'black' } | `TextStyle` | both |
| iconContainerStyle | see [`Props.ts`](src/props.ts) | `ViewStyle` | both |
| backIcon | see [`Props.ts`](src/props.ts) | `ImageSourcePropType` or `undefined` | both |
| backIconStyle | see [`Props.ts`](src/props.ts) | `ImageStyle` | both |
| nextIcon | see [`Props.ts`](src/props.ts) | `ImageSourcePropType` or `undefined` | both |
| nextIconStyle | see [`Props.ts`](src/props.ts) | `ImageStyle` | both |
| selectTimeContainerStyle | see [`Props.ts`](src/props.ts) | `ViewStyle` | both |
| selectTimePickerStyle | see [`Props.ts`](src/props.ts) | `ViewStyle` | both |
| selectTimeDropdownIconColor | `#000` | `ColorValue` | both |
| selectTimePickerItemStyle | see [`Props.ts`](src/props.ts) | `TextStyle` | both |
| selectTimePickerMode | 'dropdown' | `dialog` or `dropdown` | both |
| eachYearStyle | see [`Props.ts`](src/props.ts) | `ViewStyle` | both |
| selectedEachYearStyle | see [`Props.ts`](src/props.ts) | `ViewStyle` | both |
| eachYearTextStyle | { fontSize: 16 } | `TextStyle` | both |
| selectedEachYearTextStyle | { fontSize: 16, color: 'white',fontWeight: 'bold' } | `TextStyle` | both |
| eachMonthStyle | see [`Props.ts`](src/props.ts) | `ViewStyle` | both |
| selectedEachMonthStyle | see [`Props.ts`](src/props.ts) | `ViewStyle` | both |
| eachMonthTextStyle | { fontSize: 16 } | `TextStyle` | both |
| selectedEachMonthTextStyle | { fontSize: 16, color: 'white',fontWeight: 'bold' } | `TextStyle` | both |
| weekdaysContainerStyle | see [`Props.ts`](src/props.ts) | `ViewStyle` | both |
| weekdayStyle | see [`Props.ts`](src/props.ts) | `ViewStyle` | both |
| weekdayTextStyle | { fontSize: 16, color: 'coral', marginBottom: 5, fontWeight: 'bold' } | `TextStyle` | both |
| dayStyle | see [`Props.ts`](src/props.ts) | `ViewStyle` | both |
| selectedDayStyle | see [`Props.ts`](src/props.ts) | `ViewStyle` | both |
| selectedDayColor | `coral` | `string` | both |
| dayTextStyle | { fontSize: 18 } | `TextStyle` | both |
| selectedDayTextColor | `#FFFFFF` | `string` | both |
| dayTextColor | `#111111` | `string` | both |
| disabledTextColor | `#999999` | `string` | both |
| datePickerModalStyle | | `ViewStyle` | DatePicker |
| datePickerDismissIconColor | `#000` | `ColorValue` | DatePicker |
| renderItem | | `Element` | DatePicker |
## Example
Take a look at [example](example):
```bash
git clone https://github.com/realmahd1/react-native-jalali-persian-date-picker
cd example
yarn
react-native run-android
# OR
react-native run-ios
```
## Contributing
See the [contributing guide](CONTRIBUTING.md) to learn how to contribute to the repository and the development workflow.
## License
MIT