0.7.2 • Published 5 years ago

skimmed-datepicker v0.7.2

Weekly downloads
19
License
MIT
Repository
github
Last release
5 years ago

Features

  • 📅 Picks dates
  • 🔥 Blazing fast
  • 📱 Tap, pan & swipe enabled
  • 🖱️ Mouse friendly
  • 💧 Minimal required styles
  • 🎨 Maximally themeable
  • ⛔ Specify min & max dates
  • 🏷️ Customizable labels & date formats
  • 🔎 Transitions smoothly between daily, monthly & yearly views
  • 🛣️ Doesn't block vertical page scrolling on touch devices

Quick start

  1. Skimmed Datepicker is available as a package on npm. Simply use ubiquitous command and you are good to go!

    npm i skimmed-datepicker

    Alternatively when using Yarn:

    yarn add skimmed-datepicker
  2. Import BrowserAnimationsModule into root module & and DatepickerModule wherever you want to use it

    import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
    import { DatepickerModule } from 'skimmed-datepicker';
    
    @NgModule({
    imports: [
      BrowserAnimationsModule,
      DatepickerModule,
    ],
    })
    export class AppModule {
    }

    Ensure that @angular/animations package is installed.

  3. Include stylesheet

    TODO
  4. (Optional) For gesture support install and import hammerjs globally.

    npm i hammerjs

    A popular place, recommended by Angular Material, is src/main.ts.

    import 'hammerjs';
  5. Use skm-datepicker in a template

    <skm-datepicker [formControl]="dateControl"></skm-datepicker>
    <skm-datepicker [(ngModel)]="date"></skm-datepicker>
    <skm-datepicker [(date)]="date"></skm-datepicker>

Configuration

TODO: Freeze API & document everything

date: Date;
min: Date;
max: Date;

deselectEnabled: boolean;
yearFormat = 'y';
headingFormat = 'MMMM y';
firstWeekDay = WeekDay.Monday;
dayLabels: string[];
weekDayLabels: string[];
monthLabels: string[];

dateChange: EventEmitter<Date>;

Roadmap

  • Full compatibility with ReactiveFormsModule
  • Extend configurability
  • Popover mode
  • Keyboard support
  • Improve accessibility
  • Date range mode
  • Expose as Web Component

Credits