是否可以更改angular2-datepicker bigbanner时间格式？

Question

我们在项目中使用angular2-datepicker（https://www.npmjs.com/package/angular2-datetimepicker）。我们需要使用24小时时间格式。 但是，它似乎无法在整个组件中正常工作。

在下面的屏幕截图中，您可以看到我可以更改标记为1的字段的格式，但不能更改标记为2或3的字段的格式。

您可以在此处使用即时通讯设置：https://angular-xsv9yq.stackblitz.io

这是组件中的错误还是我缺少设置？

Answer 1

由于您愿意使用angular2-datepicker的替代方法，因此可以使用OwlDateTimePicker。

摘自自述文件：

1）使用npm安装：

npm install ng-pick-datetime --save

2）添加样式。如果您使用的是Angular CLI，则可以将其添加到styles.css：

@import "~ng-pick-datetime/assets/style/picker.min.css";

如果您不使用Angular CLI，则可以通过index.html中的元素包含picker.min.css。

3）像下面的示例一样，将OwlDateTimeModule和OwlNativeDateTimeModule添加到您的@NgModule中

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { MyTestApp } from './my-test-app';

import { OwlDateTimeModule, OwlNativeDateTimeModule } from 'ng-pick-datetime';

@NgModule({
    imports: [ 
        BrowserModule, 
        OwlDateTimeModule, 
        OwlNativeDateTimeModule,
    ],
    declarations: [ MyTestApp ],
    bootstrap:    [ MyTestApp ]
})
export class MyTestAppModule {}

4）将选择器连接到输入和触发器。

<input [owlDateTime]="dt1" [owlDateTimeTrigger]="dt1" placeholder="Date Time">
<owl-date-time #dt1></owl-date-time>

或

<input [owlDateTime]="dt2" placeholder="Date Time">
<span [owlDateTimeTrigger]="dt2"><i class="fa fa-calendar"></i></span>
<owl-date-time #dt2></owl-date-time>

签出more examples here。