Security News
Research
Data Theft Repackaged: A Case Study in Malicious Wrapper Packages on npm
The Socket Research Team breaks down a malicious wrapper package that uses obfuscation to harvest credentials and exfiltrate sensitive data.
@mat-datetimepicker/moment
Advanced tools
> **The example application is on [GitHub Pages](https://kuhnroyal.github.io/mat-datetimepicker/)!**
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
.
Install:
npm install --save @mat-datetimepicker/core
And for the moment adapter:
npm install --save @angular/material-moment-adapter mat-datetimepicker/moment
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,
];
<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>
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
, datetime
and time
.
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.
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
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
@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
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
> **The example application is on [GitHub Pages](https://kuhnroyal.github.io/mat-datetimepicker/)!**
The npm package @mat-datetimepicker/moment receives a total of 6,645 weekly downloads. As such, @mat-datetimepicker/moment popularity was classified as popular.
We found that @mat-datetimepicker/moment demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 0 open source maintainers collaborating on the project.
Did you know?
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.
Security News
Research
The Socket Research Team breaks down a malicious wrapper package that uses obfuscation to harvest credentials and exfiltrate sensitive data.
Research
Security News
Attackers used a malicious npm package typosquatting a popular ESLint plugin to steal sensitive data, execute commands, and exploit developer systems.
Security News
The Ultralytics' PyPI Package was compromised four times in one weekend through GitHub Actions cache poisoning and failure to rotate previously compromised API tokens.