@aurelia-toolkit/mdc-datepicker NPM

Aurelia MDC Datepicker

Installation

npm @aurelia-toolkit/mdc-datepicker date-fns inputmask @aurelia-toolkit/mdc-inputmask --save

If only the dialog is used inputmask and @aurelia-toolkit/mdc-inputmask may be ommited. You will get peer dependency warnings which can be ignored.

Configuration

// main.ts
export function configure(aurelia: Aurelia) {
    aurelia.use.plugin(PLATFORM.moduleName('@aurelia-toolkit/mdc-datepicker'), (c: MdcDatepickerDialogConfiguration) => {
      // the dialog is localised via default options
      c.defaultOptions.i18n.dateFnsLocale = enAU;
      c.defaultOptions.firstDay = 1;
    });
    // the rest of your configuration...
}

// main.scss
@use "@aurelia-toolkit/mdc-datepicker";

Usage

<mdc-datepicker value.bind="date" format="dd/MM/yyyy" inputmask-format="dd/mm/yyyy"></mdc-datepicker>
<!-- format attribute accepts date-fns format tokens  -->
<!-- inputmask-format attribute accepts inputmask format tokens  -->

mdc-datepicker custom element uses inputmask to limit user's input. You can use the datepicker dialog separately via the MDC dialog service

const dialogService: MdcDialogService;
const data: Partial<IMdcDatepickerDialogData> = {
  date: this.getDateValue(),
  options: {
    label: 'Select Date'
  }
};
const result = await dialogService.open({ viewModel: MdcDatepickerDialog, model: data });
if (result === 'ok') {
  console.log(data.date);
}