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

您必须通过提供程序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},
],

检查demo

Answer 2

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

我想你忘了导入OwlMomentDateTimeModule。

@NgModule({
    imports: [
        OwlDateTimeModule,
        OwlNativeDateTimeModule,
        OwlMomentDateTimeModule
    ],
    providers: [
        {
            provide: OWL_DATE_TIME_FORMATS, useValue: OWL_MOMENT_FORMATS
        }
    ]
})