README

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

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
```

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.

Include stylesheet
```
TODO
```
(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';
```

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)

Usage no npm install needed!