North Pole Merriment

    @ngx-tiny/date-picker
    TypeScript icon, indicating that this package has built-in type declarations

    10.0.2 • Public • Published

    @ngx-tiny/date-picker

    minzipped size last commit licence

    Date Picker Inline

    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

    Support

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

    License

    See the LICENSE file.

    Install

    npm i @ngx-tiny/date-picker

    DownloadsWeekly Downloads

    77

    Version

    10.0.2

    License

    MIT

    Unpacked Size

    301 kB

    Total Files

    37

    Last publish

    Collaborators

    • aavanzyl