Angular 角度数据选择器格式_Angular

Angular 角度数据选择器格式

angular

Angular 角度数据选择器格式,angular,Angular,我想以MON-YYYY格式在日期选择器中显示日期。当用户单击任何日期时，我只想显示月份和年份，日期对我没有任何用处，但我在数据库Oracle中有字段作为日期时间，因此无法以字符串格式传递日期例如：如果用户选择2018年11月14日，则希望将日期显示为2018年11月，但在数据库中，我希望将日期显示为2018年11月1日，则无论日期选择如何，都需要将日期默认设置为1 Angular material日期选择器没有任何可以直接应用日期格式的方法或属性，但在@Angular/material lib

我想以MON-YYYY格式在日期选择器中显示日期。当用户单击任何日期时，我只想显示月份和年份，日期对我没有任何用处，但我在数据库Oracle中有字段作为日期时间，因此无法以字符串格式传递日期

例如：如果用户选择2018年11月14日，则希望将日期显示为2018年11月，但在数据库中，我希望将日期显示为2018年11月1日，则无论日期选择如何，都需要将日期默认设置为1

Angular material日期选择器没有任何可以直接应用日期格式的方法或属性，但在@Angular/material library的帮助下，您可以自定义格式服务

const months = ['JAN', 'FEB', 'MAR', 'APR', 'MAY', 'JUN', 'JUL', 'AUG', 'SEP', 'OCT', 'NOV', 'DEC'];
export class AppDateAdapter extends NativeDateAdapter {

  format(date: Date, displayFormat: Object): string {
    if (displayFormat === 'input') {
      const day = date.getDate();
      const month = date.getMonth();
      const year = date.getFullYear();
      return `${months[month]} ${year}`;
    }
    return date.toDateString();
  }
}

HTML:

步骤2：使用NativeDateAdapter类方法进行格式化

const months = ['JAN', 'FEB', 'MAR', 'APR', 'MAY', 'JUN', 'JUL', 'AUG', 'SEP', 'OCT', 'NOV', 'DEC'];
export class AppDateAdapter extends NativeDateAdapter {

  format(date: Date, displayFormat: Object): string {
    if (displayFormat === 'input') {
      const day = date.getDate();
      const month = date.getMonth();
      const year = date.getFullYear();
      return `${months[month]} ${year}`;
    }
    return date.toDateString();
  }
}

步骤3：声明的日期格式常量

export const APP_DATE_FORMATS =
{
  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' },
  }
};

步骤4：在组件或主模块下注册提供程序

@Component({
  selector: 'app-test',
  templateUrl: './test.component.html',
  styleUrls: ['./test.component.scss'],
  providers: [
    {
      provide: DateAdapter, useClass: AppDateAdapter
    },
    {
      provide: MAT_DATE_FORMATS, useValue: APP_DATE_FORMATS
    }
  ]
})
export class TestComponent {
  constructor() { }

  onChange(val) {
    var d = new Date(val);
    let date = [d.getFullYear(), ('0' + (d.getMonth() + 1)).slice(-2), ('01').slice(-2)].join('-');
    console.log(date);
      }
}

选择：2018年2月14日

展示时间：2018年2月

输出：2018-02-01 in.ts文件