react-native-month-picker

A simple and customizable react native month & year picker for iOS and Android apps.

Usage no npm install needed!

<script type="module">
  import reactNativeMonthPicker from 'https://cdn.skypack.dev/react-native-month-picker';
</script>

README

Welcome to react-native-month-picker

This is a simple and customizable react native month picker for both iOS and Android apps. react-native-month-picker allows to create a date picker with month and year fields only. This package is inspired and based on react-native-month-selector with some bugfixing and improvements.

Demo

Here is how it looks! All the colors, formats and icons are customizable! enter image description here

Examples

Simple example of the react native month picker here If you need it as a modal, here is a very simple example on how you can create it.

Available props

Here is the list of all available props with their default values. You can change them to fit your project.

selectedDate:  moment(),
currentDate:  moment(),
maxDate:  moment(),
minDate:  moment('01-01-1900', 'DD-MM-YYYY'),
selectedBackgroundColor:  '#000',
selectedMonthTextStyle: { color:  '#fff' },
seperatorHeight:  1,
seperatorColor:  '#b6c3cb',
nextIcon:  null,
prevIcon:  null,
nextText:  'Next',
prevText:  'Prev',
containerStyle:  null,
yearTextStyle:  null,
monthFormat:  'MMM',
currentMonthTextStyle: { color:  '#25cc9d' },
monthTextStyle: { color:  '#000' },
initialView:  moment(),
onMonthChange: () => { },
onYearChange: () => { },
monthDisabledStyle: { color:  '#00000050' },
yearDisabledStyle: { color:  '#00000050' },
localeLanguage:  'en',
localeSettings: {},
swipable:  false,
velocityThreshold:  0.3,
directionalOffsetThreshold:  80,
gestureIsClickThreshold:  5,

Contribution

Please feel free to open pull requests to make this package more useful for more people. I would love to keep it improving together!