React-native-calendarview-datepicker

!GitHub top language !GitHub code size in bytes !npm !GitHub tag (latest by date) !Hits
!banner-image

📦 Installation
----

``sh
npm i react-native-calendarview-datepicker
`
or

`sh
yarn add react-native-calendarview-datepicker
`

📺 Preview
----

!banner-image !banner-image


🚀 Basic Usage
----

$3

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 (
setDate(selectedDate)}/>
);
};
`

$3

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 (



{year}


color: "#fff",
fontSize: 25,
fontWeight: 'bold'
}}>{moment(date).format("MMMM Do YYYY")}



alignItems: 'center',
justifyContent: 'center',
marginRight: 10,
height: 40,
width: 40,
backgroundColor: "#155B3C",
borderRadius: 100
}} onPress={() => setMonth(month - 1)}>
{'‹'}

alignItems: 'center',
justifyContent: 'center',
height: 40,
width: 40,
backgroundColor: "#155B3C",
borderRadius: 100
}} onPress={() => setMonth(month + 1)}>
{'›'}



)
}

return (
date={date}
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