如何将引导样式应用于角度ui日期选择器

Question

I'm using datepicker from angular.ui, and it styled with empty design which you can see in the site . Now I want to have bootstrap styled datepicker and timepicker without using extra libraries or plugins. Is there a short way to apply bootstrap styles to calendar?

Answer 1

You have three options to modify the default angular-ui-bootstrap style:

1. Edit the default templates and recompile angular-ui-bootstrap. All the templates are located in the template directory . Eg datepicker templates are here .
2. Override the default templates in you code. By default if you use the -tpls- distribution version of angular-ui-bootstrap then all the templates are bundled inside $templateCache , see here . So you could provide your own datepicker template overriding the default template eg $templateCache.put("template/datepicker/popup.html"
3. Or as per the docs:

If, on the other hand default templates are not what you need you could take ui-bootstrap-[version].min.js and provide your own templates, taking the default ones ( https://github.com/angular-ui/bootstrap/tree/master/template ) as a starting point.