when viewMode is months, would like to select only month and year from picker.

[mnaveenm]

Its a great component we came across to use in our react application for datatime picker. We found a small issue with this in particular scenario. Here is it:

When we give viewMode as "months" and click on dataTimePicker box and selects MONTH and YEAR, its going to DATE input screen to select day of month. We would like an options to avoid selecting day of the month, instead having it automatically set to a default value when viewMode is "months".

[arhtudormorar]

Here is a dirty workaround: Instead of using DateTimeField, extend it and use the extended component:

import React, {PropTypes} from 'react';
import {FormGroup, ControlLabel, FormControl, HelpBlock}  from 'react-bootstrap';
import DateTimeField from 'react-bootstrap-datetimepicker';


class DateMonthField extends DateTimeField {
  constructor(props, context) {
    super(props, context);
    const _this = this;
    this.setViewMonth = function (month) {
      if (this.viewMode === 'months')
      {
        return _this.setState({
          selectedDate: _this.state.selectedDate.clone().month(month)
        }, function () {
          _this.closePicker();
          _this.props.onChange(_this.state.selectedDate.format(_this.props.format));
          return _this.setState({
            inputValue: _this.state.selectedDate.format(_this.state.inputFormat)
          });
        });
      }

      return _this.setState({
        viewDate: _this.state.viewDate.clone().month(month)
      });
    };

    this.closePicker = function() {
      let style = Object.assign({}, _this.state.widgetStyle);
      style.left = -9999;
      style.display = "none";

      if (this.props.viewMode === 'months') {
        const dateInput = document.getElementById(this.props.inputProps.id);
        const calendar = dateInput.parentNode.previousSibling.getElementsByTagName("TABLE")[0];
        const monthButton = calendar.getElementsByTagName("TH")[1];
        monthButton.click();
      }

      return _this.setState({
        showPicker: false,
        widgetStyle: style
      });
    };
  }
}

const Input = ({id, getValidationState, label, value, dateFormat, dateInputFormat, dateViewMode, dateMode, placeholder, handleChange, handleBlur, help, errors}) => {
  const inputProps = {
    id: id+"DateMonthField"
  };
  return (<FormGroup
           controlId={id}
           validationState={getValidationState}>
             <ControlLabel  className="col-lg-2">{label}</ControlLabel>
             <div className="col-lg-10" id="dateMonthFieldWrapper">
               <DateMonthField
                 dateTime={value}
                 format={dateFormat}
                 inputFormat={dateInputFormat}
                 viewMode={dateViewMode}
                 mode={dateMode}
                 onChange={handleChange}
                 onBlur={handleBlur}
                 inputProps={inputProps}
               />
              <FormControl.Feedback />
              <HelpBlock>{help} <span className="pull-right">{errors}</span></HelpBlock>
            </div>
        </FormGroup>);
};

Input.propTypes = {
  id: PropTypes.string.isRequired,
  getValidationState: PropTypes.string,
  label: PropTypes.string.isRequired,
  dateInputFormat: PropTypes.string.isRequired,
  dateFormat: PropTypes.string.isRequired,
  dateMode: PropTypes.string.isRequired,
  dateViewMode: PropTypes.string.isRequired,
  value: PropTypes.string || PropTypes.number,
  enumOptions: PropTypes.array,
  help: PropTypes.string || PropTypes.number,
  placeholder:  PropTypes.string || PropTypes.number,
  handleChange: PropTypes.func,
  handleBlur: PropTypes.func,
  errors: PropTypes.array
};

export default Input;