Simple Month and Year React Component - formatted for rails backend

react-month-year.js.jsx

var MonthYear = React.createClass({
  
  /**
   * @return {hash of initial state}
   */
  getInitialState() {
    var month, year;
    if (this.props.value) {
      var d = new Date(this.props.value)
      d.setHours(d.getHours()+15)
      month = d.getMonth();
      year = d.getFullYear();
    }
    return {
      month: month,
      year: year
    }
  },

  /**
   * 
   */
  handleMonthChange(event) {
    this.setState({month: event.target.value})
    this.createDate(event.target.value, this.state.year);
  },

  /**
   * 
   */
  handleYearChange(event) {
    this.setState({year: event.target.value})
    this.createDate(this.state.month, event.target.value);
  },

  /**
   * 
   */
  createDate(month, year) {
    var date = new Date(year, month, 5);
    if (typeof(this.props.onChange) === "function") {
      this.props.onChange(this.props.modelAttribute, date.toISOString());
    }
  },

  /**
   * 
   */
  getYearOptions() {
    var now = new Date().setFullYear(new Date().getFullYear() + 1);
    var options = [];
    for (var d = new Date(1980, 0, 1); d <= now; d.setFullYear(d.getFullYear() + 1)) {
      year = new Date(d);
      options.push({label: d.getFullYear(), value: year.getFullYear()});
    }
    return options
  },

  /**
   * 
   */
  getMonthOptions() {
    var monthNames = [ 
      {label:"January",   value:0},
      {label:"February",  value:1},
      {label:"March",     value:2},
      {label:"April",     value:3},
      {label:"May",       value:4},
      {label:"June",      value:5},
      {label:"July",      value:6},
      {label:"August",    value:7},
      {label:"September", value:8},
      {label:"October",   value:9},
      {label:"November",  value:10},
      {label:"December",  value:11} 
    ];
    return monthNames
  },
  
  /**
   * RENDER
   */
  render() {
    var yearOptions = this.getYearOptions()
    var monthOptions = this.getMonthOptions()
    return (
      <div>
          <select 
            value={this.state.month}
            disabled={this.props.disabled ? "disabled" : false}
            onChange={this.handleMonthChange}
          >
            <option> Select Month </option>
            {monthOptions.map(function(result, index) {
              return <option
                  key={result.value}
                  value={result.value}
                >
                  {result.label}
                </option> 
            })}
          </select>
          <select 
            value={this.state.year}
            disabled={this.props.disabled ? "disabled" : false}
            onChange={this.handleYearChange}
          >
            <option> Select Year </option>
            {yearOptions.map(function(result, index) {
              return <option
                  key={result.value}
                  value={result.value}
                >
                  {result.label}
                </option> 
            })}
          </select>
      </div>
    )
  }
});