{"id":31912982,"url":"https://github.com/nipunravisara/react-native-calendarview-datepicker","last_synced_at":"2025-10-13T18:25:52.358Z","repository":{"id":42249104,"uuid":"284086960","full_name":"nipunravisara/react-native-calendarview-datepicker","owner":"nipunravisara","description":"🌿 React-native-calendar-date-picker component.","archived":false,"fork":false,"pushed_at":"2023-01-07T20:39:45.000Z","size":1759,"stargazers_count":9,"open_issues_count":8,"forks_count":0,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-09-11T16:34:58.674Z","etag":null,"topics":["date","date-formatting","datepicker","react-native","reactnative"],"latest_commit_sha":null,"homepage":"https://www.npmjs.com/package/react-native-calendarview-datepicker","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/nipunravisara.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2020-07-31T16:57:45.000Z","updated_at":"2024-01-18T05:19:36.000Z","dependencies_parsed_at":"2023-02-08T01:16:27.531Z","dependency_job_id":null,"html_url":"https://github.com/nipunravisara/react-native-calendarview-datepicker","commit_stats":null,"previous_names":["ravisaradev/react-native-calendarview-datepicker"],"tags_count":2,"template":false,"template_full_name":null,"purl":"pkg:github/nipunravisara/react-native-calendarview-datepicker","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nipunravisara%2Freact-native-calendarview-datepicker","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nipunravisara%2Freact-native-calendarview-datepicker/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nipunravisara%2Freact-native-calendarview-datepicker/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nipunravisara%2Freact-native-calendarview-datepicker/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/nipunravisara","download_url":"https://codeload.github.com/nipunravisara/react-native-calendarview-datepicker/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nipunravisara%2Freact-native-calendarview-datepicker/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":279011049,"owners_count":26084865,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","status":"online","status_checked_at":"2025-10-12T02:00:06.719Z","response_time":53,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["date","date-formatting","datepicker","react-native","reactnative"],"created_at":"2025-10-13T18:25:48.886Z","updated_at":"2025-10-13T18:25:52.352Z","avatar_url":"https://github.com/nipunravisara.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# React-native-calendarview-datepicker\n![GitHub top language](https://img.shields.io/github/languages/top/RavisaraDev/react-native-calendarview-datepicker?color=yellow\u0026style=flat-square) ![GitHub code size in bytes](https://img.shields.io/github/languages/code-size/RavisaraDev/react-native-calendarview-datepicker?color=greenlabel=size\u0026style=flat-square)  ![npm](https://img.shields.io/npm/dw/react-native-calendarview-datepicker?label=npm%20downloads\u0026logo=npm\u0026style=flat-square) ![GitHub tag (latest by date)](https://img.shields.io/github/v/tag/RavisaraDev/react-native-calendarview-datepicker?color=%23C678DD\u0026label=version\u0026style=flat-square\u0026logo=npm\u0026) ![Hits](https://hitcounter.pythonanywhere.com/count/tag.svg?url=https%3A%2F%2Fgithub.com%2FRavisaraDev%2Freact-native-calendarview-datepicker)\n![banner-image](./assets/banner.png?raw=true \"Optional Title\")\n\n📦 Installation\n----\n\n\n```sh\nnpm i react-native-calendarview-datepicker\n``` \nor\n\n```sh\nyarn add react-native-calendarview-datepicker\n``` \n\n📺 Preview\n----\n\n![banner-image](./assets/preview-default.gif?raw=true \"Optional Title\") ![banner-image](./assets/preview-customized.gif?raw=true \"Optional Title\")\n\n\n🚀 Basic Usage\n----\n\n### Default\n\nYou can simply add date-picker as follows. It shows minimal default calendar. But you can customize as you wish.\n```javascript\nimport DatePickerCalendar from 'react-native-calendarview-datepicker';\nimport Moment from 'moment';\n\n...\n\nconst App = () =\u003e {\n  const [date, setDate] = useState(moment());\n\n  return (\n        \u003cDatePickerCalendar date={date} onChange={(selectedDate) =\u003e setDate(selectedDate)}/\u003e\n  );\n};\n```\n\n### Customized\n\nYou can have full control of calendar picker. Pass your own calendar header and condition styles for darkmode.\n```javascript\nimport DatePickerCalendar from 'react-native-calendarview-datepicker';\nimport Moment from 'moment';\n\n...\n\nconst App = () =\u003e {\n  const [date, setDate] = useState(moment());\n  \n  //Custom datepicker header\nconst customHeader = (date, month, year, setMonth, setYear) =\u003e {\n    return (\n        \u003cView style={{flexDirection: \"row\", justifyContent: 'space-between'}}\u003e\n            \u003cView\u003e\n                \u003cView\u003e\n                    \u003cText style={{color: \"#fff\", fontSize: 18, opacity: 0.5, marginBottom: 4}}\u003e{year}\u003c/Text\u003e\n                \u003c/View\u003e\n                \u003cView\u003e\n                    \u003cText style={{\n                        color: \"#fff\",\n                        fontSize: 25,\n                        fontWeight: 'bold'\n                    }}\u003e{moment(date).format(\"MMMM Do YYYY\")}\u003c/Text\u003e\n                \u003c/View\u003e\n            \u003c/View\u003e\n            \u003cView style={{flexDirection: \"row\", alignItems: 'center'}}\u003e\n                \u003cTouchableOpacity style={{\n                    alignItems: 'center',\n                    justifyContent: 'center',\n                    marginRight: 10,\n                    height: 40,\n                    width: 40,\n                    backgroundColor: \"#155B3C\",\n                    borderRadius: 100\n                }} onPress={() =\u003e setMonth(month - 1)}\u003e\n                    \u003cText style={{color: \"#18D183\", fontSize: 30, marginBottom: 5}}\u003e{'‹'}\u003c/Text\u003e\n                \u003c/TouchableOpacity\u003e\n                \u003cTouchableOpacity style={{\n                    alignItems: 'center',\n                    justifyContent: 'center',\n                    height: 40,\n                    width: 40,\n                    backgroundColor: \"#155B3C\",\n                    borderRadius: 100\n                }} onPress={() =\u003e setMonth(month + 1)}\u003e\n                    \u003cText style={{color: \"#18D183\", fontSize: 30, marginBottom: 5}}\u003e{'›'}\u003c/Text\u003e\n                \u003c/TouchableOpacity\u003e\n            \u003c/View\u003e\n        \u003c/View\u003e\n    )\n}\n\n  return (\n        \u003cDatePickerCalendar\n            date={date}\n            onChange={(selectedDate) =\u003e setDate(selectedDate)}\n            placeholder=\"Select date\"\n            placeholderStyles={{color: \"#04e37d\"}}\n            fieldButtonStylesDateFormat=\"MMM Do YY\"\n            fieldButtonStyles={{width: '95%', backgroundColor: \"#1D323E\", borderRadius: 12, borderWidth: 2, borderColor: \"#18D183\", paddingLeft: 20}}\n            fieldButtonTextStyles={{color: \"#18D183\"}}\n            modalBackgroundColor={\"#1D323E\"}\n            weekHeaderTextColor={\"#18D183\"}\n            datesColor={\"#fff\"}\n            selectedDateColor={\"#1D323E\"}\n            selectedDateHighlightColor={\"#18D183\"}\n            selectedDateHighlightRadius={5}\n            customHeader={(date, month, year, setMonth, setYear) =\u003e customHeader(date, month, year, setMonth, setYear)}\n            headerStyles={{padding: 0}}\n        /\u003e\n  );\n};\n```\n\n\n📑 API Reference\n----\n\n| Props| Type | Description \n| -------- | ------- | -------- |\n| date | ```Moment``` | If your need to show placeholder on initial load just pass ```undefined```, else for default value pass ```moment()``` object\n| onChange |```Function```| Callback triggered on date select (Required)\n| placeholder | ```String``` | Custom placeholder text\n| placeholderStyles | ```Object``` | Placeholder text styles \n| modalBackgroundColor | ```String``` | Calendar modal background color\n| headerStyles | ```Object``` | Header wrapper styles\n| customHeader | ```Function``` | Function should return a component. Args: ```(date, month, year, setMonth, setYear)```\n| weekHeaderTextColor | ```String``` | Week days names text color\n| selectedDateHighlightColor | ```String``` | Selected date highlight marker color\n| selectedDateHighlightRadius | ```Number``` | Selected date highlight marker radius\n| datesColor | ```String``` | Calendar date color\n| selectedDateColor|  ```String``` | Selected calendar date color\n| fieldButtonStylesDateFormat | ```String``` | Selected date showing format. [Available formats](https://momentjs.com/docs/#/displaying/format/)\n| fieldButtonStyles | ```Object``` | Field button styles\n| fieldButtonTextStyles | ```Object``` | Field button text styles\n\n\n🗞 License\n----\n\nReact-native-calendarview-datepicker is licensed under the [MIT License](/LICENSE)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fnipunravisara%2Freact-native-calendarview-datepicker","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fnipunravisara%2Freact-native-calendarview-datepicker","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fnipunravisara%2Freact-native-calendarview-datepicker/lists"}