date-picker enabling only specific dates selectable

[gaddoz]

is it possible to restrict dates selectable from date-picker to a custom array of predefined dates?

[gaddoz]

@Jinnie

[bbogdanov]

@gaddoz If you are using [ngModel] you can use [(ngModelChange]) for validate the change and update the value.

For [formControl] you can just subscribe to the valueChanges.

In both ways the end will be to just check if the new value exist in an array and if does not, then just keep the previous value on the control.

[gaddoz]

Thanks for your reply. It look great but is it possible to display and mark the available dates?

[bbogdanov]

We do not provide such a way at this stage.

It is possible to play around with DOM and find all clr-day components that are not holding the date you are looking for and append to the button inside each componentt a is-excluded class.

[gaddoz]

@bbogdanov thank you very much for your reply. I would like to follow your suggestion playing with DOM but I'm missing how to detect the date picker toggle event, do you have any idea?

[bbogdanov]

Unfortunately, we didn't expose the observable that you could use to subscribe. On the other hand you can select with @ViewChild the calendar button and add an addEventListener.

Something similar to this should work

`@ViewChild(`button.clr-smart-open-close`, { read: ElementRef }) datePickerCloseButton: HTMLButtonElement`

ngAfterViewInit() {
  if (this.datePickerCloseButton) {
    this.datePickerCloseButton.addEventLisnter('click', () => {
        // your logic
    })
  }
}