Angular 4中如何使用jQuery UI Datepicker国际化（i18n）？

我来帮你梳理下具体的实现步骤，结合你的代码调整：

1. 安装依赖并引入脚本 #

首先确保你已经安装了jQuery和jQuery UI：

npm install jquery jquery-ui --save

如果是单独下载的jquery-ui-i18n.min.js，把它放到项目的assets/js目录下（没有的话新建）。然后在.angular-cli.json（Angular 4使用的配置文件）的scripts数组中按顺序引入脚本：

"scripts": [
  "../node_modules/jquery/dist/jquery.min.js",
  "../node_modules/jquery-ui-dist/jquery-ui.min.js",
  "./assets/js/jquery-ui-i18n.min.js"
]

注意：脚本顺序很关键，必须先引入jQuery，再引入jQuery UI，最后引入语言包文件，否则语言配置会失效。

2. 处理TypeScript类型报错 #

在你的组件文件顶部添加声明，避免TypeScript找不到$的报错：

declare var $: any;

如果想要获得更友好的类型提示，可以安装对应的类型声明包：

npm install @types/jquery @types/jquery-ui --save-dev

3. 初始化Datepicker并优化语言切换逻辑 #

首先在组件的ngAfterViewInit生命周期钩子中初始化Datepicker（确保DOM已经渲染完成），再修改你的语言切换方法：

import { AfterViewInit, Component } from '@angular/core';

@Component({
  // 你的组件元数据（selector、templateUrl等）
})
export class YourComponent implements AfterViewInit {
  lanId: string;

  constructor(private commonService: CommonService) {}

  ngAfterViewInit() {
    // 初始化所有目标Datepicker，可添加自定义初始配置
    $( ".instartdate input, .inenddate input, .crstartdate input, .crenddate input" ).datepicker({
      dateFormat: 'yy-mm-dd' // 根据需求配置日期格式
    });
  }

  onLangChange(langObj) {
    this.lanId = this.commonService.getCurrentLanguageCode();
    // 检查对应语言的配置是否存在，不存在则 fallback 到默认配置
    const langConfig = $.datepicker.regional[this.lanId] || $.datepicker.regional[''];
    // 更新Datepicker的语言配置
    $( ".instartdate input, .inenddate input, .crstartdate input, .crenddate input" ).datepicker( "option", langConfig);
  }
}

4. 验证语言键匹配 #

jquery-ui-i18n.min.js中的语言配置键是固定的，比如英文对应空字符串''、中文简体对应'zh-CN'。你需要确保this.commonService.getCurrentLanguageCode()返回的lanId值和语言包中的键一致，比如如果返回的是'zh'，需要调整为'zh-CN'才能正确匹配。

内容的提问来源于stack exchange，提问作者Parth Jasani