Angular ui-bootstrap datepicker change theme

Question

I have a angular datepicker that shows like this -

This datepicker is huge and covers up almost 30% of the screen and also, dates have huge gaps among them.

Now I suspect that this is happening because I have styled my tables and buttons for the whole project. How do I change/style my datepicker so my table and button styling does not affect the datepicker.

PS : I tried styling it with .datepicker syntax, did not work. Thanks.

Answer 1

I had a similar problem in my website as well when using ui-bootstrap datepicker. The datepicker is good with many features but finding a way to customize it becomes a pain.

Coming to your problem, I have few suggestions:

• The datepicker will take the CSS that you have by default for table, th, td, tr in your website. Find a way to specify the styling for uib-datepicker-popup.

• Try using a custom template as mentioned in the website documentation. Check this out

This link will be useful - http://stackoverflow.com/questions/36801772/how-do-i-change-the-uib-datepicker-popup-button-bar

Answer 2

You actually need CSS tricks. like:

• Be sure your custom styles are loaded after bootstrap codes.
• Make your selector more powerful, like #someContainer div.uib-datepicker {...} or #someContainer div.uib-datepicker > table > tbody > tr > td {...} (well, doing this with css-preprocessors are quite easy)
• easily edit ui-boostrap js code and add an extra class to its template, and follow above structure

---

By the way, adm-dtp module might be more helpful.