@ngx-tiny/date-picker

Angular Date Picker.

• Angular 10 implementation
• Works with SSR
• Works alone or with angular forms
• Only Depends on date-fns for localization
• Single Or Range Selection
• Themeable to own requirements

Installation

$ npm i @ngx-tiny/date-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/date-picker --save

2. Add NgxDatePickerModule to your @NgModule like example below

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

3. Add the component to your view for basic

   <div class="form-group">
       <label>Single Date</label>
       <input class="form-control" placeholder="Select Date" 
           [ngxDatePicker]="dateInstanceSingle" 
           [value]="singleDate"
           (valueChange)="onChangeSingle($event)">
       <ngx-date-picker #dateInstanceSingle [options]="singleDatePickerOptions"></ngx-date-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"
               [ngxDatePicker]="dateInstanceOne" >
           <ngx-date-picker #dateInstanceOne [options]="singleDatePickerOptions"></ngx-date-picker>
           <button class="btn" type="submit">Submit</button>
       </div>
   </form>

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

Check Out Ngx-Tiny Other Projects

• @ngx-tiny/single-select
• @ngx-tiny/multi-select
• @ngx-tiny/quill-editor
• @ngx-tiny/switch-input
• @ngx-tiny/date-picker
• @ngx-tiny/ngx-time-picker
• @ngx-tiny/code-highlight
• @ngx-tiny/tabs
• @ngx-tiny/clipboard

Support

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

License

See the LICENSE file.