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

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 | ['Day', 'Week', 'Month'] | array |

<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 |