tomblachut / skimmed-datepicker

📅 Datepicker component for Angular, containing around 0.1% fat

Skimmed Datepicker

Compatible with Angular 6 and up

SEE THE DEMO

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)