import React from 'react';
import moment from 'moment';
import YearPicker from './year-picker';
import SelectionBox from './selection-box';
/**
* Display a bootstrap form control for selection of a month and year
*/
export default class MonthYearPicker extends React.Component {
constructor(props) {
super(props);
this.change = this.change.bind(this);
}
change(prop) {
return val => {
if (this.props.onChange) {
const data = Object.assign({}, this.props.value);
data[prop] = val;
this.props.onChange(data);
}
};
}
focus() {
const refs = this.refs;
const ctrl = this.props.period ? refs.iniMonth : refs.month;
ctrl.getDOMNode().focus();
}
/**
* Create the month selector with the list of month names
*/
monthSelector(props) {
// create the options
const options = [];
let count = 0;
while (count < 12) {
options.push({
id: count + 1,
name: moment().month(count++).format('MMM')
});
}
const selval = props.value ?
options.find(it => it.id === props.value) :
null;
const monthChange = val => {
if (props.onChange) {
props.onChange(val !== null ? val.id : null);
}
};
const compProps = Object.assign({}, props, { onChange: monthChange, value: selval });
return (