Timepicker for Angular Material app

Note: RbTimepicker v2.* It is compatible with angular > 6, ngModel and ReactiveForms. For angular < 6 use rb-timepicker v 1.*

Donation

Donations

Demo

RbTimepicker

Step 1: Install rb-timepicker and Angular Material

NPM

npm install --save rb-material-timepicker
npm install --save @angular/material @angular/cdk

Import RbTimepickerModule into usage Module.

/*----  src/app/app.module.ts     -----*/
import { RbTimepickerModule } from 'rb-material-timepicker';

@NgModule({
  ...
  imports: [
   RbTimepickerModule
  ],
  ...
})
export class AppModule.ts { }

Step 2: Animations

Some Material components depend on the Angular animations module in order to be able to do more advanced transitions. If you want these animations to work in your app, you have to install the @angular/animations module and include the BrowserAnimationsModule in your app.

NPM

npm install --save @angular/animations

/*----  src/app/app.module.ts     -----*/
import {BrowserAnimationsModule} from '@angular/platform-browser/animations';

@NgModule({
  ...
  imports: [BrowserAnimationsModule],
  ...
})
export class AppModule.ts { }

Step 3: Set theme

Where you have the custom theme of angular material, you must import the scss library of the timepicker and use the mixin rb-timepicker-theme($theme). If you have more than one theme you must include rb-timepicker-theme($othertheme) for each one.

/* src/style.scss */
@import '~rb-material-timepicker/_getThema.scss';

@include angular-material-theme($indigoPink-theme);

@include rb-timepicker-theme($indigoPink-theme);

.indigoPinkDark {
    @include angular-material-theme($indigoPink-theme-dark);

    @include rb-timepicker-theme($indigoPink-theme-dark);
}

Usage

The rb-timepicker module consists of 3 parts. <rb-timepicker> which is the main component, [rbTimepicker] the directive to be used in the Inputs for the communication between the timepicker and the input and finally <rb-timepicker-toggle> which is a predesigned component to function as a button and open the timepicker (this is not 100% necessary since there is a public method in rb-timepicker for it).

<mat-form-field class="full-width">
    <input matInput type="time" placeholder="Pick Time"
        [rbTimepicker]="mypicker" 
        [(ngModel)]="time">
		
  <rb-timepicker #mypicker></rb-timepicker>
	
  <rb-timepicker-toggle matSuffix [timePicker]="mypicker">
  </rb-timepicker-toggle>
	
</mat-form-field>

If you want to use an input type text it is recommended to use the [military] = false property after the rbTimepicker directive.

<mat-form-field class="full-width">
    <input matInput type="text" placeholder="Pick Time"
        [rbTimepicker]="mypicker"
        [military]="false" 
        [(ngModel)]="time">
		
    <rb-timepicker #mypicker></rb-timepicker>
	
    <mat-icon matSuffix (click)="mypicker.open()">
      arrow_drop_down
    </mat-icon>
	
</mat-form-field>

Note: As you can see, do not use the <rb-datepicker-toggle> component, instead use the public property open() of <rb-timepicker> doing it is valid too, only that <rb-timepicker-toggle> is better suited to mat-input.

Extra

Both the colors of the interface and the buttons can be changed according to the material angular palette, by default the interface will have a primary color and the buttons will be white or black depending on the theme. If you put the property [color] in the component <rb-timepicker> as primary or accent the colors of the buttons will change to that palette, if you want to return them to the color black or white use the property [colorBtn] = 'none' however you can give the primary or accent color if you prefer.

<mat-form-field class="full-width">
    <input matInput type="time" placeholder="Pick Time"
        [rbTimepicker]="mypicker" 
        [military]="true"
        [(ngModel)]="time">

    <rb-timepicker #mypicker colorBtn="primary" color="accent">
	</rb-timepicker>
	
    <rb-timepicker-toggle matSuffix [timePicker]="mypicker">
	</rb-timepicker-toggle>
	
</mat-form-field>

By default the timepicker changes its shape depending on the orientation of the screen, but you can manually change this mode with the [mode] property   <rb-timepicker> ('auto', 'landscape', 'portrait').

<mat-form-field class="full-width">
    <input matInput type="time" placeholder="Pick Time"
        [rbTimepicker]="mypicker" 
        [(ngModel)]="time">
		
  <rb-timepicker mode="portrait" #mypicker></rb-timepicker>
	
  <rb-timepicker-toggle matSuffix [timePicker]="mypicker">
  </rb-timepicker-toggle>
	
</mat-form-field>

Properties of

| Name | Description | | ------------ | ------------ | | @Input() color: ThemePalette | Theme color palette for the component. | | @Input() colorBtn: ThemePalette | Theme color palette for the buttons. | | @Input() mode: string | Type of animation, (default: auto) values: auto, portrait, landscape. | | @Input() time: string | Initialization of the timepicker (only timepicker) (10:00am); | | @Output() open: EventEmitter <Object> | Event emitted when clicking on the Ok button in the timepicker return an object ( {mTime: '14: 00 ', time: "02:00 PM"} ) | | @Output() onClose: EventEmitter <null> | Event emitted when closing the timepicker.|

Property of the [rbTimepicker] directive

| Name | Description | | ------------ | ------------ | | @Input('rbTimepicker') timepicker: RbTimepickerComponent | Receive the instance of <rb-timepicker> | | @Input() military: Boolean | By default it is true. Defines the time format that will be returned to the input element |

License

MIT, see LICENSE.md for details.