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>
<button class="btn btn-primary" (click)="addTime(1, 'h')" [disabled]="!date">Add +1h</button>
<button class="btn btn-primary" (click)="addTime(1, 'd')" [disabled]="!date">Add +1d</button>
<button class="btn btn-primary" (click)="addTime(1, 'w')" [disabled]="!date">Add +1w</button>
<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"
]