npmpackage.info

@mat-datetimepicker/core

Material datetimepicker for @angular/material

14.0.0

153

MIT

TypeScript

2,768,345 4.3

Installations

npm install @mat-datetimepicker/core

Pull Requests

Open

1

Total

490

Closed

245

Merged

244

Issues

Open

40

Total

118

Closed

78

Releases

v14.0.0

Published on 25 Jun 2024

v13.0.2

Published on 17 Mar 2024

v13.0.1

Published on 05 Dec 2023

v13.0.0

Published on 01 Dec 2023

v12.0.1

Published on 01 Oct 2023

v12.0.0

Published on 15 May 2023

View all 76 releases

Developer

kuhnroyal

Developer Guide

BETA

Module System

ESM

Min. Node Version

Typescript Support

No

Node Version

20.14.0

NPM Version

10.8.1 Statistics

153 Stars

515 Commits

84 Forks

7 Watching

4 Branches

23 Contributors

Updated on 09 Nov 2024

Languages

TypeScript (77.16%)

HTML (12.27%)

SCSS (8.2%)

JavaScript (2.37%)

Total Downloads

Cumulative downloads

Total Downloads

2,768,345

Last day

15.6%

3,222

Compared to previous day

Last week

2.4%

15,074

Compared to previous week

Last month

0.3%

67,925

Compared to previous month

Last year

24%

675,854

Compared to previous year

Daily Downloads

Weekly Downloads

Monthly Downloads

Yearly Downloads

Dependencies

tslib

Peer Dependencies

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

Versions

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 [for]="datetimePicker" matSuffix></mat-datetimepicker-toggle>
5    <mat-datetimepicker #datetimePicker type="datetime" openOnFocus="true" timeInterval="5"> </mat-datetimepicker>
6    <input matInput formControlName="start" [matDatetimepicker]="datetimePicker" required autocomplete="false" />
7  </mat-form-field>
8</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@import '@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 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.

7

Vulnerabilities

Determines if the project has open, known unfixed vulnerabilities.

6

Maintained

Determines if the project is "actively maintained".

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

0

Code-Review

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

0

Token-Permissions

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

0

CII-Best-Practices

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

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

4.3

/10

Last Scanned on 2024-11-18

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

@mat-datetimepicker/core

Installations

Pull Requests

1

490

245

244

Issues

40

118

78

Releases

Developer

kuhnroyal

Developer Guide

ESM

No

20.14.0

10.8.1

Statistics

Languages

Total Downloads

2,768,345

Daily Downloads

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

7

6

3

0

0

0

0

0

0

0

4.3

/10