Question

如何在Angular材质日期范围选择器中将日期格式更改为自定义格式？

例如另一种日期格式：DD / MM / YYYY

基本日期范围选择器：

<mat-form-field appearance="fill">
  <mat-label>Enter a date range</mat-label>
  <mat-date-range-input [rangePicker]="picker">
    <input matStartDate placeholder="Start date">
    <input matEndDate placeholder="End date">
  </mat-date-range-input>
  <mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>
  <mat-date-range-picker #picker></mat-date-range-picker>
</mat-form-field>

基本日期范围选择器为Stackblitz。

Answer 1

根据此处找到的官方文件进行了一些小调整：找到Here

将以下内容添加到您的app.module.ts /主模块文件导入部分（查看显示格式Here）：

    import { MatNativeDateModule, DateAdapter, MAT_DATE_LOCALE, MAT_DATE_FORMATS } from '@angular/material/core';
    import { MomentDateModule, MomentDateAdapter, MAT_MOMENT_DATE_ADAPTER_OPTIONS } from '@angular/material-moment-adapter';
        export const MY_FORMATS = {
          parse: {
            dateInput: 'LL',
          },
          display: {
            dateInput: 'LL',
            monthYearLabel: 'MMM YYYY',
            dateA11yLabel: 'LL',
            monthYearA11yLabel: 'MMMM YYYY',
          },
        };
    
        @NgModule({
          imports: [
        
          MatDatepickerModule,
          MatNativeDateModule,
          MomentDateModule,
        ],
        ....

将以下内容添加到app.module.ts /主模块中的“提供程序”部分

providers: [
    {
      provide: DateAdapter,
      useClass: MomentDateAdapter,
      deps: [MAT_DATE_LOCALE, MAT_MOMENT_DATE_ADAPTER_OPTIONS]
    },

    {provide: MAT_DATE_FORMATS, useValue: MY_FORMATS},
  ],

请确保安装moment.js：

npm install moment --save

在您的组件中导入以下内容：

import * as moment from 'moment';

在您的组件（反应性表单）中，将您的输入字段绑定起来，记下此刻（您的开始日期）：

this.theForm = this.formBuilder.group({
      startDate: [moment(this.service.filter.startDate), [Validators.required]],
      endDate: [moment(this.service.filter.endDate), [Validators.required]]
      })
    });

将此添加到您的模板

    <mat-form-field>
           <mat-label>Date Range</mat-label>
           <mat-date-range-input [rangePicker]="dateRangePicker" >
                <input matStartDate formControlName="startDate" placeholder="Start date">
                <input matEndDate formControlName="endDate" placeholder="End date">
           </mat-date-range-input>
           <mat-datepicker-toggle matSuffix [for]="dateRangePicker"></mat-datepicker-toggle>
           <mat-date-range-picker #dateRangePicker></mat-date-range-picker>
   </mat-form-field>

Answer 2

这很简单。首先，在组件中导入以下内容。

import { NativeDateAdapter, MatDateFormats } from '@angular/material';
import {DateAdapter, MAT_DATE_FORMATS} from '@angular/material/core';

现在创建一个扩展了NativeDateAdapter的类'AppDateAdapter'。请参阅以下

export class AppDateAdapter extends NativeDateAdapter {
      format(date: Date, displayFormat: Object): string {
if (displayFormat === 'input') {
  let day: string = date.getDate().toString();
  day = +day < 10 ? '0' + day : day;
  let month: string = (date.getMonth() + 1).toString();
  month = +month < 10 ? '0' + month : month;
  let year = date.getFullYear();
  return `${day}-${month}-${year}`;
}
return date.toDateString();
}}

创建常量APP_DATE_FORMATS

    export const APP_DATE_FORMATS: MatDateFormats = {
   parse: {
    dateInput: { month: 'short', year: 'numeric', day: 'numeric' },
  },
  display: {
    dateInput: 'input',
    monthYearLabel: { year: 'numeric', month: 'numeric' },
    dateA11yLabel: { year: 'numeric', month: 'long', day: 'numeric'
    },
    monthYearA11yLabel: { year: 'numeric', month: 'long' },
  }
};

在组件中添加提供程序

@Component({
  selector: "app-home",
  templateUrl: "./home.component.html",
  styleUrls: ["./home.component.css"],
  providers: [
    {provide: DateAdapter, useClass: AppDateAdapter},
    {provide: MAT_DATE_FORMATS, useValue: APP_DATE_FORMATS}
  ]
})

现在，无论何时从datepicker更改日期，它都会以“ dd-mm-yyyy”格式显示，因为我们已在 AppDateAdapter 中声明了该格式。您可以更改它。

Answer 3

您可以使用模板文字将其转换为短日期格式“ YYYY-MM-DD” 从角度日期选择器接收值之后。

let due_date = this.form.get('due_Date').value

due_date = ${due_date._i.year}-${due_date._i.month + 1}-${due_date._i.date}

因为您想要“ DD / MM / YYYY”，然后使用

due_date = ${due_date._i.date}/${due_date._i.month + 1}/${due_date._i.year}

忽略最后一个`勾号，因为我不知道如何在此编辑器中删除

如何更改Angular材质日期范围选择器的日期格式？

3 个答案: