@peritos-solutions/react-native-calendar-picker-component

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