Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/iliaidakiev/angular-material-timepicker
Angular Material Timepicker Input for Template and Reactive forms
https://github.com/iliaidakiev/angular-material-timepicker
angular angular-material material-design timepicker
Last synced: 2 days ago
JSON representation
Angular Material Timepicker Input for Template and Reactive forms
- Host: GitHub
- URL: https://github.com/iliaidakiev/angular-material-timepicker
- Owner: IliaIdakiev
- License: mit
- Created: 2019-03-12T16:11:45.000Z (over 5 years ago)
- Default Branch: master
- Last Pushed: 2023-05-27T06:58:04.000Z (over 1 year ago)
- Last Synced: 2024-11-09T10:41:06.641Z (5 days ago)
- Topics: angular, angular-material, material-design, timepicker
- Language: TypeScript
- Homepage:
- Size: 1.74 MB
- Stars: 57
- Watchers: 5
- Forks: 18
- Open Issues: 18
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# Angular Material Timepicker
## Installation
* `npm install mat-timepicker` || ` yarn add mat-timepicker`
## Features:
* Clock view dialog for selecting hour and minutes and options for dialog toggle customizations.
* Input time editing.
* Validations: minDate / maxDate (options: strict - datetime check / non-strict - time check).
* The timepicker can be used with template and reactive forms.
## Configuration and usage
**Keep in mind that the selector for the timepicker directive is *`input[matTimepicker]`***
your.module.ts
```typescript
import { MatTimepickerModule } from 'mat-timepicker';
@NgModule({
declarations: [...],
imports: [
MatTimepickerModule
],
...
})
export class YourModule { }
```
## Simple Case
```html
```
### More Complex Case
```html
TIMEPICKER
access_time
Invalid Date
```
### MatTimepicker Directive API
```typescript
@Input() required = false;
@Input() disabled = false;
@Input() placeholder = null;
/* Use a custom template for the ok button */
@Input() okButtonTemplate: TemplateRef | null = null;
/* Use a custom template for the cancel button */
@Input() cancelButtonTemplate: TemplateRef | null = null;
/* Where:
export interface MatTimepickerButtonTemplateContext {
$implicit: () => void; <--- The click handler for each the button (either okClickHandler/closeClickHandler)
label: string; <--- The label that was provided to the mat-timepicker directive (either okLabel/cancelLabel)
}
In order to use this check out the bottom of the template driven form inside the example app
*/
/* Override the label of the ok button. */
@Input() okLabel = 'Ok';
/* Override the label of the cancel button. */
@Input() cancelLabel = 'Cancel';
/** Override the ante meridiem abbreviation. */
@Input() anteMeridiemAbbreviation = 'am';
/** Override the post meridiem abbreviation. */
@Input() postMeridiemAbbreviation = 'pm';
/* Sets the clock mode, 12-hour or 24-hour clocks are supported. */
@Input() mode: '12h' | '24h' = '24h';
/* Set the color of the timepicker control */
@Input() color: ThemePalette = 'primary';
/* Set the value of the timepicker control */
/* ⚠️(when using template driven forms then you should use [ngModel]="someValue")⚠️ */
@Input() value: Date = new Date();
/* Minimum time to pick from */
@Input() minDate: Date;
/* Maximum time to pick from */
@Input() maxDate: Date;
/* Disables the dialog open when clicking the input field */
@Input() disableDialogOpenOnClick = false;
/* Input that allows you to control when the control is in an errored state */
/* (check out the demo app) */
@Input() errorStateMatcher: ErrorStateMatcher;
/* Strict mode checks the full date (Day/Month/Year Hours:Minutes) when doing the minDate maxDate validation. If you need to check only the Hours:Minutes then you can set it to false */
@Input() strict = true;
/* Emits when time has changed */
@Output() timeChange: EventEmitter = new EventEmitter();
/* Emits when the input is invalid */
@Output() invalidInput: EventEmitter = new EventEmitter();
```
### Check out the [**Demo App**](https://stackblitz.com/github/IliaIdakiev/angular-material-timepicker)! (Please note that stackblitz sometimes fails to run Angular applications properly and that doesn't mean that the library is broken)
---
## i18n (v5.0.0+)
In versions before v5.0.0 putting `import '@angular/localize/init';` inside polyfills.ts was mandatory. From v5.0.0 it is no longer mandatory (which is useful for users that are not using i18n). In order to use i18n you have to use the inputs: okLabel, cancelLabel.
**Please note that you need to provide both the input attribute and the value (e.g okLabel="Ok") and the i18n attribute (e.g i18n-okLabel="|@@")** for more info check out [this](https://angular.io/guide/i18n#mark-element-attributes-for-translations)
Example:
```html
24 TIMEPICKER
access_time
Invalid Date
```
---
Dialog View
Hour Select (24h):
Minutes Select:
