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

相关内容

热门资讯

黑科技讲解!智星德州菠萝怎么开... 1、黑科技讲解!智星德州菠萝怎么开挂,德州辅助软件线上,起初真的是有挂(2025已更新)-哔哩哔哩。...
黑科技真的!红龙扑克辅助器,p... 黑科技真的!红龙扑克辅助器,pokerworld软件,本来是有挂(2025已更新)-哔哩哔哩;wpk...
黑科技代打!红龙扑克辅助工具,... 黑科技代打!红龙扑克辅助工具,德扑ai代打会检测到吗,原生存在有挂(2021已更新)-哔哩哔哩;(需...
黑科技计算!智星菠萝德州辅助工... 1、黑科技计算!智星菠萝德州辅助工具,德州ai人工智能,总是存在有挂(2021已更新)-哔哩哔哩。2...
黑科技讲解!红龙扑克ai辅助,... 黑科技讲解!红龙扑克ai辅助,轰趴大菠萝十三水有外挂,都是是有挂(2023已更新)-哔哩哔哩;小薇(...
黑科技数据!红龙扑克辅助,聚星... 黑科技数据!红龙扑克辅助,聚星扑克有没有挂,原先是有挂(2021已更新)-哔哩哔哩;玩家必备必赢加哟...
黑科技ai!红龙扑克辅助器能用... 黑科技ai!红龙扑克辅助器能用吗,pokermaster是不是有外挂,从来存在有挂(2026已更新)...
黑科技苹果版!智星德州菠萝偷偷... 黑科技苹果版!智星德州菠萝偷偷看牌功能,epoker外挂,从来是真的有挂(2025已更新)-哔哩哔哩...
辅助黑科技!红龙扑克怎么看底牌... 1、辅助黑科技!红龙扑克怎么看底牌,德扑之星安卓模拟器,竟然是真的有挂(2021已更新)-哔哩哔哩。...
黑科技讲解!红龙扑克透牌辅助器... 黑科技讲解!红龙扑克透牌辅助器,轰趴大菠萝十三水有外挂吗,都是真的是有挂(2025已更新)-哔哩哔哩...