@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

16.0.0 "canvas-cup" (2023-05-03)

cdk

| Commit | Type | Description | | -- | -- | -- | | 0d56af5089 | fix | layout: resolve CSP errors | | fc6ae988a3 | fix | schematics: skip module-related operations for standalone apps | | 26d76c67b1 | fix | schematics: update drag-drop schematic to support standalone |

material

| Commit | Type | Description | | -- | -- | -- | | 2604f15424 | feat | button: change icon-button to use MDC's token API (#26824) | | d6d3e3e506 | feat | button: make button ripples lazy (#26568) | | 506bca5712 | feat | tabs: add stretchTabs to MatTabsConfig (#26644) | | e092663d56 | fix | button: add specificity to icon button density (#26911) | | b049b8d816 | fix | button: fix icon button density (#26877) | | f8598f8658 | fix | button: fix ripple style for all types of buttons (#26970) | | 8a32172678 | fix | card: refactor to depend on @angular/material/core/tokens (#26674) | | 7e9878c96e | fix | card: tokenize the card elevation (#26770) | | 76eeaaf204 | fix | checkbox: refactor to depend on @angular/material/core/tokens (#26744) | | ae9407c2cc | fix | chips: fix chip density styles (#26951) | | 6ad47bf0f7 | fix | core: allow keyboard navigation to disabled options (#26745) | | a9b61352c5 | fix | form-field: Add mdc-label class to <label> (#26851) | | c6644d65db | fix | legacy-progress-spinner: avoid CSP errors | | aeed6bb10c | fix | progress-bar: account for new height token (#27008) | | f8a70bf060 | fix | schematics: reference correct entrypoint in schematic definition (#26930) | | f8fad4f079 | fix | schematics: support standalone projects in address from schematic | | 313348e13f | fix | schematics: support standalone projects in dashboard schematic | | 186c8747ef | fix | schematics: support standalone projects in navigation schematic | | 7a9112d554 | fix | schematics: support standalone projects in table schematic | | 360e19be4f | fix | schematics: support standalone projects in tree schematic | | 22410a9967 | fix | schematics: use provider functions in ng add (#26920) | | ead5efc4c5 | fix | tabs: remove background color from tabs (#26905) |

google-maps

| Commit | Type | Description | | -- | -- | -- | | e4901dfa72 | fix | update to latest typings (#26854) |

cdk-experimental

| Commit | Type | Description | | -- | -- | -- | | d4d2ea5a45 | fix | column-resize: avoid CSP errors | | 412c691c5e | fix | table-scroll-container: avoid CSP errors |

<!-- CHANGELOG SPLIT MARKER -->

<a name="15.2.9"></a>