I encountered an issue while attempting to disable specific dates in a date picker. Here is my custom date picker written in TypeScript:
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]);
}
}
Here is the HTML for my date picker component:
<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>
I have successfully retrieved the dates to be disabled in the ngOnInit() method. The splits variable now contains the list of dates that should be greyed out in the date picker. However, I am unsure of how to actually disable these dates in the date picker. Any suggestions would be greatly appreciated!
Thank you!