# react-native-calendarview-datepicker > ๐ŸŒฟ React-native date picker component Latest version **0.0.12** (published 2021-01-02) ยท MIT license ยท 0 weekly downloads ## Install ```sh npm install react-native-calendarview-datepicker pnpm add react-native-calendarview-datepicker yarn add react-native-calendarview-datepicker bun add react-native-calendarview-datepicker ``` ## Health **Score 15/100 (F)** โ€” status: abandoned. Positive: no vulnerabilities. Warnings: low downloads; no types; no esm support; pre 1.0. Negative: abandoned; low maintenance score. ## Facts | | | |---|---| | Version | 0.0.12 | | Published | 2021-01-02 | | First published | 2020-08-01 | | Weekly downloads | 0 | | License | MIT | | TypeScript types | none | | Module format | CommonJS | | Dependencies | 1 | | Unpacked size | 1.2 MB | | Known vulnerabilities | 0 | | Install scripts | no | | Author | ravisaradev | | Maintainers | ravisara | | Keywords | react-native-calendarview-datepicker, react-native-calendar, react-native-datepicker, react-native, date-picker | ## Links - npm: https://www.npmjs.com/package/react-native-calendarview-datepicker - Repository: https://github.com/RavisaraDev/react-native-calendarview-datepicker - Issues: https://github.com/RavisaraDev/react-native-calendarview-datepicker/issues - npm.io page: https://npm.io/package/react-native-calendarview-datepicker ## Dependencies (1) - [moment](https://npm.io/package/moment.md) ^2.27.0 ## Alternatives - [@js-joda/timezone](https://npm.io/package/@js-joda/timezone.md) โ€” 383.4K weekly downloads - [chartjs-adapter-moment](https://npm.io/package/chartjs-adapter-moment.md) โ€” 210.8K weekly downloads - [strftime](https://npm.io/package/strftime.md) โ€” 171.2K weekly downloads - [vue-flatpickr-component](https://npm.io/package/vue-flatpickr-component.md) โ€” 115.8K weekly downloads - [timepicker](https://npm.io/package/timepicker.md) โ€” 51.0K weekly downloads ## Recent versions - 0.0.12 (latest) โ€” 2021-01-02 - 0.0.11 โ€” 2021-01-02 - 0.0.10 โ€” 2020-08-03 - 0.0.9 โ€” 2020-08-03 - 0.0.8 โ€” 2020-08-03 - 0.0.7 โ€” 2020-08-02 - 0.0.6 โ€” 2020-08-02 - 0.0.5 โ€” 2020-08-01 - 0.0.4 โ€” 2020-08-01 - 0.0.3 โ€” 2020-08-01 - 0.0.2 โ€” 2020-08-01 - 0.0.1 โ€” 2020-08-01 ## README # React-native-calendarview-datepicker ![GitHub top language](https://img.shields.io/github/languages/top/RavisaraDev/react-native-calendarview-datepicker?color=yellow&style=flat-square) ![GitHub code size in bytes](https://img.shields.io/github/languages/code-size/RavisaraDev/react-native-calendarview-datepicker?color=greenlabel=size&style=flat-square) ![npm](https://img.shields.io/npm/dw/react-native-calendarview-datepicker?label=npm%20downloads&logo=npm&style=flat-square) ![GitHub tag (latest by date)](https://img.shields.io/github/v/tag/RavisaraDev/react-native-calendarview-datepicker?color=%23C678DD&label=version&style=flat-square&logo=npm&) ![Hits](https://hitcounter.pythonanywhere.com/count/tag.svg?url=https%3A%2F%2Fgithub.com%2FRavisaraDev%2Freact-native-calendarview-datepicker) ![banner-image](./assets/banner.png?raw=true "Optional Title") ๐Ÿ“ฆ Installation ---- ```sh npm i react-native-calendarview-datepicker ``` or ```sh yarn add react-native-calendarview-datepicker ``` ๐Ÿ“บ Preview ---- ![banner-image](./assets/preview-default.gif?raw=true "Optional Title") ![banner-image](./assets/preview-customized.gif?raw=true "Optional Title") ๐Ÿš€ 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) --- _Source: https://npm.io/package/react-native-calendarview-datepicker ยท Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._