angular5-time-picker
Advanced tools
This module is a fork from https://github.com/SteveDunlap13/MaterialTimeControl.
#angular5-time-picker This module is a fork from https://github.com/SteveDunlap13/MaterialTimeControl.
It provides a time picker component compatible with Angular Material 5.
This component works with Angular 5
Install with the following command:
npm install angular5-time-picker --save
Import the this module into your module as follows:
import { Angular5TimePickerModule } from 'angular5-time-picker';
@NgModule({
declarations: [
AppComponent
],
imports: [
BrowserModule,
BrowserAnimationsModule,
Angular5TimePickerModule,
MatCardModule,
MatSnackBarModule,
MatCardModule,
MatFormFieldModule,
MatInputModule
],
providers: [],
bootstrap: [AppComponent]
}),
export class AppModule {
...
}
Set up the config of time pickers in your AppModule.ts (format 12H)
import { Component } from '@angular/core';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
// Configuration of the time picker (format 12H with a default date and time)
private config = { hour: 7, minute: 15, meriden: 'PM', format: 12 };
...
}
Update your HTML (app.component.html) and instantiate the time picker :
<mat-form-field>
<input matInput [matTimepicker]="picker" placeholder="Choose a time">
<mat-timepicker-toggle matSuffix [for]="picker"></mat-timepicker-toggle>
<mat-timepicker #picker color="primary"></mat-timepicker>
</mat-form-field>
Please use the default theme from https://material.angular.io/guide/theming as follows:
Update your index.html to include the following style
<head>
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
</head>
Update your 'styles.css' to use the beautiful Angular Material theme:
@import "~@angular/material/prebuilt-themes/indigo-pink.css";
npm install
npm build
ng serve
FAQs
This module is a fork from https://github.com/SteveDunlap13/MaterialTimeControl.
We found that angular5-time-picker demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer 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.
Research
/Security News
Malicious packages published to npm, PyPI, Go Modules, crates.io, and Packagist impersonate developer tooling to fetch staged malware, steal credentials and wallets, and enable remote access.
Security News
Microsoft has released an open source toolkit for enforcing runtime security policies on AI agents as adoption accelerates faster than governance controls.
Security News
Multiple high-impact npm maintainers confirm they have been targeted in the same social engineering campaign that compromised Axios.