{"id":15773972,"url":"https://github.com/gusparis/react-native-month-year-picker","last_synced_at":"2025-04-05T06:06:56.990Z","repository":{"id":37951419,"uuid":"260323386","full_name":"gusparis/react-native-month-year-picker","owner":"gusparis","description":"React Native Month Picker component for iOS \u0026 Android","archived":false,"fork":false,"pushed_at":"2023-03-04T15:31:54.000Z","size":1835,"stargazers_count":109,"open_issues_count":19,"forks_count":77,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-03-26T20:01:51.976Z","etag":null,"topics":["android","ios","java","month-picker","month-year-picker","objective-c","react","react-native"],"latest_commit_sha":null,"homepage":"","language":"Java","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/gusparis.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2020-04-30T21:36:09.000Z","updated_at":"2025-01-23T08:20:46.000Z","dependencies_parsed_at":"2024-06-18T16:42:27.872Z","dependency_job_id":"1113af05-69b8-4820-b546-0bd801230540","html_url":"https://github.com/gusparis/react-native-month-year-picker","commit_stats":{"total_commits":122,"total_committers":9,"mean_commits":"13.555555555555555","dds":"0.48360655737704916","last_synced_commit":"deedbd2c3a63d85922a4e2a6e480a0dfec1c158a"},"previous_names":[],"tags_count":31,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/gusparis%2Freact-native-month-year-picker","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/gusparis%2Freact-native-month-year-picker/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/gusparis%2Freact-native-month-year-picker/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/gusparis%2Freact-native-month-year-picker/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/gusparis","download_url":"https://codeload.github.com/gusparis/react-native-month-year-picker/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247294536,"owners_count":20915340,"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","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":["android","ios","java","month-picker","month-year-picker","objective-c","react","react-native"],"created_at":"2024-10-04T16:04:16.652Z","updated_at":"2025-04-05T06:06:56.970Z","avatar_url":"https://github.com/gusparis.png","language":"Java","funding_links":[],"categories":[],"sub_categories":[],"readme":"# react-native-month-year-picker\nReact Native month picker component for iOS and Android.\n\n| UI Mode | Android | iOS |\n| --- | --- | --- |\n| \u003cp align=\"center\"\u003e***Light*** | \u003cimg align=\"center\" src=\"./screenshots/android_light.png\" width=\"120\"\u003e|\u003cimg align=\"center\" src=\"./screenshots/ios_light.png\" width=\"120\"\u003e\n| \u003cp align=\"center\"\u003e***Dark*** | \u003cimg align=\"center\" src=\"./screenshots/android_dark.png\" width=\"120\"\u003e|\u003cimg align=\"center\" src=\"./screenshots/ios_dark.png\" width=\"120\"\u003e\n\n## Getting started\n\n`$ npm install react-native-month-year-picker --save`\n\nor\n\n`$ yarn add react-native-month-year-picker`\n\n### For react-native@0.60.0 or above\n\nAs [react-native@0.60.0](https://reactnative.dev/blog/2019/07/03/version-60) or above supports autolinking, so there is no need to run linking process. \nRead more about autolinking [here](https://github.com/react-native-community/cli/blob/master/docs/autolinking.md).\n\n#### iOS\nCocoaPods on iOS needs this extra step\n\n```\nnpx pod-install\n```\n## Usage\n```javascript\nimport React, { useState, useCallback } from 'react';\nimport { View, SafeAreaView, Text } from 'react-native';\nimport MonthPicker from 'react-native-month-year-picker';\n\nconst App = () =\u003e {\n  const [date, setDate] = useState(new Date());\n  const [show, setShow] = useState(false);\n\n  const showPicker = useCallback((value) =\u003e setShow(value), []);\n\n  const onValueChange = useCallback(\n    (event, newDate) =\u003e {\n      const selectedDate = newDate || date;\n\n      showPicker(false);\n      setDate(selectedDate);\n    },\n    [date, showPicker],\n  );\n\n  return (\n    \u003cSafeAreaView\u003e\n      \u003cText\u003eMonth Year Picker Example\u003c/Text\u003e\n      \u003cText\u003e{moment(date, \"MM-YYYY\")}\u003c/Text\u003e\n      \u003cTouchableOpacity onPress={() =\u003e showPicker(true)}\u003e\n        \u003cText\u003eOPEN\u003c/Text\u003e\n      \u003c/TouchableOpacity\u003e\n      {show \u0026\u0026 (\n        \u003cMonthPicker\n          onChange={onValueChange}\n          value={date}\n          minimumDate={new Date()}\n          maximumDate={new Date(2025, 5)}\n          locale=\"ko\"\n        /\u003e\n      )}\n    \u003c/SafeAreaView\u003e\n  );\n};\n\nexport default App;\n\n```\n\n## Props\n\n#### `onChange` (`optional`)\n\nDate change handler.\n\nThis is called when the user changes the date in the UI. It receives the event and the date as parameters.\n\n```js\nsetDate = (event, date) =\u003e {};\n\n\u003cRNMonthPicker onChange={this.setDate} /\u003e;\n```\nEvents returned by onChange function:\n```js\nimport { ACTION_DATE_SET, ACTION_DISMISSED, ACTION_NEUTRAL } from 'react-native-month-year-picker';\n...\nonValueChange = (event, newDate) =\u003e {\n  switch(event) {\n    case ACTION_DATE_SET:\n      onSuccess(newDate);\n      break;\n    case ACTION_NEUTRAL:\n      onNeutral(newDate);\n      break;\n    case ACTION_DISMISSED:\n    default:\n      onCancel(); //when ACTION_DISMISSED new date will be undefined\n  }\n}\n...\n```\n\n#### `value` (`required`)\n\nDefines the date value used in the component.\n\n```js\n\u003cRNMonthPicker value={new Date()} /\u003e\n```\n\n#### `locale` (`optional`)\n\nDefines the month list locale. If not sent, it defaults to device's language.\n\n```js\n\u003cRNMonthPicker locale=\"ru\" /\u003e\n```\n\n#### `mode` (`optional`)\n\nDefines the month list display mode. It could be either `full`, `short`, `number` or `shortNumber`. Default `full`.\n\n| mode | display |\n| --- | --- |\n| **full** | *September* |\n| **short** | *Sep* |\n| **number** | *09* | \n| **shortNumber** | *9* | \n\n```js\n\u003cRNMonthPicker mode=\"number\" /\u003e\n```\n#### `autoTheme` (`optional`)\n\nEnables phone's UI Mode color recognition; for Android 10+ and iOS 13+. Lower OS versions will always be Light Mode. Default `true`.\n\n```js\n\u003cRNMonthPicker autoTheme={false} /\u003e\n```\n\n#### `maximumDate` (`optional`)\n\nDefines the maximum date that can be selected. Use year and month constructor.\n\n```js\n\u003cRNMonthPicker maximumDate={new Date(2030, 10)} /\u003e\n```\n\n#### `minimumDate` (`optional`)\n\nDefines the minimum date that can be selected. Use year and month constructor.\n\n```js\n\u003cRNMonthPicker minimumDate={new Date(2020, 5)} /\u003e\n```\n\n#### `okButton` (`optional`)\n\nPicker modal confirmation button text. Default `Done`.\n\n```js\n\u003cRNMonthPicker okButton=\"Confirm\" /\u003e\n```\n\n#### `cancelButton` (`optional`)\n\nPicker modal cancelation button text. Default `Cancel`.\n\n```js\n\u003cRNMonthPicker cancelButton=\"Abort\" /\u003e\n```\n\n#### `neutralButton` (`optional`)\n\nPicker modal neutral button text. If not sent, button won't appear. Default `null`.\n\n```js\n\u003cRNMonthPicker neutralButton=\"Delete\" /\u003e\n```\n\n## Running example\n1. Install required pods by running `yarn pod:install`.\n2. Run `yarn start` to start Metro Bundler.\n3. Run `yarn run:ios` or `yarn run:android`.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fgusparis%2Freact-native-month-year-picker","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fgusparis%2Freact-native-month-year-picker","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fgusparis%2Freact-native-month-year-picker/lists"}