Bootstrap input-group CSS alignment

v.0.27.0 React v.15.0.1

---

I’m including the styles as noted in the docs:

require('react-datepicker/dist/react-datepicker.css');

There is a considerable disparity between the addon and the input style/alignment:

markup:

<div className="input-group">
    <span className="input-group-addon">
        <i className="fa fa-calendar"></i>
    </span>
    <DatePicker
        selected={this.state.startDate}
        onChange={this.handleDateChange.bind(null, 'startDate')}
        placeholderText="Start Date &hellip;"
        className="form-control"/>
</div>

[ryanzec]

I have the same problem with this.

A temporary hacky workaround I have found is to add this scss:

//NOTE: this is needed in order to make react-datepicker work with bootstrap's input group / input group addon functionatily
.react-datepicker__input-container {
  width: 100%;

  //NOTE: using table instead of block as it is needed in order to make this element set the height since the input is floating
  display: table;

  input {
    border-radius: $input-border-radius;
  }
}

.form-inline {
  .react-datepicker__input-container {
    width: auto;
    display: inline;
  }
}

This works fine for regular form elements however when you use inline form elements, that is where the hacky part come into play. When using inline form elements, the height of the react-datepicker__input-container becomes messed up and does not reflect the height of the elements within. In order to work around that, you can use the popoverTargetOffset property of react-datepicker to align the date picker itself properly.

@martijnrusschen I would be in favor of removing the clear functionality because as @rafeememon said, that is not very difficult functionality to implement manually and it would make this component more flexible to work with. While my hacky solution works, I would not want it to be a long term solution as it would be very prone to breaking as styles are tweaked.

[jochenberger]

I use a customInput that uses http://react-bootstrap.github.io/ for this use case:

const InputWithButton = (props)=>{
  return(
    <InputGroup>
      <FormControl onClick={props.onClick} value={props.value} onChange={props.onChange} disabled={props.disabled} />
      <InputGroup.Button>
        <Button onClick={props.onClick} disabled={props.disabled}><Glyphicon glyph="calendar" /></Button>
      </InputGroup.Button>
    </InputGroup>
  );
};

and then

<DatePicker customInput={<InputWithButton />} ... />

Maybe some custom input implementations could be provided with react-datepicker, this one would need a dependency on react-bootstrap though.