@aurelia-toolkit/mdc-datepicker
    TypeScript icon, indicating that this package has built-in type declarations

    2.0.13 • Public • Published

    Aurelia MDC Datepicker

    npm version

    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);
    }

    Contribution

    If you feel that something is missing please submit an issue or better yet a PR.

    Install

    npm i @aurelia-toolkit/mdc-datepicker

    Homepage

    aurelia.io

    DownloadsWeekly Downloads

    46

    Version

    2.0.13

    License

    MIT

    Unpacked Size

    212 kB

    Total Files

    67

    Last publish

    Collaborators

    • avatar