react-native-month-year-picker

react-native-month-year-picker

React Native month picker component for iOS and Android

android	iOS
under construction...

Getting started

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

or

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

For react-native@0.60.0 or above

As react-native@0.60.0 or above supports autolinking, so there is no need to run linking process. Read more about autolinking here.

iOS

CocoaPods on iOS needs this extra step

npx pod-install

Usage

import React, { useState } from 'react';
import { View, Button, Text } from 'react-native';
import MonthPicker from 'react-native-month-year-picker';

const App = () => {

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

  const toggleMonthPicker = () => setShow(!show);

  const onValueChange = (event, value) => setDate(value);

  return (
    <View>
      <Button onPress={toggleMonthPicker} title="Open Month Picker"/>
      <Text>`The selected date is: ${date}`</Text>
      {show && (
        <MonthPicker onChange={onValueChange} />
      )}
    </View>
  )
}

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.

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

<RNMonthPicker onChange={this.setDate} />;

value (required)

Defines the date value used in the component.

<RNMonthPicker value={new Date()} />

maximumDate (optional)

Defines the maximum date that can be selected.

<RNMonthPicker maximumDate={new Date(2030, 10)} />

minimumDate (optional)

Defines the minimum date that can be selected.

<RNMonthPicker minimumDate={new Date(2020, 5)} />

outputFormat (optional)

Defines the output format in which the date will return. Defaults to MM-YYYY. Refer to moment.js docs for more information about formats.

<RNMonthPicker outputFormat="M-YY" />

more under construction...