3

在TempusDominusBootstrap 4选项中，我locale: moment.locale ('ru')通过首先连接以下依赖项 ( import * asmoment from 'moment'; import 'moment / locale / en'; import 'moment-timezone';) 使用 ( ) 设置语言环境 我没有得到预期的结果 - 界面语言是英语，我得到的时间格式为 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>

包.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"
  }

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

4

3 回答 3

3

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

于 2018-08-09T19:14:05.890 回答
1

我最终包含了 https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.22.2/moment-with-locales.min.js和语言环境工作

于 2019-02-28T13:17:25.883 回答
0

用这个：

在您的组件中仅导出和“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",
      ]
      .....

再会

于 2019-04-26T01:42:36.453 回答