react-bootstrap-datetimepicker
react-bootstrap-datetimepicker copied to clipboard
Datepicker doesn't position correctly horizontally
When the component is nested in a positioned element, such as a bootstrap column, it positions the picker widget incorrectly. Currently, it looks like it attempts to calculate a horizontal position, but it doesn't use the calculation and fixes the style to right: 40 in the onClick function.
Putting style={{positon:relative}} on the wrapping div in DateTimeField.js seems to fix things.
Although, to take it a step further, is there a reason not to make DateTimePicker the root node? I've experimented with eliminating the wrapping div and making DateTimePicker the root node and putting the input and span elements as its children. That seems to make it more flexible with other html elements.
For example:
<div className="form-group">
<label htmlFor="datepicker-end-date" className="control-label">End Date </label>
<DateTimeField id="datepicker-end-date" />
</div>
will not work display inline out of the box because the wrapping div will cause a line break.
import 'react-bootstrap-datetimepicker/css/bootstrap-datetimepicker.min.css'; you will get all properly