https://github.com/tomblachut/skimmed-datepicker

📅 Datepicker component for Angular, containing around 0.1% fat
https://github.com/tomblachut/skimmed-datepicker

angular component datepicker touch-compatible

Last synced: 2 months ago
JSON representation

📅 Datepicker component for Angular, containing around 0.1% fat

• Host: GitHub
• URL: https://github.com/tomblachut/skimmed-datepicker
• Owner: tomblachut
• License: mit
• Created: 2017-11-11T23:33:18.000Z (about 7 years ago)
• Default Branch: master
• Last Pushed: 2018-11-16T01:34:11.000Z (about 6 years ago)
• Last Synced: 2024-10-10T18:51:55.208Z (3 months ago)
• Topics: angular, component, datepicker, touch-compatible
• Language: TypeScript
• Homepage: https://tomblachut.github.io/skimmed-datepicker/
• Size: 641 KB
• Stars: 12
• Watchers: 5
• Forks: 0
• Open Issues: 2
• Metadata Files:
  • Readme: README.md
  • License: LICENSE
  • Code of conduct: CODE_OF_CONDUCT.md

Awesome Lists containing this project

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

1. Skimmed Datepicker is available as a [package on npm](https://www.npmjs.com/package/skimmed-datepicker). Simply use ubiquitous command and you are good to go!

    ```

    npm i skimmed-datepicker

    ```

    Alternatively when [using Yarn](https://yarnpkg.com/en/package/skimmed-datepicker):

    ```

    yarn add skimmed-datepicker

    ```

2. Import `BrowserAnimationsModule` into root module & and `DatepickerModule` wherever you want to use it

    ```typescript

    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](https://material.angular.io/guide/getting-started), is `src/main.ts`.

    ```typescript

    import 'hammerjs';

    ```

5. Use `skm-datepicker` in a template

    ```html

    

    

    

    ```

## Configuration

`TODO: Freeze API & document everything`

```typescript

date: Date;

min: Date;

max: Date;

deselectEnabled: boolean;

yearFormat = 'y';

headingFormat = 'MMMM y';

firstWeekDay = WeekDay.Monday;

dayLabels: string[];

weekDayLabels: string[];

monthLabels: string[];

dateChange: EventEmitter;

```

## 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](https://github.com/tomblachut))

* Spatial easing function perfected by Michał Wiatrowski ([@michel4ngel0](https://github.com/michel4ngel0))