React-datepicker: TimeSelect is not being displayed properly

[plazma-prizma]

[wheredyoufindthis]

Experience the same problem, guys

[Rahulkr204]

I am not even getting the time section.

[matong1745]

I got the same problem TimeSelect is not working. Even upgrade to the ver. 0.60.0

[orx0r]

It is temporary fix the issue:

1.

import 'react-datepicker/dist/react-datepicker.css';

1. add some inline styles

.react-datepicker__time-container .react-datepicker__time .react-datepicker__time-box ul.react-datepicker__time-list {
    padding-left: 0;
    padding-right: 0;
}

[Rahulkr204]

@orx0r Added your fix to my code, still struggling with problem. Can you share your code snippet of DatePicker component used ?

[orx0r]

Hi @Rahulkr204 sure. this works in my case

// imports
import 'react-datepicker/dist/react-datepicker.css';

...
// component
return (
    <div>
        <style>
          {`.react-datepicker__time-container .react-datepicker__time .react-datepicker__time-box ul.react-datepicker__time-list {
            padding-left: 0;
            padding-right: 0;
          }`}
        </style>
        <DatePicker
          dateFormat="YYYY-MM-DD HH:mm"
          showTimeSelect
          timeFormat="HH:mm"
          selected={Moment(this.state.date)}
          onChange={this.onChange}
        />
    </div>
);

[codepandy]

Hi @orx0r
the same issue.
it's invalid the code that you show

[vvbvargas]

@orx0r works like a charm, thank you!!!

[shrutic]

@orx0r Thanks!!! Works great !! The code snippet really helped

[oldmill1]

@orx0r Perfect!!

[bskinny129]

The temp fix helped on desktop, but mobile looks like this:

[willm]

@bskinny129 I did this to make it work on smaller screens (probably not very elegant, but it worked)
```css
.react-datepicker__time-container .react-datepicker__time .react-datepicker__time-box ul.react-datepicker__time-list {
padding-left: unset;
padding-right: unset;
width: 100px;
}

.react-datepicker__input-container {
width:100%;
}

.react-datepicker-wrapper {
width:100%;
}

.react-datepicker {
width: 314px;
}

[bskinny129]

@willm Thank you, that really helped!

In case it helps anyone, here is my complete settings that I tried to optimize for mobile (doesn't pop up keyboard and is a little smaller to consistently fit on the screen):

```
.react-datepicker__time-container .react-datepicker__time .react-datepicker__time-box ul.react-datepicker__time-list {
padding-left: unset;
padding-right: unset;
width: 100px;
}
.react-datepicker__input-container, .react-datepicker-wrapper {
width:100%;
}
.react-datepicker {
width: 314px;
}
.react-datepicker .react-datepicker__day {
line-height: 1.4rem;
margin: .1rem 0.166rem;
}
.react-datepicker .react-datepicker__day-name {
line-height: 1rem;
}

popperModifiers={{
offset: {
enabled: true,
offset: '0px, 12px'
},
preventOverflow: {
enabled: true,
escapeWithReference: false,
boundariesElement: 'viewport'
}
}}
shouldCloseOnSelect={false} selected={this.state.tempDate} onChange={this.datePickerChanged}
dateFormat="M/D/YY h:mm a" timeIntervals={15} timeFormat="h:mm a" showTimeSelect />
```

[flameddd]

@orx0r and all others guys
thanks all of you to save my days :)

for anyone who use styled-component solution
according @orx0r sol for ref

const FixDatePickerTimer = styled.span`
  & .react-datepicker__time-container .react-datepicker__time .react-datepicker__time-box ul.react-datepicker__time-list {
    padding-left: unset;
    padding-right: unset;
    width: 100px;
  }
  & .react-datepicker__input-container {
    width:100%;
  }
  & .react-datepicker-wrapper {
    width:100%;
  }
  & .react-datepicker {
    width: 314px;
  }
`;

.....
<FixDatePickerTimer>
  <DatePicker
    dateFormat="YYYY-MM-DD HH:mm"
    showTimeSelect
    timeFormat="HH:mm"
    selected={Moment(this.state.date)}
    onChange={this.onChange}
   />
</FixDatePickerTimer>

[hnineitpm]

@orx0r thank you! it work now

[Mohammad-Khalid23]

@orx0r Thank you it worked for me

[dandua98]

Is there going to be a more permanent fix for this? Running react-datepicker v1.6 with React 15.6.

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.