Question

我使用ngx-mydatepicker指令https://github.com/kekeh/ngx-mydatepicker。

我想获得这样的日期格式：2018年1月21日，但是在这个日期选择器中它不受支持。

据我所知，如果从1月到1月更改 monthLabels ，我会得到必要的结果，但是，此操作也会更改内联日历中的月份标签，但它们可能不完全适合。

我试图用管道。并且date.formatted已按照我的意愿更改，但未在浏览器中显示。

date = {
  date: {year: 2018, month: 1, day: 30}
  epoc: 1517259600
  formatted: "30 January, 2018"
  jsdate: Tue Jan 30 2018 00:00:00 GMT+0300
}

在组件中

option = {
monthLabels: <IMyMonthLabels>{
  1: 'Jan',
  2: 'Feb',
  3: 'Mar',
  4: 'Apr',
  5: 'May',
  6: 'Jun',
  7: 'Jul',
  8: 'Aug',
  9: 'Sep',
  10: 'Oct',
  11: 'Nov',
  12: 'Dec'
},
dateFormat: 'dd mmm, yyyy',

HTML 的

<input type="text" name="date"
ngx-mydatepicker 
[ngModel]="date | dateFormat" 
(dateChanged)="date=$event" 
[options]="options"
#dp="ngx-mydatepicker">

管

import { Pipe, PipeTransform } from '@angular/core';

@Pipe({
  name: 'dateFormat'
})

export class DateFormatPipe implements PipeTransform {
  transform(date: any): any {
    if (!date) { return {}; }
    const monthNames = [
      'January', 'February', 'March',
      'April', 'May', 'June', 'July',
      'August', 'September', 'October',
      'November', 'December'
    ];
    date.formatted = date.jsdate.getDate() + ' ' + monthNames[date.jsdate.getMonth()] + ', ' + date.jsdate.getFullYear();
    return date;
  }
}

Answer 1

编写[ngModel]和（dateChanged）或（ngModelChange）代替双向绑定[（ngModel）]是必要的：

<input type="text" name="date" ngx-mydatepicker [ngModel]="date" dateChanged)="onDateChange($event)" [options]="options" #dp="ngx-mydatepicker">

在功能 onDateChange（）中，我们可以根据需要自定义日期格式。例如：

changeFormat(event: IMyDateModel): void{
const monthNames = [
  'January', 'February', 'March',
  'April', 'May', 'June', 'July',
  'August', 'September', 'October',
  'November', 'December'
];
event.formatted = event.jsdate.getDate() + ' ' +     monthNames[event.jsdate.getMonth()] + ', ' + event.jsdate.getFullYear();

}

完成。现在您的格式为 2018年1月22日

如何在ngx-mydatepicker中自定义日期格式？

1 个答案: