šæ React-native date picker component
npm install react-native-calendarview-datepickerš¦ Installation
----
``sh`
npm i react-native-calendarview-datepicker
or
`sh`
yarn add react-native-calendarview-datepicker
šŗ Preview
----
š Basic Usage
----
You can simply add date-picker as follows. It shows minimal default calendar. But you can customize as you wish.
`javascript
import DatePickerCalendar from 'react-native-calendarview-datepicker';
import Moment from 'moment';
...
const App = () => {
const [date, setDate] = useState(moment());
return (
);
};
`
You can have full control of calendar picker. Pass your own calendar header and condition styles for darkmode.
`javascript
import DatePickerCalendar from 'react-native-calendarview-datepicker';
import Moment from 'moment';
...
const App = () => {
const [date, setDate] = useState(moment());
//Custom datepicker header
const customHeader = (date, month, year, setMonth, setYear) => {
return (
fontSize: 25,
fontWeight: 'bold'
}}>{moment(date).format("MMMM Do YYYY")}
justifyContent: 'center',
marginRight: 10,
height: 40,
width: 40,
backgroundColor: "#155B3C",
borderRadius: 100
}} onPress={() => setMonth(month - 1)}>
justifyContent: 'center',
height: 40,
width: 40,
backgroundColor: "#155B3C",
borderRadius: 100
}} onPress={() => setMonth(month + 1)}>
)
}
return (
onChange={(selectedDate) => setDate(selectedDate)}
placeholder="Select date"
placeholderStyles={{color: "#04e37d"}}
fieldButtonStylesDateFormat="MMM Do YY"
fieldButtonStyles={{width: '95%', backgroundColor: "#1D323E", borderRadius: 12, borderWidth: 2, borderColor: "#18D183", paddingLeft: 20}}
fieldButtonTextStyles={{color: "#18D183"}}
modalBackgroundColor={"#1D323E"}
weekHeaderTextColor={"#18D183"}
datesColor={"#fff"}
selectedDateColor={"#1D323E"}
selectedDateHighlightColor={"#18D183"}
selectedDateHighlightRadius={5}
customHeader={(date, month, year, setMonth, setYear) => customHeader(date, month, year, setMonth, setYear)}
headerStyles={{padding: 0}}
/>
);
};
`
š API Reference
----
| Props| Type | Description
| -------- | ------- | -------- |
| date | `Moment` | If your need to show placeholder on initial load just pass `undefined`, else for default value pass `moment()` object`
| onChange |Function`| Callback triggered on date select (Required)`
| placeholder | String` | Custom placeholder text`
| placeholderStyles | Object` | Placeholder text styles `
| modalBackgroundColor | String` | Calendar modal background color`
| headerStyles | Object` | Header wrapper styles`
| customHeader | Function` | Function should return a component. Args: `(date, month, year, setMonth, setYear)``
| weekHeaderTextColor | String` | Week days names text color`
| selectedDateHighlightColor | String` | Selected date highlight marker color`
| selectedDateHighlightRadius | Number` | Selected date highlight marker radius`
| datesColor | String` | Calendar date color`
| selectedDateColor| String` | Selected calendar date color`
| fieldButtonStylesDateFormat | String` | Selected date showing format. Available formats`
| fieldButtonStyles | Object` | Field button styles`
| fieldButtonTextStyles | Object`` | Field button text styles
š License
----
React-native-calendarview-datepicker is licensed under the MIT License