角度8-如何在土星中设置日期格式-日期选择器 [英] Angular 8 - How to format date in saturn-datepicker

问题描述

我希望将日期格式显示为yyyy-mm-dd。我安装了土星-日期拾取器程序包，但我不知道如何更改格式。您能帮我演示一下更改日期格式的方法吗？

推荐答案

解决方案1：使用@angular/material-moment-adapter

第1步：安装@angular/material-moment-adapter。

npm install @angular/material-moment-adapter

第二步：

1. 从saturn-datepicker导入常量。
2. 定义您的日期格式。

app.mode.ts

import {
  MAT_DATE_FORMATS,
  DateAdapter,
  MAT_DATE_LOCALE
} from 'saturn-datepicker';
import { MomentDateAdapter } from '@angular/material-moment-adapter';

export const MY_FORMATS = {
  parse: {
    dateInput: 'YYYY-MM-DD'
  },
  display: {
    dateInput: 'YYYY-MM-DD',
    monthYearLabel: 'MMM YYYY',
    dateA11yLabel: 'LL',
    monthYearA11yLabel: 'MMMM YYYY'
  }
};

@NgModule({
  ...
  providers: [
    {
      provide: DateAdapter,
      useClass: MomentDateAdapter,
      deps: [MAT_DATE_LOCALE]
    },
    { provide: MAT_DATE_FORMATS, useValue: MY_FORMATS }
  ]
})
export class AppModule {}

Sample Solution 1 on StackBlitz

---

解决方案2：使用您自己的DateAdapter

第一步：创建自定义AppDateAdapter。

日期.Adapter.ts

import { NativeDateAdapter } from "@angular/material/core";


export class AppDateAdapter extends NativeDateAdapter {

    format(date: Date, displayFormat: Object): string {
        var d = new Date(date),
        month = '' + (d.getMonth() + 1),
        day = '' + d.getDate(),
        year = d.getFullYear();

        if (month.length < 2) 
            month = '0' + month;
        if (day.length < 2) 
            day = '0' + day;

        return [year, month, day].join('-');
    }
}

第二步：

1. 导入AppDateAdapter到providers节。
2. 定义您的日期格式。

app.mode.ts

import { MAT_DATE_FORMATS, DateAdapter } from 'saturn-datepicker';
import { AppDateAdapter } from './date.adapter';

export const MY_FORMATS = {
  parse: {
    dateInput: 'YYYY-MM-DD'
  },
  display: {
    dateInput: 'YYYY-MM-DD',
    monthYearLabel: 'MMM YYYY',
    dateA11yLabel: 'LL',
    monthYearA11yLabel: 'MMMM YYYY'
  }
};

@NgModule({
  ...
  providers: [
     { provide: DateAdapter, useClass: AppDateAdapter },
     { provide: MAT_DATE_FORMATS, useValue: MY_FORMATS }
  ]
})
export class AppModule {}

Sample solution 2 on StackBlitz

---

参考

How to change date format or locale?

这篇关于角度8-如何在土星中设置日期格式-日期选择器的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！