feat(material/datepicker): Custom Datepicker

[DjSeanza]

Feature Description

The goal is to create a custom date picker component by extending the Angular Material Datepicker. This component will inherit all the core functionalities and styling of the Angular Material Datepicker while introducing additional features.

The problem here is that if I want to extend datepicker classes i cant create my own datepicker because there is no way to provide and extend MatDatepickerBase.

@Component({
  selector: 'mat-datepicker',
  template: '',
  exportAs: 'matDatepicker',
  changeDetection: ChangeDetectionStrategy.OnPush,
  encapsulation: ViewEncapsulation.None,
  providers: [
    MAT_SINGLE_DATE_SELECTION_MODEL_PROVIDER,
    { provide: MatDatepickerBase, useExisting: MatDatepicker }, // <- this line right here
  ],
  standalone: true,
})
export class MatDatepicker<D> extends MatDatepickerBase<MatDatepickerControl<D>, D | null, D> {} // <- and this extend right here

Use Case

For example I want to create my own datetime picker, but I don't have time to implement all of the datepicker logic on my own. I can just extend all classes and have the logic already there and just add what i need.

[crisbeto]

Couldn't you get the same functionality by extending MatDatepicker instead?

[DjSeanza]

oh you can. I did not think of that. It worked, but now I have another little problem. I tried something like this

<custom-form-field>
  <custom-label>Choose a date</custom-label>
  <input customInput [customDatepicker]="picker" />
  <custom-datepicker-toggle
    customIconSuffix
    [for]="picker"
  ></custom-datepicker-toggle>
  <custom-datepicker #picker></custom-datepicker>
</custom-form-field>

Everything works except this
[ERROR] NG8002: Can't bind to 'customDatepicker' since it isn't a known property of 'input'
I already imported it to AppComponent imports, but i still get this error.

I tried to extend the MatDatepickerInput

/** @docs-private */
export const CUSTOM_DATEPICKER_VALUE_ACCESSOR: any = {
  provide: NG_VALUE_ACCESSOR,
  useExisting: forwardRef(() => CustomDatepickerInput),
  multi: true,
};

/** @docs-private */
export const CUSTOM_DATEPICKER_VALIDATORS: any = {
  provide: NG_VALIDATORS,
  useExisting: forwardRef(() => CustomDatepickerInput),
  multi: true,
};

@Directive({
  selector: 'input[customDatepicker]',
  providers: [
    CUSTOM_DATEPICKER_VALUE_ACCESSOR,
    CUSTOM_DATEPICKER_VALIDATORS,
    { provide: MAT_INPUT_VALUE_ACCESSOR, useExisting: CustomDatepickerInput },
  ],
  host: {
    class: 'custom-datepicker-input',
  },
  exportAs: 'customDatepickerInput',
  standalone: true,
})
export class CustomDatepickerInput<D> extends MatDatepickerInput<D> {
  constructor(
    elementRef: ElementRef<HTMLInputElement>,
    @Optional() dateAdapter: DateAdapter<D>,
    @Optional() @Inject(MAT_DATE_FORMATS) dateFormats: MatDateFormats,
    @Optional()
    @Inject(MAT_FORM_FIELD)
    _formField?: MatFormField
  ) {
    super(elementRef, dateAdapter, dateFormats, _formField);
  }
}

here is the stackblitz

[crisbeto]

It's because you defined the directive selector as customDatepicker, but the input is still called matDatepicker. Rather than using inheritance, you can set it up with hostDirectives instead: https://stackblitz.com/edit/stackblitz-starters-fxkatz?file=src%2Fapp%2Fapp.component.ts,src%2Fapp%2Fdatepicker%2Fdatepicker-input.ts,src%2Fapp%2Fdatepicker%2Fdatepicker-toggle.ts

[angular-automatic-lock-bot]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}