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

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

4

3 に答える 3