Блог

У меня возникли некоторые проблемы при попытке отключить определенные даты в средстве выбора дат. Мой индивидуальный выбор даты в машинописном тексте в соответствии со следующим:

 import { DateFormatter } from './ng2-bootstrap/date-formatter'; import { DatePickerComponent } from './ng2-bootstrap/datepicker.component'; import * as moment from 'moment-timezone';  @Component({  selector: '[acn-datepicker-popup]',  templateUrl: './datepicker-popup.component.html',  inputs: [],  host: {} }) export class DatepickerPopupComponent implements OnInit {  @Input() datepickerDirective: any;  @Input() minDate: moment.Moment;  @Input() maxYears: number;  @Input() alignRight: boolean = false;  @Input() disabledDates: string;   private dateFormat: string = 'DD/MM/YYYY';  private earliestDate: string = '01/01/1970';    datePickerCmp: DatePickerComponent;  datepickerFormControl: FormControl;  selectedDate: moment.Moment;  dateFormatter: DateFormatter = new DateFormatter();    constructor(private _datePickerCmp: DatePickerComponent, @Inject('datepickerFormControl') private _datepickerFormControl: FormControl) {  this.datePickerCmp = _datePickerCmp;  this.datepickerFormControl = _datepickerFormControl;  if (this.datepickerFormControl.value amp;amp; this.dateFormatter.isValid(this.datepickerFormControl.value, this.dateFormat)) {  this.selectedDate = moment(this.datepickerFormControl.value, this.dateFormat);  }   }   ngOnInit() {  var splits = this.disabledDates.toString().split(";");  for(let i = 0; i lt; splits.length; i  ){  console.log("Dates"   splits[i]);  }  }  

Мой компонент выбора даты в HTML:

 lt;div class="col-sm-6 form-group has-feedback"gt;  lt;label for="testDte"gt;TEST DATElt;span class="text-danger"gt;*lt;/spangt;lt;/labelgt;  lt;div class="input-group" [(datepicker-popup)]="bookingModel.controls.testDte" [disabledDates]="bkDatesListStr"gt;  lt;input type="text" [formControl]="bookingModel.controls.testDte" class="form-control" maxlength="10" style="border-right:transparent"gt;  lt;span class="input-group-btn" align="right"gt;  lt;button class="btn btn-square btn-white-primary form-control" type="button"gt;lt;i class="fa fa-calendar"gt;lt;/igt;lt;/buttongt;  lt;/spangt;  lt;/divgt;  lt;/divgt;  

Мне удалось ввести даты, которые должны быть отключены в ngOnInit(). Переменная splits содержит список дат, которые будут выделены серым цветом в средстве выбора дат. Однако я понятия не имею, как установить даты, которые должны быть отключены в средстве выбора дат. Есть какие-нибудь идеи?

Спасибо!

Я приведу вам простой пример того, как отключить определенные даты.

Для начала нам нужно просто установить тему дизайна материалов в наше приложение angular. итак, давайте добавим, как показано ниже:

 ng add @angular/material   

Файл Ts:

 import { Component } from '@angular/core';   @Component({  selector: 'app-root',  templateUrl: './app.component.html',  styleUrls: ['./app.component.css'] }) export class AppComponent {  title = 'my-app';    myHolidayDates = [  new Date("12/1/2020"),  new Date("12/20/2020"),  new Date("12/17/2020"),  new Date("12/25/2020"),  new Date("12/4/2020"),  new Date("12/7/2020"),  new Date("12/12/2020"),  new Date("12/11/2020"),  new Date("12/26/2020"),  new Date("12/25/2020")  ];    myHolidayFilter = (d: Date): boolean =gt; {  const time=d.getTime();  return !this.myHolidayDates.find(x=gt;x.getTime()==time);  } }  

Теперь в файле просмотра мы напишем код входного элемента с датировщиком, как показано ниже:

 lt;h1gt;Angular Material Disable specific dateslt;/h1gt;   lt;mat-form-fieldgt;  lt;input matInput [matDatepicker]="picker" [matDatepickerFilter]="myHolidayFilter" placeholder="Choose a date"gt;  lt;mat-datepicker-toggle matSuffix [for]="picker"gt;lt;/mat-datepicker-togglegt;  lt;mat-datepicker #picker gt;lt;/mat-datepickergt; lt;/mat-form-fieldgt;  

Попробуйте этот метод.