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

• https://medium.com/@tomsu/how-to-build-a-library-for-angular-apps-4f9b38b0ed11

👍 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

• SteveDunlap13/MaterialTimeControl

Author

• Cândido Sales - @candidosales

⚠️ 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