1.0.19 • Published 8 months ago
@peritos-solutions/react-native-calendar-picker-component v1.0.19
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 |
1.0.19
8 months ago
1.0.18
9 months ago
1.0.17
10 months ago
1.0.16
11 months ago
1.0.15
1 year ago
1.0.11
1 year ago
1.0.10
1 year ago
1.0.14
1 year ago
1.0.13
1 year ago
1.0.12
1 year ago
1.0.9
1 year ago
1.0.8
1 year ago
1.0.7
1 year ago
1.0.6
1 year ago
1.0.5
1 year ago
1.0.4
1 year ago
1.0.2
1 year ago
1.0.1
2 years ago
1.0.3
1 year ago
1.0.0
2 years ago