Skip to content

Material Time Picker for Angular 7, 9, 10, 11, 12, 13, 14 and 15

License

Notifications You must be signed in to change notification settings

candidosales/material-time-picker

Repository files navigation

Material Time Picker

A simple time picker component using Angular Material.

Compatibility

Version Angular
2.8.0 15
2.6.0 14
2.5.0 13
2.4.0 12
2.3.0 11
2.2.0 10
2.1.0 9
2.0.0 7

Installation

npm i @candidosales/material-time-picker

Quickstart

Import material-time-picker module in Angular app.

import { MaterialTimePickerModule } from '@candidosales/material-time-picker';

(...)

@NgModule({
  (...)
  imports: [
    MaterialTimePickerModule
  ]
  (...)
})

Usage

import { Component } from "@angular/core";

@Component({
  selector: "d-root",
  templateUrl: "./app.component.html",
  styleUrls: ["./app.component.scss"],
})
export class AppComponent {
  title = "demo";
  exportTime = { hour: 7, minute: 15, meriden: "PM", format: 24 };

  onChangeHour(event) {
    console.log("event", event);
  }
}
<material-timepicker
  color="primary"
  label="Hour 2"
  appearance="fill"
  [userTime]="exportTime"
  (change)="onChangeHour($event)"
  revertLabel="Remove"
  submitLabel="Ok"
  [disabled]="disabled"
  [readonly]="readonly"
></material-timepicker>

Examples

Check the demo.

📚 Reference

👍 Contribute

If you want to say thank you and/or support the active development this project:

  1. Add a GitHub Star to the project.
  2. Tweet about the project on your Twitter.
  3. Write a review or tutorial on Medium, Dev.to or personal blog.
  4. Support the project by donating a cup of coffee.

☕ Supporters

If you want to support Material Time Picker, you can ☕ buy a coffee here

✨ Acknowledgment

Author

⚠️ Copyright and license

Code and documentation copyright 2020-2030 the Authors and Code released under the MIT License. Docs released under Creative Commons.

Test Locally

npm run lib:build
npm run start