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 & andDatepickerModule
wherever you want to use itimport { 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)