Calendar date UI broken when mixed with Bootstrap

[ChaudhryAtif]

Trying to use this picker along with Bootstrap 4.

Not entirely sure what could be causing it. Perhaps some styling from BS4 is causing the UI to break.

[ChaudhryAtif]

Setting .calendar--day's width to 2.285em (instead of 1.285em) fixes UI issue with Bootstrap, but somewhat breaks without-bootstrap UI.

With BS4 and width 2.285em:

W/o BS4 and width 2.285em:

[ChaudhryAtif]

Adding/updating these classes made it work with and without BS4:

.calendar--days-select {
  display: flex;
  flex-wrap: wrap;
  flex-direction: row;
  justify-content: space-between;
}

.calendar--day {
  padding: .5em 0;
  text-align: center;
  width: 2.25em;
  font-size: 1em;
}

---

@TheOriginalJosh Btw, I'm making some UI changes to suit my needs. If you want, I can do a PR after I'm done? I can probably do a PR with some specifics if you only want some of the UI changes.

What I have so far: (without bootstrap applied)

• A little compact compared to original version
• Bold selected period (AM, PM), and Month arrows (<>)
• Minute and hour selection has white background like Dates

• Switched month and year view to match that of hour/minute

[JoshDSommer]

@ChaudhryAtif a PR would be fantastic, without bootstrap applied does it still have the same look and feel? @BrentWMiller would you be able to review this PR?

[ChaudhryAtif]

@TheOriginalJosh The screenshots above are without Bootstrap applied.

Do you want a PR for just the BS4 fix, or do you want me to include all of my UI changes as well? It may change things up for some people who are using the one-value-per-row view for Month and Year.

---

Also, if I wanted to add a font-awesome (or any other) dependency on my personal fork, would that go into ngx-datetimepicker/package.json or ngx-datetimepicker/ngx-datetimepicker/package.json

[BrentWMiller]

I can fix this to work with BS4. Just need to find the conflicting classes

[ChaudhryAtif]

@BrentWMiller I posted what I changed to get it working with and without BS4 in earlier reply. You can take a look at that..

[ChaudhryAtif]

@TheOriginalJosh @BrentWMiller

45

• Fix BS4 issue
• Add disable feature (idea from this fork's commit)
• Add type='button' to prevent form submitting (from this fork's commit)

[SamGraber]

Fixed in 1.2.0 via #45