angular ui-bootstrap日期控件如何显示成中文

最新推荐文章于 2024-07-23 13:00:00 发布

Ronux

最新推荐文章于 2024-07-23 13:00:00 发布

阅读量8.8k

点赞数

分类专栏： Web前端文章标签： angular

本文链接：https://blog.csdn.net/chinazgr/article/details/51867543

版权

本文档详细介绍了如何将Angular UI-Bootstrap的日期控件datepicker和datepickerPopup设置为中文显示。通过引入angular-locale_zh-cn.js文件进行国际化，并在datepicker和datepickerPopup的模板及内部函数中进行相应配置，实现中文显示。此外，还提供了在angular-locale_zh-cn.js文件添加中文配置和修改popup.js的方法。

摘要由CSDN通过智能技术生成

ui-bootstrap下关于日期的插件是datepicker，但其块状显示的方式，限制了其应用范围，或者说datepicker就是为做基础插件而生。于是依赖datepicker的datepickerPopup的弹出框模式使其更接近于bootstrap-datepicker：

1. 明确范围

这里写图片描述
可以看到中文国际化分成两部分，一个是对datepicker插件，一个是对datepickerPopup插件。

2. 对datepicker中文国际化

引入angular-locale_zh-cn.js中文化文件。
datepicker使用dateparser组件对日期格式做处理，其主要使用$locale引用文字资源。

3. 对datepickerPopup中文国际化

先分解其使用过程：
1）. 使用处，在master/template/datepickerPopup/popup.html

<ul class="uib-datepicker-popup dropdown-menu uib-position-measure" dropdown-nested ng-if="isOpen" ng-keydown="keydown($event)" ng-click="$event.stopPropagation()">
  <li ng-transclude></li>
  <li ng-if="showButtonBar" class=