MtxDatepicker Component Overview

Mtx Datepickers allow users to select dates and time periods.

Usage

Installation

Importing the Datepicker Module

Import the MatDatepickerModule and MatInputModule into your application module:

import { MatDatepickerModule } from '@angular/material/datepicker';
import { MatInputModule } from '@angular/material/input';

@NgModule({
  imports: [
    MatDatepickerModule,
    MatInputModule
  ]
})
export class YourAppModule { }

Adding a Datepicker

To add a Datepicker to your application, use the mtx-datepicker component:

<mtx-datepicker [control]="yourFormControl" [config]="yourDatepickerConfig"></mtx-datepicker>

Configuration

The Datepicker component supports various configuration options:

• placeholder: Placeholder text for the input field.
• minDate: Minimum selectable date.
• maxDate: Maximum selectable date.
• startDate: Initial date to display when the Datepicker is opened.
• disableWeekends: Option to disable selection of weekends.
• dateFilter: Custom function to filter selectable dates.
• dateFormats: Array of date format strings.
• isRange: Boolean value to distinguish between normal and range Datepickers.

Example configuration:

import { MtxDatepickerConfig } from './datepicker.config';

yourDatepickerConfig: MtxDatepickerConfig = {
  placeholder: 'Choose a date',
  minDate: new Date(2022, 0, 1),
  maxDate: new Date(2022, 11, 31),
  startDate: new Date(),
  disableWeekends: true,
  dateFormats: ['dd/MM/yyyy', 'MM/dd/yyyy'],
  isRange: false,
};

API Summary

Inputs

• control: FormControl for the Datepicker.
• config: Configuration object of type MtxDatepickerConfig.

Outputs

• dateSelected: EventEmitter for selected date(s).

Examples

Basic Datepicker

<mtx-datepicker [control]="yourFormControl" [config]="yourDatepickerConfig"></mtx-datepicker>

Range Datepicker

<mtx-datepicker [control]="yourFormControl" [config]="yourRangeDatepickerConfig"></mtx-datepicker>

Accessibility

The Datepicker component follows accessibility best practices, ensuring that it can be easily used by all users, including those who rely on assistive technologies.

Theming

The appearance of the Datepicker component can be customized to match your application's design by applying custom themes using Angular Material theming capabilities.

Known Issues

• Datepicker may not render correctly in certain browser versions. Ensure to test thoroughly across different browsers.
• Range Datepicker may have limitations in certain configurations. Ensure to validate behavior in various scenarios.

Additional Resources

For more information and examples, refer to the Angular Material Datepicker documentation.