npm package: @peritos-solutions/react-native-calendar-picker-component
Description: calendar picker supported date, year, month , time
Author: Peritos Solutions
Latest version: 1.0.20

# Introduction

This is a Calendar Picker Component for React Native which provides option to quickly navigate between weeks, months and years. This is built using
@react-native-community/datetimepicker,react-native-calendars
it will support props of this two library and some custom props to handel modal and years and months also

# Installing

To use just need to:

```
npm i @peritos-solution/react-native-calendar-picker-component
```

or

```
yarn add @peritos-solution/react-native-calendar-picker-component
```

# Example

```js
import {
  DatePickerModal,
  DateTimePickerModal,
} from "@peritos-solutions/react-native-calendar-picker-component";

<DatePickerModal
  modalVisible={true}
  disableTextFieldComponent={false}
  disableTabComponent={true}
  showModal={true}
  showRightIcon={true}
  selectedValue={selectedValue}
  dateViewContainer={styles.dateViewContainer}
  buttonContainerStyle={styles.buttonContainerStyle}
  dateFieldContainer={styles.dateFieldContainer}
  pickerType={"Day"} // Month, Year, Week
  buttonSelectedIndex={0}
  buttonArray={["Day", "Week", "Month"]}
  onPressButtonGroup={(index) => onPressButtonGroup(index)}
  onPressYearIncDec={(data) => onPressYearIncDec(data)}
  onPressPickerShow={() => onPressPickerShow()}
  onPressModalClose={() => onPressModalClose()}
  onSelect={(value) => onSelect(value)}
  enableCompare={false} //optional
  compareSelectionType={0} //optional
  commonColor={Colors.primary} //optional with this you can change default text, tab ... colors
  compareColor={Colors.yellow} //optional 
></DatePickerModal>; 
```

# DatePickerModal Props

| Prop                            | Description                                                   | Default                                      | Type      |
| ------------------------------- | ------------------------------------------------------------- | -------------------------------------------- | --------- |
| **`pickerType`**                | pickerType support Month, Year, Week                          | Day                                          | string    |
| **`modalVisible`**              | -                                                             | false                                        | boolean   |
| **`showModal`**                 | if we want to show picker in modal then true other wise false | true                                         | boolean   |
| **`disableTextFieldComponent`** | for disable TextField                                         | true                                         | boolean   |
| **`showRightIcon`**             | TextField Right Icon                                          | false                                        | boolean   |
| **`disableTabComponent`**       | for disable Tab                                               | false                                        | boolean   |
| **`dateViewContainer`**         | -                                                             | -                                            | ViewStyle |
| **`buttonContainerStyle`**      | Tab Container Style                                           | -                                            | ViewStyle |
| **`dateFieldContainer`**        | TextField Container Style                                     | -                                            | ViewStyle |
| **`buttonSelectedIndex`**       | Tab Index                                                     | -                                            | number    |
| **`buttonArray`**               | Tab Array item                                                | [<br/>'Day',<br/> 'Week', <br/>'Month'<br/>] | array     |

```js
<DateTimePickerModal
  mode={"time"}
  modalVisible={true.type === "to" && modalVisible.status}
  onPressDateSave={() => onPressDateSave()}
  onPressPickerShow={() => onPressPickerShow()}
  onPressModalClose={() => onPressModalClose()}
  onChangeDateTimeValue={(date) => onSelect(date)}
  selectedDateTimeVale={selectedDateTimeVale}
/>
```

# DateTimePickerModal Props

| Prop       | Description                                               | Default | Type   |
| ---------- | --------------------------------------------------------- | ------- | ------ |
| **`mode`** | will support @react-native-community/datetimepicker props | -       | string |