https://github.com/nipunravisara/react-native-calendarview-datepicker
🌿 React-native-calendar-date-picker component.
https://github.com/nipunravisara/react-native-calendarview-datepicker
date date-formatting datepicker react-native reactnative
Last synced: 9 months ago
JSON representation
🌿 React-native-calendar-date-picker component.
- Host: GitHub
- URL: https://github.com/nipunravisara/react-native-calendarview-datepicker
- Owner: nipunravisara
- License: mit
- Created: 2020-07-31T16:57:45.000Z (almost 6 years ago)
- Default Branch: master
- Last Pushed: 2023-01-07T20:39:45.000Z (over 3 years ago)
- Last Synced: 2025-09-11T16:34:58.674Z (10 months ago)
- Topics: date, date-formatting, datepicker, react-native, reactnative
- Language: JavaScript
- Homepage: https://www.npmjs.com/package/react-native-calendarview-datepicker
- Size: 1.68 MB
- Stars: 9
- Watchers: 1
- Forks: 0
- Open Issues: 8
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# React-native-calendarview-datepicker
    
📦 Installation
----
```sh
npm i react-native-calendarview-datepicker
```
or
```sh
yarn add react-native-calendarview-datepicker
```
📺 Preview
----
 
🚀 Basic Usage
----
### Default
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)}/>
);
};
```
### Customized
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}
{moment(date).format("MMMM Do YYYY")}
setMonth(month - 1)}>
{'‹'}
setMonth(month + 1)}>
{'›'}
)
}
return (
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](https://momentjs.com/docs/#/displaying/format/)
| fieldButtonStyles | ```Object``` | Field button styles
| fieldButtonTextStyles | ```Object``` | Field button text styles
🗞 License
----
React-native-calendarview-datepicker is licensed under the [MIT License](/LICENSE)