AngularmatDatepicker禁用日期转型
创始人
2024-10-28 07:01:37
0

要禁用matDatepicker中的日期转型,可以使用DateAdapter中的format方法。可以扩展NativeDateAdapter并覆盖format()。以下是一个示例:

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

export class MyDateAdapter extends NativeDateAdapter {
  format(date: Date, displayFormat: Object): string {
    if (displayFormat === 'input') {
      const day = date.getDate();
      const month = date.getMonth() + 1;
      const year = date.getFullYear();
      return `${year}-${month}-${day}`;
    }
    return date.toDateString();
  }
}

export const MY_DATE_FORMATS: MatDateFormats = {
  parse: {
    //不需要设置解析格式;
    dateInput: null,
  },
  display: {
    dateInput: 'input',
    monthYearLabel: 'MM/YYYY',
    dateA11yLabel: 'LL',
    monthYearA11yLabel: 'MMMM YYYY',
  },
};

//添加到模块之后,可以使用它对matDatepicker的所有日期选项卡进行禁用。MatDatePicker中有一个“dateClass“选项,它可以使用matDatepicker的日历组件中的自定义函数来禁用特定日期。

@Component({
  selector: 'app-my-component',
  templateUrl: './my-component.component.html',
  styleUrls: ['./my-component.component.css'],
  providers: [
    { provide: DateAdapter, useClass: MyDateAdapter },
    { provide: MAT_DATE_FORMATS, useValue: MY_DATE_FORMATS },
  ],
})
export class MyComponent {}

//在模板上设置日期className样式来禁用它
template:
  
    
    
    
  

ts:
  dateClass() {
    return (date: Date): MatCalendarCellCssClasses => {
      const day = date.getDate();
      // Disable 1st of

相关内容

热门资讯

透视智能ai!wpk透视外挂,... 透视智能ai!wpk透视外挂,(WPK)原来真的有挂,黑科技神器(有挂解密)-哔哩哔哩;1、wpk透...
透视工具!wpk ai机器人,... 透视工具!wpk ai机器人,(Wpk)真是真的有挂,黑科技小程序(有挂秘籍)-哔哩哔哩1、起透看视...
黑科技透视!(WePoKe)固... 黑科技透视!(WePoKe)固有真的是有挂,(wepoke)原来存在有挂,黑科技教学(有挂教程)-哔...
4分钟黑科技!德扑ai智能系统... 4分钟黑科技!德扑ai智能系统,(德扑)本然有挂,细节揭秘(有挂解密)-哔哩哔哩;运德扑ai智能系统...
透视教程!wpk透明挂,(Wp... 透视教程!wpk透明挂,(Wpk)原生真的有挂,黑科技新版(有挂工具)-哔哩哔哩;1、透视教程!wp...
透视ai(aapokER)透视... 透视ai(aapokER)透视辅助软件(透视)真是存在有挂(今日头条)-哔哩哔哩是一种具有地方特色的...
黑科技ai!(WePoKe)原... 黑科技ai!(WePoKe)原本存在有挂,(wepOke)原来真的有挂,黑科技最新款(有挂细节)-哔...
黑科技有挂!(WePoKe)最... 黑科技有挂!(WePoKe)最初是有挂,(wepokE)原来真的是有挂,黑科技稳赢(确实有挂)-哔哩...
1分钟辅助挂!微扑克ai辅助网... 1分钟辅助挂!微扑克ai辅助网页版,(微扑克)固有真的有挂,存在有挂(存在有挂)-哔哩哔哩1、这是跨...
3分钟黑科技!德扑ai软件,(... 3分钟黑科技!德扑ai软件,(德扑)竟然真的是有挂,大神讲解(有挂规律)-哔哩哔哩1、点击下载安装,...