https://github.com/gusparis/react-native-month-year-picker

React Native Month Picker component for iOS & Android
https://github.com/gusparis/react-native-month-year-picker

android ios java month-picker month-year-picker objective-c react react-native

Last synced: 12 days ago
JSON representation

React Native Month Picker component for iOS & Android

• Host: GitHub
• URL: https://github.com/gusparis/react-native-month-year-picker
• Owner: gusparis
• License: mit
• Created: 2020-04-30T21:36:09.000Z (over 4 years ago)
• Default Branch: master
• Last Pushed: 2023-03-04T15:31:54.000Z (over 1 year ago)
• Last Synced: 2024-10-27T13:31:23.294Z (17 days ago)
• Topics: android, ios, java, month-picker, month-year-picker, objective-c, react, react-native
• Language: Java
• Homepage:
• Size: 1.75 MB
• Stars: 107
• Watchers: 2
• Forks: 76
• Open Issues: 18
• Metadata Files:
  • Readme: README.md
  • Changelog: CHANGELOG.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# react-native-month-year-picker

React Native month picker component for iOS and Android.

| UI Mode | Android | iOS |

| --- | --- | --- |

| 
***Light*** | |

| 
***Dark*** | |

## Getting started

`$ npm install react-native-month-year-picker --save`

or

`$ yarn add react-native-month-year-picker`

### For [email protected] or above

As [[email protected]](https://reactnative.dev/blog/2019/07/03/version-60) or above supports autolinking, so there is no need to run linking process. 

Read more about autolinking [here](https://github.com/react-native-community/cli/blob/master/docs/autolinking.md).

#### iOS

CocoaPods on iOS needs this extra step

```

npx pod-install

```

## Usage

```javascript

import React, { useState, useCallback } from 'react';

import { View, SafeAreaView, Text } from 'react-native';

import MonthPicker from 'react-native-month-year-picker';

const App = () => {

  const [date, setDate] = useState(new Date());

  const [show, setShow] = useState(false);

  const showPicker = useCallback((value) => setShow(value), []);

  const onValueChange = useCallback(

    (event, newDate) => {

      const selectedDate = newDate || date;

      showPicker(false);

      setDate(selectedDate);

    },

    [date, showPicker],

  );

  return (

    

      Month Year Picker Example

      {moment(date, "MM-YYYY")}

       showPicker(true)}>

        OPEN

      

      {show && (

        

      )}

    

  );

};

export default App;

```

## Props

#### `onChange` (`optional`)

Date change handler.

This is called when the user changes the date in the UI. It receives the event and the date as parameters.

```js

setDate = (event, date) => {};

;

```

Events returned by onChange function:

```js

import { ACTION_DATE_SET, ACTION_DISMISSED, ACTION_NEUTRAL } from 'react-native-month-year-picker';

...

onValueChange = (event, newDate) => {

  switch(event) {

    case ACTION_DATE_SET:

      onSuccess(newDate);

      break;

    case ACTION_NEUTRAL:

      onNeutral(newDate);

      break;

    case ACTION_DISMISSED:

    default:

      onCancel(); //when ACTION_DISMISSED new date will be undefined

  }

}

...

```

#### `value` (`required`)

Defines the date value used in the component.

```js

```

#### `locale` (`optional`)

Defines the month list locale. If not sent, it defaults to device's language.

```js

```

#### `mode` (`optional`)

Defines the month list display mode. It could be either `full`, `short`, `number` or `shortNumber`. Default `full`.

| mode | display |

| --- | --- |

| **full** | *September* |

| **short** | *Sep* |

| **number** | *09* | 

| **shortNumber** | *9* | 

```js

```

#### `autoTheme` (`optional`)

Enables phone's UI Mode color recognition; for Android 10+ and iOS 13+. Lower OS versions will always be Light Mode. Default `true`.

```js

```

#### `maximumDate` (`optional`)

Defines the maximum date that can be selected. Use year and month constructor.

```js

```

#### `minimumDate` (`optional`)

Defines the minimum date that can be selected. Use year and month constructor.

```js

```

#### `okButton` (`optional`)

Picker modal confirmation button text. Default `Done`.

```js

```

#### `cancelButton` (`optional`)

Picker modal cancelation button text. Default `Cancel`.

```js

```

#### `neutralButton` (`optional`)

Picker modal neutral button text. If not sent, button won't appear. Default `null`.

```js

```

## Running example

1. Install required pods by running `yarn pod:install`.

2. Run `yarn start` to start Metro Bundler.

3. Run `yarn run:ios` or `yarn run:android`.