month-year-picker

Allow to select month and year.

Usage no npm install needed!

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

README

MonthYearPicker

Allow to select month and year.

  • Install by executing npm install month-year-picker.
  • Import by adding import MonthPicker from 'month-year-picker'.
  • Use by adding <MonthPicker name="..." />.
Example-1

Demo

Example-1

Usage

Here's an example of basic usage:

import React, { Component } from 'react';
import MonthPicker from 'month-year-picker';

class MyApp extends Component {
  render() {
    return (
      <div>
        <MonthPicker
          name="MonthYear"
          allowedYears={{ "after": new Date().getFullYear() - 2 }}
        />
      </div>
    );
  }
}

User guide

Props

Prop name Description Default value Example values
className Class name that will be added to rendered element along with the default. n/a
  • String:
    "custom-class-name-1"
Id Id for Month Picker. n/a
  • String:
    "MonthYear"
allowedYears allowedYears for Month Picker. n/a
  • object:
    { "after": new Date().getFullYear() - 2,"before": new Date().getFullYear() + 4}
ChangeYearFormat Change year format to YYYY. false
  • Boolean:
    true
hintText hint text shown in picker. "MM/YY"
  • String:
    "MM/YY"
primaryColor Background Color of Month Picker. "#27718c"
  • String:
    "#4776E6"
secondaryColor Text Color of Month Picker. "#898989"
  • String:
    "#898989"
textFieldStyle Text field Style for Month Picker. n/a
  • Array:
    {color:"black"}
disabled For disabling Month Picker. false
  • Boolean:
    true