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

Question

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

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

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

use this:

In your component only export and 'startOptions' locale: moment.locale('es'):

import * as moment from 'moment';

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

And your angular.json....

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

Good Day