candidosales / material-time-picker

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

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

material-time-picker's Issues

how can we disabled input field ?

entering time with keyboard breaks everything

When I try to change the current time with keyboard and type numbers,
Everything changes to undefined!
Here is what I'm talking about:
At the beginning, everything is normal:

After typing "number" with the keyboard:

If it also does not allow user to enter string characters it would be much better!

support for angular 13/14

wondering of there will be an update or is the lib dead?

Node version

Hello,
I have an error.
@candidosales/[email protected]: The engine "node" is incompatible with this module. Expected version ">=14.0.0 <17.0.0". Got "18.12.1"
Is it possible to update your lib to 18+?

How do i apply readonly ? it not working?

i need to disable input ?