Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More
Socket
Sign inDemoInstall
Socket

@mat-datetimepicker/moment

Package Overview
Dependencies
Maintainers
2
Versions
123
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

@mat-datetimepicker/moment

> **The example application is on [GitHub Pages](https://kuhnroyal.github.io/mat-datetimepicker/)!**

  • 13.0.1
  • Source
  • npm
  • Socket score

Version published
Weekly downloads
8.8K
decreased by-16.3%
Maintainers
2
Weekly downloads
 
Created
Source

Material Datetimepicker for @angular/material

The example application is on GitHub Pages!

Build Latest Stable Version License NPM Downloads


The datetimepicker was initially taken from Promact/md2 and modified to use @angular/material. We have also added theming support.

Like the @angular/material datepicker it contains a native-datetime-adapter as well as a moment-datetime-adapter .

Contents

Usage

Installation

Install:

npm install --save @mat-datetimepicker/core

And for the moment adapter:

npm install --save @angular/material-moment-adapter mat-datetimepicker/moment

Setup

Basically the same way the @angular/material datepicker is configured and imported.

imports: [
  ...MatDatepickerModule,
  // use this if you want to use native javascript dates and INTL API if available
  // MatNativeDatetimeModule,
  MatMomentDatetimeModule,
  MatDatetimepickerModule,
];

@see src/app/app.module.ts

Using the component

<form [formGroup]="group">
  <mat-form-field>
    <mat-placeholder>Start DateTime</mat-placeholder>
    <mat-datetimepicker-toggle [for]="datetimePicker" matSuffix></mat-datetimepicker-toggle>
    <mat-datetimepicker #datetimePicker type="datetime" openOnFocus="true" timeInterval="5"> </mat-datetimepicker>
    <input matInput formControlName="start" [matDatetimepicker]="datetimePicker" required autocomplete="false" />
  </mat-form-field>
</form>

Date formatting

In order to change the default input/output formats, a custom instance of MAT_DATETIME_FORMATS needs to be provided in the global configuration.

Input/output formats can be changed separately for the existing datetime picker types date, month , datetimeand time.

Accessibility

You can use the following properties to provide values for ARIA- attributes:

PropertyDescriptionDefault
ariaNextMonthLabelaria-label for the Next button in the month mode"Next month"
ariaPrevMonthLabelaria-label for the Previous button in the month mode"Previous month"
ariaNextYearLabelaria-label for the Next button in the year mode"Next year"
ariaPrevYearLabelaria-label for the Previous button in the year mode"Previous year"

The component supports property bindings or pipes with the aria- values.

Native

Parsing does not work with the native adapter because the Intl.DateTimeFormat API does not provide that feature.

providers: [
  {
    provide: MAT_DATETIME_FORMATS,
    useValue: {
      parse: {},
      display: {
        dateInput: {
          year: 'numeric',
          month: '2-digit',
          day: '2-digit',
        },
        monthInput: {
          month: 'long',
        },
        datetimeInput: {
          year: 'numeric',
          month: '2-digit',
          day: '2-digit',
          hour: '2-digit',
          minute: '2-digit',
        },
        timeInput: {
          hour: '2-digit',
          minute: '2-digit',
        },
        monthYearLabel: {
          year: 'numeric',
          month: 'short',
        },
        dateA11yLabel: {
          year: 'numeric',
          month: 'long',
          day: 'numeric',
        },
        monthYearA11yLabel: {
          year: 'numeric',
          month: 'long',
        },
        popupHeaderDateLabel: {
          weekday: 'short',
          month: 'short',
          day: '2-digit',
        },
      },
    },
  },
];

@see defaults in native-datetime-formats.ts
@see Intl.DateTimeFormat API documentation

Moment

providers: [
  {
    provide: MAT_DATETIME_FORMATS,
    useValue: {
      parse: {
        dateInput: 'L',
        monthInput: 'MMMM',
        timeInput: 'LT',
        datetimeInput: 'L LT',
      },
      display: {
        dateInput: 'L',
        monthInput: 'MMMM',
        datetimeInput: 'L LT',
        timeInput: 'LT',
        monthYearLabel: 'MMM YYYY',
        dateA11yLabel: 'LL',
        monthYearA11yLabel: 'MMMM YYYY',
        popupHeaderDateLabel: 'ddd, DD MMM',
      },
    },
  },
];

@see defaults in moment-datetime-formats.ts
@see moment.js documentation

Theming

@import '@mat-datetimepicker/core/datetimepicker/datetimepicker-theme.scss';

// Using the $theme variable from the pre-built theme you can call the theming function
@include mat-datetimepicker-theme($theme);

@see src/styles.scss

Development

Run npm install in order to install all required dependencies and initialize the Git hooks. Further instructions are available in the DEVELOPMENT.md.

Make sure you read at least the "Committing" section before committing anything.

FAQs

Package last updated on 05 Dec 2023

Did you know?

Socket

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

Packages

npm

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc