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.

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

Balasubramanian S · Accepted Answer · 2017-06-22 15:39:34Z

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

answered Jun 22, 2017 at 15:39

Balasubramanian S

1,45315 silver badges16 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

MeTe-30 · Accepted Answer · 2016-07-15 18:33:52Z

0

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.

edited Jul 15, 2016 at 18:33

answered Jul 15, 2016 at 18:30

MeTe-30

2,5422 gold badges23 silver badges31 bronze badges

2 Comments

Sushant Over a year ago

I know I do need a CSS trick, but I can not figure out what. Also, switching to a different calendar will be my last resort

MeTe-30 Over a year ago

@ThatBird do my three suggestions :)

Collectives™ on Stack Overflow

Angular ui-bootstrap datepicker change theme

2 Answers 2

Comments

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related