Tempus Dominus Bootstrap 4 更改语言/区域设置答案

【问题标题】：Tempus Dominus Bootstrap 4 change the language/localeTempus Dominus Bootstrap 4 更改语言/区域设置
【发布时间】：2018-12-28 01:26:42
【问题描述】：

在 TempusDominusBootstrap 4 选项中，我通过首先连接以下依赖项 (import * asmoment from 'moment';import 'moment / locale / en';import 'moment-timezone';) 将语言环境设置为 (locale: moment.locale ('ru')) 我没有得到预期结果 - 界面语言是英语，我以 GMT 格式 (Thursday, July 19, 2018, 19:13:57) 获得时间，但我需要考虑时区 (четверг, 19 июля 2018 г., 22:13:57 GMT+03:00 DST)。如何解决这个问题？

import {Component, OnInit} from '@angular/core';
import * as moment from 'moment';
import 'moment/locale/ru';
import 'moment-timezone';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {

  options = {
    locale: moment.locale('ru'),
    format: 'YYYY/MM/DD HH:mm:ss',
    buttons: {showClear: true},
    icons: {clear: 'fa fa-trash'}
  };
  date = null;

  constructor() {
  }

  ngOnInit() {
    this.date = moment().format('LTS');
  }

  addTime(val, selector) {
    this.date = moment(this.date.add(val, selector));
  }

  clearTime() {
    this.date = null;
  }

  getTime() {
    window.alert('Selected time is:' + this.date.format('YYYY/MM/DD HH:mm'));
  }

html

<div class="container">
  <h4 class="mt-5">
    Simple Date Picker
  </h4>
  <div class="row">
    <div class="col-sm-3">
      <div class="form-group">
        <div id="datetimepicker1" class="input-group date" data-target-input="nearest" NgTempusdominusBootstrap>
          <input
            class="form-control"
            [(ngModel)]="date"
            [options]="options"
            NgTempusdominusBootstrapInput
            type="text"
          />
          <div class="input-group-append" NgTempusdominusBootstrapToggle>
            <div class="input-group-text">
              <i class="fa fa-calendar"></i>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="col">
      <button class="btn btn-primary" (click)="getTime()" [disabled]="!date">What's the time?</button>&nbsp;
      <button class="btn btn-primary" (click)="addTime(1, 'h')" [disabled]="!date">Add +1h</button>&nbsp;
      <button class="btn btn-primary" (click)="addTime(1, 'd')" [disabled]="!date">Add +1d</button>&nbsp;
      <button class="btn btn-primary" (click)="addTime(1, 'w')" [disabled]="!date">Add +1w</button>&nbsp;
      <button class="btn btn-primary" (click)="clearTime()" [disabled]="!date">Clear the time</button>
    </div>
  </div>
  <div class="row">
    <div class="col">
      <strong>Input date: </strong> {{date ? (date.format('LTS')) : 'N/A'}}
      <br/>
    </div>
  </div>
</div>

package.json

"dependencies": {
    "@angular/animations": "^6.0.3",
    "@angular/common": "^6.0.3",
    "@angular/compiler": "^6.0.3",
    "@angular/core": "^6.0.3",
    "@angular/forms": "^6.0.3",
    "@angular/http": "^6.0.3",
    "@angular/platform-browser": "^6.0.3",
    "@angular/platform-browser-dynamic": "^6.0.3",
    "@angular/router": "^6.0.3",
    "bootstrap": "^4.1.2",
    "core-js": "^2.5.4",
    "font-awesome": "^4.7.0",
    "jquery": "^3.3.1",
    "moment": "^2.22.2",
    "moment-timezone": "^0.5.21",
    "ngx-tempusdominus-bootstrap": "^1.0.0",
    "popper.js": "^1.14.3",
    "rxjs": "^6.0.0",
    "tempusdominus-bootstrap-4": "^5.0.1",
    "tempusdominus-core": "^5.0.0",
    "zone.js": "^0.8.26"
  },
  "devDependencies": {
    "@angular/compiler-cli": "^6.0.3",
    "@angular-devkit/build-angular": "~0.6.8",
    "typescript": "~2.7.2",
    "@angular/cli": "~6.0.8",
    "@angular/language-service": "^6.0.3",
    "@types/jasmine": "~2.8.6",
    "@types/jasminewd2": "~2.0.3",
    "@types/node": "~8.9.4",
    "codelyzer": "~4.2.1",
    "jasmine-core": "~2.99.1",
    "jasmine-spec-reporter": "~4.2.1",
    "karma": "~1.7.1",
    "karma-chrome-launcher": "~2.2.0",
    "karma-coverage-istanbul-reporter": "~2.0.0",
    "karma-jasmine": "~1.1.1",
    "karma-jasmine-html-reporter": "^0.2.2",
    "protractor": "~5.3.0",
    "ts-node": "~5.0.1",
    "tslint": "~5.9.1"
  }

angular.json

            "styles": [
              "src/styles.css",
              "./node_modules/bootstrap/dist/css/bootstrap.min.css",
              "./node_modules/font-awesome/css/font-awesome.css",
              "./node_modules/tempusdominus-bootstrap-4/build/css/tempusdominus-bootstrap-4.css"
            ],
            "scripts": [
              "./node_modules/jquery/dist/jquery.min.js",
              "./node_modules/popper.js/dist/umd/popper.min.js",
              "./node_modules/bootstrap/dist/js/bootstrap.min.js",
              "./node_modules/moment/min/moment.min.js",
              "./node_modules/tempusdominus-bootstrap-4/build/js/tempusdominus-bootstrap-4.js"
            ]

【问题讨论】：

我认为你应该在 datetimepicker 的options 中使用locale: 'ru' 而不是locale: moment.locale('ru')。我担心doc 有点不清楚/误导。
我试着照你说的做，但是没有用。
其实最重要的还是包含moment的locale目录下的语言文件。我认为这两种设置选项的方法都有效，但对我来说，它甚至会自动检测到所需的语言。

标签： angular bootstrap-4 momentjs tempus-dominus-datetimepicker moment-timezone

【解决方案1】：

您需要包含语言环境文件：https://github.com/moment/moment/blob/develop/locale/ru.js 并使用locale: 'ru' 进行注册。

【讨论】：

究竟如何？在哪个 ASP.NET Core 2.2 文件夹中？

【解决方案2】：

我终于添加了https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.22.2/moment-with-locales.min.js 和语言环境

【讨论】：

这需要大量额外的字节供用户下载

【解决方案3】：

使用这个：

在您的组件中仅导出和 'startOptions' 语言环境：moment.locale('es'):

import * as moment from 'moment';

startOptions ={
     locale: moment.locale('es'),
     format: "MM hh:mm",
     date: moment()
}

还有你的 angular.json....

      "scripts": [
        "node_modules/moment/locale/ru.js",
      ]
      .....

美好的一天

【讨论】：