react-bootstrap-datetimepicker icon indicating copy to clipboard operation
react-bootstrap-datetimepicker copied to clipboard

Datepicker doesn't position correctly horizontally

Open onethread opened this issue 10 years ago • 2 comments

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 avatar Dec 02 '15 22:12 onethread

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.

onethread avatar Dec 15 '15 20:12 onethread

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

sranjithk avatar Nov 09 '17 06:11 sranjithk