Tempus Dominus Bootstrap 4更改语言/区域设置 [英] Tempus Dominus Bootstrap 4 change the language/locale

问题描述

在 TempusDominusBootstrap 4 选项中，通过首先连接以下依赖项(从'moment'导入* asmoment ; 从'moment/locale/en'导入; 从'moment-timezone'导入; )我没有得到预期的结果-界面语言是英语，我以格林尼治标准时间( 2018年7月19日，星期四，19:13:57 )的格式获取时间，但我需要考虑时区(четверг，2018年10月19日，格林尼治标准时间22:13:57 + 03:00 DST ).如何补救?

In the TempusDominusBootstrap 4 options, I set the locale with (locale: moment.locale ('ru')) by first connecting the following dependencies (import * asmoment from 'moment';import 'moment / locale / en';import 'moment-timezone';) I do not get the expected result - the interface language is English, and I get the time in the format GMT (Thursday, July 19, 2018, 19:13:57), but I need taking into account the time zone (четверг, 19 июля 2018 г., 22:13:57 GMT+03:00 DST). How can this be remedied?

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

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

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"
            ]

推荐答案

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

You need to include locale file: https://github.com/moment/moment/blob/develop/locale/ru.js and register it using locale: 'ru'.

这篇关于Tempus Dominus Bootstrap 4更改语言/区域设置的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！