@ngx-tiny/time-picker

Angular Time Picker.

Usage no npm install needed!

<script type="module">
  import ngxTinyTimePicker from 'https://cdn.skypack.dev/@ngx-tiny/time-picker';
</script>

README

@ngx-tiny/time-picker

minzipped size last commit licence

Time Picker Inline

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.