Skip to content

๐Ÿ“… Datepicker component for Angular, containing around 0.1% fat

License

Notifications You must be signed in to change notification settings

tomblachut/skimmed-datepicker

Folders and files

NameName
Last commit message
Last commit date

Latest commit

ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 

Repository files navigation

Skimmed Datepicker

Compatible with Angular 6 and up

npm downloads

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

  • Created by Tomasz Bล‚achut (@tomblachut)
  • Spatial easing function perfected by Michaล‚ Wiatrowski (@michel4ngel0)