@peritos-solutions/react-native-calendar-picker-component v1.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

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

<DateTimePickerModal
  mode={"time"}
  modalVisible={true.type === "to" && modalVisible.status}
  onPressDateSave={() => onPressDateSave()}
  onPressPickerShow={() => onPressPickerShow()}
  onPressModalClose={() => onPressModalClose()}
  onChangeDateTimeValue={(date) => onSelect(date)}
  selectedDateTimeVale={selectedDateTimeVale}
/>

DateTimePickerModal Props