ng-pick-date picker：如何设置日期格式？

Question

我想使用选择日期选择器。我想设置日期格式，但不知道该怎么做。那么谁能给我一个例子，说明如何设置日期格式？

这是我的日期选择器的代码：

<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 },
],

Answer 1

您需要创建另一个输入，以显示格式化的日期值。在您的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的演示

Answer 2

您必须通过提供者将自定义对象传递给服务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},
],

检查演示