search

pushtell / react-bootstrap-date-picker

React-Bootstrap based date picker.
MIT License
346 stars 195 forks source link

DatePicker does not work with InputGroup.Addon #116

Open bertramn opened 7 years ago

bertramn commented 7 years ago

I am trying to add some controls on either side of the datepicker so users can navigate directly. Unfortunately the way the datepicker is build it does not work with normal bootstrap input-group.

Expected Behavior

Can add InputGroup addons to the DatePicker control.

Current Behavior

When adding InputGroup addons the controls don't join properly together (e.g. rounding on the date picker control still there and size is slightly off).

Steps to Reproduce (for bugs)

I use the below code to setup the datepicker and addons:

<form>
  <ControlLabel htmlFor="reportDateSelector">Report Date</ControlLabel>
  <FormGroup className="col-md-4 col-xs-12 pull-right" controlId="reportDateForm">
    <InputGroup>
      <InputGroup.Addon>
        <Glyphicon glyph="chevron-left" />
      </InputGroup.Addon>
      <DatePicker id="reportDateSelector"
        showClearButton={false}
        weekStartsOn={1}
        showTodayButton={true}
        todayButtonLabel="Today"
        value={this.props.reportDate}
        onChange={this.props.onDateChange} />
      <InputGroup.Addon>
        <Glyphicon glyph="chevron-right" />
      </InputGroup.Addon>
    </InputGroup>
  </FormGroup>
</form>

Context

I would like to have previous and next date controls next the sides of the date picker so users can make a quick change to date if they just want to skip to the next or previous day.

------------------------
| < |   2017/04/21 | > |
------------------------

Your Environment

"react": "^15.5.4",
"react-addons-css-transition-group": "^15.3.0",
"react-bootstrap": "^0.30.8",
"react-bootstrap-date-picker": "^5.0.1",