@ngx-tiny/time-picker

Angular Time Picker.

• Angular 10 implementation
• Works with SSR
• Works alone or with angular forms
• Depends on time-fns for localization
• Themeable to own requirements

Installation

$ npm i @ngx-tiny/time-picker

Documentation

Full Docs:

You can find the full documentation at https://aavanzyl.github.io/ngx-tiny which includes

• Installation instructions
• Usage and Demos
• Styling Reference
• API Reference

Quick Start:

1. Install with npm: npm install @ngx-tiny/time-picker --save

2. Add NgxTimePickerModule to your @NgModule like example below

   import { NgModule } from '@angular/core';
   import { BrowserModule } from '@angular/platform-browser';
   import { NgxTimePickerModule } from '@ngx-tiny/time-picker';
   
   import { AppComponent } from './app.component';
   
   @NgModule({
       imports: [BrowserModule, NgxTimePickerModule],
       declarations: [AppComponent],
       bootstrap: [AppComponent]
   })
   
   export class AppModule { }

3. Add the component to your view for basic

   <div class="form-group">
       <label>Single Time</label>
       <input class="form-control" placeholder="Select Time" 
           [ngxTimePicker]="timeInstanceSingle" 
           [value]="singleDate"
           (valueChange)="onChangeSingle($event)">
       <ngx-time-picker #timeInstanceSingle></ngx-time-picker>
   </div>

   or for Angular forms

   <form [formGroup]="myFormSingle" (ngSubmit)="onSubmitSingle()">
       <div class="form-group">
           <label>Single Date</label>
           <input class="form-control" placeholder="Select Date" 
               formControlName="singleDate"
               [ngxTimePicker]="timeInstanceOne" >
           <ngx-time-picker #timeInstanceOne></ngx-time-picker>
           <button class="btn" type="submit">Submit</button>
       </div>
   </form>

   The examples above are quite basic. The picker has much more features and configurations.

Support

Support me by becoming a patron and buying me a beer :)

License

See the LICENSE file.