Estaba teniendo un problema al intentar deshabilitar ciertas fechas en el selector de fechas. Mi selector de fecha personalizado en mecanografiado según lo siguiente:
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 && 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 < splits.length; i++){ console.log("Dates" + splits[i]); } }Mi componente selector de fecha en HTML:
<div class="col-sm-6 form-group has-feedback"> <label for="testDte">TEST DATE<span class="text-danger">*</span></label> <div class="input-group" [(datepicker-popup)]="bookingModel.controls.testDte" [disabledDates]="bkDatesListStr"> <input type="text" [formControl]="bookingModel.controls.testDte" class="form-control" maxlength="10" style="border-right:transparent"> <span class="input-group-btn" align="right"> <button class="btn btn-square btn-white-primary form-control" type="button"><i class="fa fa-calendar"></i></button> </span> </div> </div>Logré pasar las fechas para deshabilitarlas en ngOnInit(). La variable de divisiones contiene la lista de fechas que se atenuarán en el selector de fechas. Sin embargo, no tengo idea de cómo configurar las fechas para que se deshabiliten en el selector de fechas. ¿Algunas ideas?
¡Gracias!
Te daré un ejemplo simple de cómo deshabilitar fechas específicas.
Primero, solo necesitamos instalar el tema de diseño de materiales en nuestra aplicación angular. así que agreguemos como abajo:
ng add @angular/materialArchivo 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 => { const time=d.getTime(); return !this.myHolidayDates.find(x=>x.getTime()==time); } }Ahora, en el archivo de vista, escribiremos el código del elemento de entrada con selector de fecha como se muestra a continuación:
<h1>Angular Material Disable specific dates</h1> <mat-form-field> <input matInput [matDatepicker]="picker" [matDatepickerFilter]="myHolidayFilter" placeholder="Choose a date"> <mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle> <mat-datepicker #picker ></mat-datepicker> </mat-form-field>Prueba este método.