ng-pick-date picker: Как установить формат даты? - PullRequest
Новая
       27

ng-pick-date picker: Как установить формат даты?

0 голосов
/ 13 июня 2018

Я хочу использовать инструмент выбора даты.Я хочу установить формат даты, но не могу понять, как это сделать.Так может ли кто-нибудь дать мне пример, как установить формат даты?

Вот код моего выбора даты: 

<label class="control-label my-label">From Date</label>
<div class="input-group">
  <input tabindex="1" class="form-control" [owlDateTime]="fromDateOfConfirmation" [(ngModel)]="fromDate" name="fromDate" [owlDateTimeTrigger]="fromDateOfConfirmation"
   >
  <span class="input-group-addon trigger" [owlDateTimeTrigger]="fromDateOfConfirmation">
    <span class="fa fa-calendar nopad2 fa-lg"></span>
  </span>
  <owl-date-time [pickerType]="'calendar'" #fromDateOfConfirmation></owl-date-time>
</div>

РЕДАКТИРОВАТЬ

Я уже пробовал это. 

export const MY_NATIVE_FORMATS = {
  parseInput: 'LL LT',
  fullPickerInput: 'LL LT',
  datePickerInput: 'LL',
  timePickerInput: 'LT',
  monthYearLabel: 'MMM YYYY',
  dateA11yLabel: 'LL',
  monthYearA11yLabel: 'MMMM YYYY',
};
providers: [
{ provide: OWL_DATE_TIME_FORMATS, useValue: MY_NATIVE_FORMATS },
],

Ответы [ 3 ]

0 голосов
/ 19 февраля 2019

Вам необходимо создать еще один вход, который будет отображать форматированное значение даты.В вашем html создайте один вход для [ngModel] и еще один для отображения форматированного значения даты. 

<div class="date-container">

 <!-- Invisible input keep ngModel value -->
  <input
          class="shadow-input"
          name="date_time"
          [(ngModel)]="currentDate"
          [owlDateTime]="dt1"

  >
  <!-- Trigger owl-datepicker, display formatted date value -->
  <input
          type="text"
          [owlDateTimeTrigger]="dt1"
          placeholder="Date Time"
          [value]="currentDate | dateFilter:dateFormat"
  >

  <owl-date-time #dt1></owl-date-time>
</div>

См. Демонстрацию по stackblitz

0 голосов
/ 07 мая 2019

Я думаю, вы забыли импортировать OwlMomentDateTimeModule . 

@NgModule({
    imports: [
        OwlDateTimeModule,
        OwlNativeDateTimeModule,
        OwlMomentDateTimeModule
    ],
    providers: [
        {
            provide: OWL_DATE_TIME_FORMATS, useValue: OWL_MOMENT_FORMATS
        }
    ]
})
0 голосов
/ 13 июня 2018

Вы должны передать пользовательский объект в службу через провайдера useValue

export const MY_CUSTOM_FORMATS = {
    parseInput: 'LL LT',
    fullPickerInput: 'LL LT',
    datePickerInput: 'LL',
    timePickerInput: 'LT',
    monthYearLabel: 'MMM YYYY',
    dateA11yLabel: 'LL',
    monthYearA11yLabel: 'MMMM YYYY',
};

selector: 'app-custom-format-example',
templateUrl: './custom-format.component.html',
providers: [ 
    {provide: OWL_DATE_TIME_FORMATS, useValue: MY_CUSTOM_FORMATS},
],

проверить демо

...