ng-bootstrap中datepicker控件汉化

最近在写Angular2的项目中需要使用到的日历插件，于是选用了ng-bootstrap，其中的datepicker插件默认是英文的，我开始使用的ng-bootstrap版本是1.1.2的版本，在这个版本里，我简单粗暴的修改了ng-bootstrap的datepicker-i18n.js的源码，其中

var WEEKDAYS_SHORT = ['Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa', 'Su'];
var MONTHS_SHORT = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'];
var MONTHS_FULL = [
    'January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November',
    'December'
];

上面这几行代码在node_modules下的@ng-bootstrap中的datepicker文件夹下的datepicker-i18n.js中，把上面的英文缩写修改为对应的中文就简单粗暴的实现了日历控件的汉化（不过不建议修改源码）

var WEEKDAYS_SHORT = ['一', '二', '三', '四', '五', '六', '日'];
var MONTHS_SHORT = ['一月', '二月', '三月', '四月', '五月', '六月', '七月', '八月', '九月', '十月', '十一月', '十二月'];
var MONTHS_FULL = ['一月', '二月', '三月', '四月', '五月', '六月', '七月', '八月', '九月', '十月', '十一月', '十二月'];

可是最近ng-bootstrap更新了版本，更新到了2.0.0，于是在源码中取消了这几个定义，这样一来就再也不能通过修改源码来实现汉化了，新版本使用了angular中的国际化

import { FormStyle, getLocaleDayNames, getLocaleMonthNames, TranslationWidth } from '@angular/common';

通过修改这几个angular/common的文件实现国际化

所以，现在使用ng-bootstrap的日历控件要想把英文换成中文，有两种方法：一、angular自带的国际化，可以去angular官方文档查看，其实我也没实现过，但是文档上确实有国际化的方法；二、在使用日期插件的组件中修改ng-bootstrap的三个方法getWeekdayShortName、getMonthShortName、getMonthFullName，这三个方法是NgbDatepickerI18n开放出来的，而ng-bootstrap源码中也是通过这三个方法来修改语言的，下面是使用方法：
首先、在使用了ng-bootstrap中的日历插件的组件中引入NgbDatepickerI18n

import { NgbDatepicker,  NgbDatepickerI18n } from '@ng-bootstrap/ng-bootstrap';

然后、设置语言，我是按照1.1.2版本中的方式修改的

constructor(
    private i18n: NgbDatepickerI18n
  ) {
    this.i18n.getWeekdayShortName = function(weekday) {
      return ['一', '二', '三', '四', '五', '六', '日'][weekday - 1];
    };
    this.i18n.getMonthShortName = function(month) {
      return ['一月', '二月', '三月', '四月', '五月', '六月', '七月', '八月', '九月', '十月', '十一月', '十二月'][month - 1];
    };
  }

最后、关于修改ng-bootstrap的语言我其实花费了好几天的时间，百度和google都用了，没有一个清晰的解决思路，又说用moment.js的，也有说引入中文国际化文件angular-locale_zh-cn.js 的，我个人感觉这两种方法应该都能实现需求，但是我不会(尴尬脸)，所以我偶尔发现了这种取巧的办法，感觉还挺好用(奸笑脸)

如果本篇文章帮助到了你，请动动手指点个赞吧！

转载于:https://www.jianshu.com/p/a15de3bed426