React-datepicker: Bootstrap input-group CSS alignment

[adamellsworth]

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>

[rafeememon]

I believe this is because the top-level element of the DatePicker isn't an <input>, it's a <div>. The only thing preventing us from changing it to an input right now is support for the clear button; however, supporting it in its current form is pretty restricting (because of cases like this issue), and it's not too difficult to implement outside of this library. @martijnrusschen do you have any thoughts here?

[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.

[aleccool213]

+1

[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.

[jochenberger]

See http://codepen.io/jochenberger/pen/ENRNZN for an example.

[HadiAkmal]

@jochenberger

I test your codepen and the selected date did not appear in the input field? Why is that?

[jochenberger]

Because there is no change handler specified on the DatePicker

[adamellsworth]

For those whom the above solution did not work, this kind of works for me, although it does shrink the entire form group:

.react-datepicker__input-container input.form-control {
    margin-bottom: -5px !important;
}