ng-pick-date 选择器：如何设置日期格式？

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

查看demo

Answer 3

我想你忘了导入 OwlMomentDateTimeModule。

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

Answer 4

如果你想使用那种类型的格式，你需要使用一个单独的模块，叫做

OwlMomentDateTimeModule

但它需要一个额外的 NPM 包（MoementJS）

第一步，安装 MomentJS

npm install ng-pick-datetime-moment moment --save;

然后你可以使用你的格式

import { NgModule } from '@angular/core';
import { OwlDateTimeModule, OWL_DATE_TIME_FORMATS} from 'ng-pick-datetime';
import { OwlMomentDateTimeModule } from 'ng-pick-datetime-moment';

// See the Moment.js docs for the meaning of these formats:
// https://momentjs.com/docs/#/displaying/format/
export const MY_MOMENT_FORMATS = {
    parseInput: 'l LT',
    fullPickerInput: 'l LT',
    datePickerInput: 'l',
    timePickerInput: 'LT',
    monthYearLabel: 'MMM YYYY',
    dateA11yLabel: 'LL',
    monthYearA11yLabel: 'MMMM YYYY',
};

@NgModule({
    imports: [OwlDateTimeModule, OwlMomentDateTimeModule],
    providers: [
        {provide: OWL_DATE_TIME_FORMATS, useValue: MY_MOMENT_FORMATS},
    ],
})
export class AppExampleModule {
}

作为替代方案您可以使用标准格式化程序

import { NgModule } from '@angular/core';
import { OwlDateTimeModule, OwlNativeDateTimeModule, OWL_DATE_TIME_FORMATS} from 'ng-pick-datetime';

// learn more about this from
// https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/DateTimeFormat
export const MY_NATIVE_FORMATS = {
    fullPickerInput: {year: 'numeric', month: 'numeric', day: 'numeric', hour: 'numeric', minute: 'numeric'},
    datePickerInput: {year: 'numeric', month: 'numeric', day: 'numeric'},
    timePickerInput: {hour: 'numeric', minute: 'numeric'},
    monthYearLabel: {year: 'numeric', month: 'short'},
    dateA11yLabel: {year: 'numeric', month: 'long', day: 'numeric'},
    monthYearA11yLabel: {year: 'numeric', month: 'long'},
};

@NgModule({
    imports: [OwlDateTimeModule, OwlNativeDateTimeModule],
    providers: [
        {provide: OWL_DATE_TIME_FORMATS, useValue: MY_NATIVE_FORMATS},
    ],
})
export class AppExampleModule {
}

阅读更多关于 Ng 日期时间选择器here