Можно ли изменить формат времени angular2-datepicker bigbanner? - PullRequest
Новая
       30

Можно ли изменить формат времени angular2-datepicker bigbanner?

0 голосов
/ 02 октября 2018

Мы используем angular2-datepicker (https://www.npmjs.com/package/angular2-datetimepicker) в нашем проекте. Нам нужно использовать 24-часовой формат времени. Но похоже, что он не работает во всем компоненте.

На скриншоте нижеВы можете видеть, что я могу изменить формат в поле, отмеченном 1., но не формат полей, отмеченных 2. или 3.

Вы можете увидеть настройки, которые я использую здесь: https://angular -xsv9yq.stackblitz.io

Это ошибка в компоненте или я пропустил настройку?

enter image description here

1 Ответ

0 голосов
/ 02 октября 2018

Поскольку вы открыты для использования альтернативы angular2-datepicker, вы можете использовать OwlDateTimePicker .

Из их файла Readme:

1) Установить с помощью npm: 

npm install ng-pick-datetime --save

2) Добавить стили.Если вы используете Angular CLI, вы можете добавить это в файл styles.css: 

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

Если вы не используете Angular CLI, вы можете включить picker.min.css через элемент в своем индексе.html.

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>

Проверьте больше примеров здесь .

...