Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More
Socket
Sign inDemoInstall
Socket

react-native-month-year-picker

Package Overview
Dependencies
Maintainers
1
Versions
33
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

react-native-month-year-picker

React Native Month Picker component for iOS & Android

  • 1.9.0
  • latest
  • Source
  • npm
  • Socket score

Version published
Weekly downloads
7.2K
decreased by-0.89%
Maintainers
1
Weekly downloads
 
Created
Source

react-native-month-year-picker

React Native month picker component for iOS and Android.

UI ModeAndroidiOS

Light

Dark

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, 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 (
    <SafeAreaView>
      <Text>Month Year Picker Example</Text>
      <Text>{moment(date, "MM-YYYY")}</Text>
      <TouchableOpacity onPress={() => showPicker(true)}>
        <Text>OPEN</Text>
      </TouchableOpacity>
      {show && (
        <MonthPicker
          onChange={onValueChange}
          value={date}
          minimumDate={new Date()}
          maximumDate={new Date(2025, 5)}
          locale="ko"
        />
      )}
    </SafeAreaView>
  );
};

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} />;

Events returned by onChange function:

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.

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

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

<RNMonthPicker locale="ru" />
mode (optional)

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

modedisplay
fullSeptember
shortSep
number09
shortNumber9
<RNMonthPicker mode="number" />
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.

<RNMonthPicker autoTheme={false} />
maximumDate (optional)

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

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

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

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

Picker modal confirmation button text. Default Done.

<RNMonthPicker okButton="Confirm" />
cancelButton (optional)

Picker modal cancelation button text. Default Cancel.

<RNMonthPicker cancelButton="Abort" />
neutralButton (optional)

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

<RNMonthPicker neutralButton="Delete" />

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.

Keywords

FAQs

Package last updated on 28 Nov 2022

Did you know?

Socket

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

Packages

npm

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc