ng-pick-datetime datepicker格式

Question

我使用的是ng-pick-datetime npm中的angular。当我在选择日期（dd / MM / yyyy）之后尝试修改格式时，却只有（MM / dd / yyyy）。我不知道该怎么办。

有关我的问题的更多截图：

HTML

<input
    [owlDateTime]="dt1"
    [owlDateTimeTrigger]="dt1"
    placeholder="Wedding Anniversary"
    formControlName="wedding"
    class="form-control"
    onkeydown="return false"
    id="text-input"
    name="wedding"
    max="{{ maxDate | date: 'yyyy-MM-dd' }}"
  />
  <owl-date-time #dt1 [pickerType]="'calendar'"></owl-date-time>

我需要这样的结果（dd / MM / yyyy）。 谢谢！

Answer 1

使用所需的日期格式将对象注入组件。

更多信息：https://daniel-projects.firebaseapp.com/owlng/date-time-picker#implementation-format

import { DateTimeAdapter, OWL_DATE_TIME_FORMATS, OWL_DATE_TIME_LOCALE } from 'ng-pick-datetime';
import { MomentDateTimeAdapter } from 'ng-pick-datetime-moment';

export const MY_CUSTOM_FORMATS = {
  parseInput: 'DD/MM/YYYY',
  fullPickerInput: 'DD/MM/YYYY hh:mm a',
  datePickerInput: 'DD/MM/YYYY',
  timePickerInput: 'hh:mm a',
  monthYearLabel: 'MMM-YYYY',
  dateA11yLabel: 'LL',
  monthYearA11yLabel: 'MMMM-YYYY'
};

@Component({
  selector: 'time-series',
  templateUrl: './time-series.component.html',
  styleUrls: ['./time-series.component.scss'],
  providers: [
    { provide: DateTimeAdapter, useClass: MomentDateTimeAdapter, deps: [OWL_DATE_TIME_LOCALE] },
    { provide: OWL_DATE_TIME_FORMATS, useValue: MY_CUSTOM_FORMATS }
  ]
})
@Injectable()
export class TimeSeriesComponent {
   ....
}

Answer 2

在MomentJS中使用选择器 这是一个使用具有不同日期时间格式的OwlMomentDateTimeModule的示例：（请注意，OwlMomentDateTimeModule需要MomentJS）

  

npm安装：

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 {
}

Answer 3

这对于我刚刚阅读文档非常有效。在模块中添加以下代码

providers: [
    ClientService,
    DatePipe, 
    {provide: OWL_DATE_TIME_LOCALE, useValue: 'in'}
]

Answer 4

更新 app.module

providers:[
{provide: OWL_DATE_TIME_LOCALE, useValue: 'en-GB'}
]