search

quri / react-bootstrap-datetimepicker

[DEPRECATED] A react.js datetime picker for bootstrap
http://dev.quri.com/react-bootstrap-datetimepicker/
MIT License
365 stars 292 forks source link

Datepicker doesn't position correctly horizontally #137

Open onethread opened 8 years ago

onethread commented 8 years ago

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.

onethread commented 8 years ago

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.

sranjithk commented 6 years ago

import 'react-bootstrap-datetimepicker/css/bootstrap-datetimepicker.min.css'; you will get all properly