Question

在 TempusDominusBootstrap 4 选项中，通过首先连接以下依赖项（locale: moment.locale ('ru'); import * asmoment from 'moment'; {{1 }}）我没有得到预期的结果-界面语言是英语，并且时间以GMT（import 'moment / locale / en'）格式显示，但是我需要考虑时区（import 'moment-timezone';）。该如何补救？

Thursday, July 19, 2018, 19:13:57

html

четверг, 19 июля 2018 г., 22:13:57 GMT+03:00 DST

package.json

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'));
  }

angular.json

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

Answer 1

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

Answer 2

我加入了https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.22.2/moment-with-locales.min.js并最终完成了语言环境工作

Answer 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",
      ]
      .....

美好的一天

Tempus Dominus Bootstrap 4更改语言/语言环境

3 个答案: