Preact-monthpicker NPM

preact-monthpicker

Installation

npm install preact-monthpicker -S

Just provide month-year range to this component and get this working

npm.io

Usage

Code Example:

import {MonthYearPicker} from "preact-monthpicker";

componentWillMount() {
  this.state = {
    selectedMonth: new Date().getMonth()+1,
    selectedYear: new Date().getFullYear(),
    minYear: 2015,  //starting year
    maxYear: 2020  //end year
  };
}

onChangeYear(selectedYear) {
  this.setState({ selectedYear });
  //Do stuff
}

onChangeMonth(selectedMonth) {
  this.setState({ selectedMonth });
  //Do stuff
}

render(
  <div>
    <MonthYearPicker
      selectedMonth={this.state.selectedMonth}
      selectedYear={this.state.selectedYear}
      minYear={this.state.minYear}
      maxYear={this.state.maxYear}
      onChangeYear={year => this.onChangeYear(year)}
      onChangeMonth={month => this.onChangeMonth(month)}
    />
  </div>,
  document.body
);

Props

Properties used to customise the rendering:

Name	Type	Description
selectedMonth	Number`(required)`	Month to be highlighted (preselected when component is loaded onto page)
selectedYear	Number`(required)`	Year to be highlighted (preselected when component is loaded onto page)
minYear	Number`(required)`	Starting year in picker range
maxYear	Number`(required)`	Ending year in picker range
onChangeYear	Function`(required)`	Callback function to be called when user changes selected year
onChangeMonth	Function`(required)`	Callback function to be called when user changes month
caption	String	Label to display in front of picker