preact-monthpicker

Installation

npm install preact-monthpicker -S

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

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