https://github.com/jcsmorais/shortcut-buttons-flatpickr

Flatpickr's plugin that provides users an alternative way to interact with the datetime picker.
https://github.com/jcsmorais/shortcut-buttons-flatpickr

buttons calendar flatpickr javascript plugin shortcut

Last synced: 5 months ago
JSON representation

Flatpickr's plugin that provides users an alternative way to interact with the datetime picker.

• Host: GitHub
• URL: https://github.com/jcsmorais/shortcut-buttons-flatpickr
• Owner: jcsmorais
• License: mit
• Created: 2018-04-23T05:49:30.000Z (over 7 years ago)
• Default Branch: master
• Last Pushed: 2023-09-11T06:14:29.000Z (about 2 years ago)
• Last Synced: 2025-04-22T17:14:41.814Z (6 months ago)
• Topics: buttons, calendar, flatpickr, javascript, plugin, shortcut
• Language: TypeScript
• Homepage:
• Size: 990 KB
• Stars: 26
• Watchers: 3
• Forks: 14
• Open Issues: 9
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

          
# Shortcut buttons

[![CircleCI](https://circleci.com/gh/jcsmorais/shortcut-buttons-flatpickr/tree/master.svg?style=shield)](https://circleci.com/gh/jcsmorais/shortcut-buttons-flatpickr/tree/master)

[![Coverage Status](https://coveralls.io/repos/github/jcsmorais/shortcut-buttons-flatpickr/badge.svg?branch=master)](https://coveralls.io/github/jcsmorais/shortcut-buttons-flatpickr?branch=master)

[![npm version](https://badge.fury.io/js/shortcut-buttons-flatpickr.svg)](https://badge.fury.io/js/shortcut-buttons-flatpickr)

[![flatpickr](https://img.shields.io/badge/flatpickr-4.6.3-brightgreen.svg)](https://flatpickr.js.org/)

[![License](https://img.shields.io/badge/license-MIT-blue.svg)](https://raw.githubusercontent.com/jcsmorais/shortcut-buttons-flatpickr/master/LICENSE)

[![](https://data.jsdelivr.com/v1/package/npm/shortcut-buttons-flatpickr/badge)](https://www.jsdelivr.com/package/npm/shortcut-buttons-flatpickr)

Shortcut buttons is a plugin for [flatpickr](https://flatpickr.js.org/) that provides users an alternative way to interact with the datetime picker.

![material_blue](https://user-images.githubusercontent.com/712667/39291812-091dd72c-48e9-11e8-9d3f-1eefd57be20a.png)

![material_green](https://user-images.githubusercontent.com/712667/39291811-090776bc-48e9-11e8-9a79-deed7306be37.png)

![confetti](https://user-images.githubusercontent.com/712667/39291814-0938bbc8-48e9-11e8-81b1-14a05f6fcd99.png)

![material_red](https://user-images.githubusercontent.com/712667/39291810-08ee5042-48e9-11e8-8f82-25eb76ce1068.png)

![light](https://user-images.githubusercontent.com/712667/39291809-08ba48d8-48e9-11e8-942d-33f68742f94f.png)

![dark](https://user-images.githubusercontent.com/712667/39291815-094fdbbe-48e9-11e8-9d54-f822d299317c.png)

# Motivation

Shortcut buttons development has been motivated by the need of having a fast, flexible and seemless alternative way for users to select specific date(s) without being forced to navigate through their calendars and individually select those date(s).

# Installation

Installing as a module:

```bash

yarn add shortcut-buttons-flatpickr

```

Installing on non-module environments:

```html

```

# API

| Params                | Type                     | Description                                                                                                                                                                      |

|-----------------------|--------------------------|----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|

| `button`              | `Object`, `Object[]`     | Button(s).                                                                                                                                                                       |

| `[button.attributes]` | `Object`                 | Button's attributes.
Supported attributes: `accesskey`, `aria-label`, `class` and `tabindex`.                                                                                                     |

| `button.label`        | `string`                 | Button's label.                                                                                                                                                                  |

| `[label]`             | `string`                 | Label including a word/sentence stating that the user can use the calendar or one of the buttons.                                                                                |

| `onClick`             | `Function`, `Function[]` | Callback(s) invoked when plugin's buttons are clicked. Each callback is fed with two parameters:
`index` - the index of the clicked button.
`fp` - flatpickr's instance. |

| `[theme]`             | `string`                 | Flatpickr's theme, defaults to `light` if none supplied.                                                                                                                         |

# Usage Examples

* [Beginning Of Time](http://bit.ly/2jjcQK0)

* [Clear Date Selection](http://bit.ly/2wrPyYp)

* [Quick Month Selection](http://bit.ly/2KdleFS)

* [US Holidays Navigator](http://bit.ly/2raWK9D)

* [Yesterday, Today and Tomorrow](http://bit.ly/2KrWMC0)