npmpackage.info

Gathering detailed insights and metrics for @mat-datetimepicker/core

Other packages similar to @mat-datetimepicker/core

@xyezir/mat-datetimepicker-core

0.0.3

mat-datetimepicker-core

3.0.0-beta.0

@kamilkisiela/mat-datetimepicker-core

3.0.0-beta.1

@mat-ext/datetimepicker-core

6.0.0-beta-1

This is the main branch for @angular/material 6.x.

Gathering detailed insights and metrics for @mat-datetimepicker/core

@mat-datetimepicker/core - 15.0.2 | npmpackage.info

@mat-datetimepicker/core

Material datetimepicker for @angular/material

15.0.2

151

MIT

TypeScript

427.67 kB

3.2

Installations

npm install @mat-datetimepicker/core

Developer Guide

BETA

Typescript

No

Module System

ESM

Node Version

22.14.0

NPM Version

10.9.2 Pull Requests

Open

7

Total

534

Closed

263

Merged

264

Issues

Open

40

Total

119

Closed

79

Releases

v15.0.2

Updated on Mar 06, 2025

v15.0.1

Updated on Feb 07, 2025

v15.0.0

Updated on Dec 09, 2024

v14.0.0

Updated on Jun 25, 2024

v13.0.2

Updated on Mar 17, 2024

v13.0.1

Updated on Dec 05, 2023

View All 79 releases

Languages

TypeScript

HTML

SCSS

JavaScript

TypeScript (75.54%)

HTML (12.31%)

SCSS (8.2%)

JavaScript (3.95%)

Developer

kuhnroyal

Download Statistics

Total Downloads

Last Day

Last Week

Last Month

Last Year

GitHub Statistics

MIT License

151 Stars

538 Commits

86 Forks

8 Watchers

11 Branches

23 Contributors

Updated on Jun 30, 2025

Maintainers

View All 23 Contributors

Package Meta Information

Latest Version

15.0.2

Package Id

@mat-datetimepicker/core@15.0.2

Unpacked Size

427.67 kB

Size

74.20 kB

File Count

NPM Version

10.9.2

Node Version

22.14.0

Published on

Mar 06, 2025

Total Downloads

Cumulative downloads

Total Downloads

NaN

Last Day

NaN

Compared to previous day

Last Week

NaN

Compared to previous week

Last Month

NaN

Compared to previous month

Last Year

NaN

Compared to previous year

Weekly Downloads

Monthly Downloads

Yearly Downloads

Dependencies

tslib

Peer Dependencies

@angular/cdk @angular/common @angular/core @angular/material

Material Datetimepicker for @angular/material

The example application is on GitHub Pages!

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 .

Usage
Development

Usage

Installation

Install:

1npm install --save @mat-datetimepicker/core

And for the moment adapter:

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

Setup

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

1imports: [
2  ...MatDatepickerModule,
3  // use this if you want to use native javascript dates and INTL API if available
4  // MatNativeDatetimeModule,
5  MatMomentDatetimeModule,
6  MatDatetimepickerModule,
7];

@see src/app/app.module.ts

Using the component

1<form [formGroup]="group">
2  <mat-form-field>
3    <mat-placeholder>Start DateTime</mat-placeholder>
4    <mat-datetimepicker-toggle
5      [for]="datetimePicker"
6      matSuffix
7    ></mat-datetimepicker-toggle>
8    <mat-datetimepicker
9      #datetimePicker
10      type="datetime"
11      openOnFocus="true"
12      timeInterval="5"
13    >
14    </mat-datetimepicker>
15    <input
16      matInput
17      formControlName="start"
18      [matDatetimepicker]="datetimePicker"
19      required
20      autocomplete="false"
21    />
22  </mat-form-field>
23</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:

Property	Description	Default
ariaNextMonthLabel	`aria-label` for the `Next` button in the `month` mode	"Next month"
ariaPrevMonthLabel	`aria-label` for the `Previous` button in the `month` mode	"Previous month"
ariaNextYearLabel	`aria-label` for the `Next` button in the `year` mode	"Next year"
ariaPrevYearLabel	`aria-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.

1providers: [
2  {
3    provide: MAT_DATETIME_FORMATS,
4    useValue: {
5      parse: {},
6      display: {
7        dateInput: {
8          year: 'numeric',
9          month: '2-digit',
10          day: '2-digit',
11        },
12        monthInput: {
13          month: 'long',
14        },
15        datetimeInput: {
16          year: 'numeric',
17          month: '2-digit',
18          day: '2-digit',
19          hour: '2-digit',
20          minute: '2-digit',
21        },
22        timeInput: {
23          hour: '2-digit',
24          minute: '2-digit',
25        },
26        monthYearLabel: {
27          year: 'numeric',
28          month: 'short',
29        },
30        dateA11yLabel: {
31          year: 'numeric',
32          month: 'long',
33          day: 'numeric',
34        },
35        monthYearA11yLabel: {
36          year: 'numeric',
37          month: 'long',
38        },
39        popupHeaderDateLabel: {
40          weekday: 'short',
41          month: 'short',
42          day: '2-digit',
43        },
44      },
45    },
46  },
47];

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

Moment

1providers: [
2  {
3    provide: MAT_DATETIME_FORMATS,
4    useValue: {
5      parse: {
6        dateInput: 'L',
7        monthInput: 'MMMM',
8        timeInput: 'LT',
9        datetimeInput: 'L LT',
10      },
11      display: {
12        dateInput: 'L',
13        monthInput: 'MMMM',
14        datetimeInput: 'L LT',
15        timeInput: 'LT',
16        monthYearLabel: 'MMM YYYY',
17        dateA11yLabel: 'LL',
18        monthYearA11yLabel: 'MMMM YYYY',
19        popupHeaderDateLabel: 'ddd, DD MMM',
20      },
21    },
22  },
23];

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

Theming

1@use '@mat-datetimepicker/core/datetimepicker/datetimepicker-theme.scss';
2
3// Using the $theme variable from the pre-built theme you can call the theming function
4@include datetimepicker-theme.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.

No vulnerabilities found.

10

Dangerous-Workflow

Determines if the project's GitHub Action workflows avoid dangerous patterns.

10

Binary-Artifacts

Determines if the project has generated executable (binary) artifacts in the source repository.

10

License

Determines if the project has defined a license.

10

Packaging

Determines if the project is published as a package that others can easily download, install, easily update, and uninstall.

3

Pinned-Dependencies

Determines if the project has declared and pinned the dependencies of its build process.

Reason

dependency not pinned by hash detected -- score normalized to 3

Details

Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/lint.yaml:9: update your workflow using https://app.stepsecurity.io/secureworkflow/kuhnroyal/mat-datetimepicker/lint.yaml/release?enable=pin
Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/lint.yaml:10: update your workflow using https://app.stepsecurity.io/secureworkflow/kuhnroyal/mat-datetimepicker/lint.yaml/release?enable=pin
Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/lint.yaml:20: update your workflow using https://app.stepsecurity.io/secureworkflow/kuhnroyal/mat-datetimepicker/lint.yaml/release?enable=pin
Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/lint.yaml:21: update your workflow using https://app.stepsecurity.io/secureworkflow/kuhnroyal/mat-datetimepicker/lint.yaml/release?enable=pin
Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/publish.yaml:10: update your workflow using https://app.stepsecurity.io/secureworkflow/kuhnroyal/mat-datetimepicker/publish.yaml/release?enable=pin
Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/publish.yaml:11: update your workflow using https://app.stepsecurity.io/secureworkflow/kuhnroyal/mat-datetimepicker/publish.yaml/release?enable=pin
Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/release.yaml:12: update your workflow using https://app.stepsecurity.io/secureworkflow/kuhnroyal/mat-datetimepicker/release.yaml/release?enable=pin
Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/release.yaml:15: update your workflow using https://app.stepsecurity.io/secureworkflow/kuhnroyal/mat-datetimepicker/release.yaml/release?enable=pin
Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/test.yaml:16: update your workflow using https://app.stepsecurity.io/secureworkflow/kuhnroyal/mat-datetimepicker/test.yaml/release?enable=pin
Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/test.yaml:17: update your workflow using https://app.stepsecurity.io/secureworkflow/kuhnroyal/mat-datetimepicker/test.yaml/release?enable=pin
Info: 0 out of 10 GitHub-owned GitHubAction dependencies pinned
Info: 5 out of 5 npmCommand dependencies pinned

1

Vulnerabilities

Determines if the project has open, known unfixed vulnerabilities.

0

Code-Review

Determines if the project requires human code review before pull requests (aka merge requests) are merged.

0

Maintained

Determines if the project is "actively maintained".

0

CII-Best-Practices

Determines if the project has an OpenSSF (formerly CII) Best Practices Badge.

0

Token-Permissions

Determines if the project's workflows follow the principle of least privilege.

0

Security-Policy

Determines if the project has published a security policy.

0

Fuzzing

Determines if the project uses fuzzing.

0

Signed-Releases

Determines if the project cryptographically signs release artifacts.

0

SAST

Determines if the project uses static code analysis.

Score

3.2

/10

Last Scanned on 2025-07-07

The Open Source Security Foundation is a cross-industry collaboration to improve the security of open source software (OSS). The Scorecard provides security health metrics for open source projects.

Learn More

Other packages similar to @mat-datetimepicker/core

Other packages similar to @mat-datetimepicker/core

@mat-datetimepicker/core

Installations

Developer Guide

No

ESM

22.14.0

10.9.2

Pull Requests

7

534

263

264

Issues

40

119

79

Releases

Languages

Developer

kuhnroyal

Download Statistics

GitHub Statistics

Maintainers

Package Meta Information

Total Downloads

NaN

Weekly Downloads

Monthly Downloads

Yearly Downloads

Dependencies

Peer Dependencies

Material Datetimepicker for @angular/material

Contents

Usage

Installation

Setup

Using the component

Date formatting

Accessibility

Native

Moment

Theming

Development

10

10

10

10

3

1

0

0

0

0

0

0

0

0

3.2

/10