@angular/material-moment-adapter

What is @angular/material-moment-adapter?

@angular/material-moment-adapter is an Angular package that provides a Moment.js adapter for Angular Material's datepicker. It allows you to use Moment.js to parse, format, and manipulate dates within Angular Material components.

What are @angular/material-moment-adapter's main functionalities?

Date Adapter Configuration

This code demonstrates how to configure the Moment.js date adapter in an Angular module. It imports the necessary modules and sets the adapter options to use UTC.

import { NgModule } from '@angular/core';
import { MatDatepickerModule } from '@angular/material/datepicker';
import { MatMomentDateModule, MAT_MOMENT_DATE_ADAPTER_OPTIONS } from '@angular/material-moment-adapter';

@NgModule({
  imports: [
    MatDatepickerModule,
    MatMomentDateModule
  ],
  providers: [
    { provide: MAT_MOMENT_DATE_ADAPTER_OPTIONS, useValue: { useUtc: true } }
  ]
})
export class AppModule { }

Using Moment.js with Angular Material Datepicker

This code shows how to use Moment.js with Angular Material's datepicker component. It initializes a date using Moment.js and binds it to the datepicker input.

import { Component } from '@angular/core';
import * as moment from 'moment';

@Component({
  selector: 'app-datepicker',
  template: '<mat-form-field><input matInput [matDatepicker]="picker" placeholder="Choose a date"><mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle><mat-datepicker #picker></mat-datepicker></mat-form-field>'
})
export class DatepickerComponent {
  selectedDate = moment();
}

Other packages similar to @angular/material-moment-adapter

@angular/material-luxon-adapter

@angular/material-luxon-adapter provides a Luxon adapter for Angular Material's datepicker. Luxon is a modern JavaScript date library that offers a more comprehensive and immutable API compared to Moment.js. It is a good alternative if you prefer using Luxon over Moment.js.

@angular/material-date-fns-adapter

@angular/material-date-fns-adapter provides a date-fns adapter for Angular Material's datepicker. date-fns is a lightweight and modular date library that allows you to import only the functions you need. It is a good alternative if you are looking for a smaller bundle size and tree-shakable date library.

README

Angular Material

The sources for this package are in the main Angular Material repo. Please file issues and pull requests against that repo.

License: MIT

Changelog

15.0.1 "gypsum-garland" (2022-11-30)

cdk

| Commit | Type | Description | | -- | -- | -- | | e1686a87f | fix | a11y: live announcer not working with aria-modal element (#25978) | | 52e8f448a | fix | menu: not closing when inside shadow DOM (#26112) | | 84bb6608f | fix | menu: prevent default selection key actions (#26051) | | a3c4c00e9 | fix | menu: remove unused var (#26140) |

material

| Commit | Type | Description | | -- | -- | -- | | 0cd409e5b | fix | chips: initial value from forms not reflected in the view (#26052) | | a64ded01e | fix | chips: make focus overlay not affect text color (#25892) | | a779d210a | fix | core: icons not aligned inside mat-option (#26054) | | c0311aa37 | fix | core: reintroduce opacity in elevation mixin (#26015) | | 4300f3929 | fix | core: ripples not being removed if container is hidden (#26096) | | 261820ea2 | fix | datepicker: date range inputs not aligning in some cases (#25967) | | dc4e451a2 | fix | datepicker: resolve typing issue when extending datepicker input in legacy app (#25988) | | e0917085d | fix | form-field: allow clicking on floating label (#26110) | | 00618a99c | fix | form-field: change selector to allow density class on form field (#26075) | | 16ae0be2b | fix | form-field: don't block click on prefix/suffix when disabled (#25987) | | febf5dc06 | fix | form-field: not visually disabled if form control is disabled without emitting an event (#26088) | | e922f03be | fix | list: allow mat-list-item outside list (#26092) | | 78bd450f1 | fix | list: hover indication blocking interactions (#26016) | | 6e40e97be | fix | list: pointer events disabled around content (#26012) | | a9fea8f14 | fix | schematics: add undefined check (#26081) | | ffb5d077c | fix | schematics: ensure mdc migration compatibility with nx (#26027) | | a804a949d | fix | schematics: improve mdc-migration error logging (#26060) | | f61a21382 | fix | select: changed after checked error if option label changes (#23315) | | 1566ab10d | fix | slide-toggle: focus indication not showing inside OnPush parent (#26111) | | c9a5474f4 | fix | slider: fix slider resize w/ transforms (#26044) | | 8aa4a49d7 | fix | slider: form control w/ initial disabled state (#25972) | | dcde7684f | fix | slider: update VI when toggling discrete (#25985) | | c70875d38 | fix | toolbar: inherit toolbar color in flat buttons (#26089) | | 7755aa547 | perf | chips: reduce amount of macro tasks (#26113) |

multiple

| Commit | Type | Description | | -- | -- | -- | | 8b53abda9 | fix | remove touch tap highlights (#26073) |

Special Thanks

Andy Chrzaszcz, Bobby Galli, Joey Perrott, Kristiyan Kostadinov, Miles Malerba, Paul Gschwendtner, Totati, Wagner Maciel and Zach Arend

<!-- CHANGELOG SPLIT MARKER -->

<a name="15.0.0"></a>