Git Product home page Git Product logo

shortcut-buttons-flatpickr's Introduction

Shortcut buttons

CircleCI Coverage Status npm version flatpickr License

Shortcut buttons is a plugin for flatpickr that provides users an alternative way to interact with the datetime picker.

material_blue material_green confetti material_red light dark

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:

yarn add shortcut-buttons-flatpickr

Installing on non-module environments:

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/themes/light.min.css">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/shortcut-buttons-flatpickr.min.js"></script>

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

shortcut-buttons-flatpickr's People

Contributors

dependabot[bot] avatar hracik avatar jcsmorais avatar larshanskrause avatar tpetry avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar

shortcut-buttons-flatpickr's Issues

IE problem

You have typed "target": "es6" in tsconfig. it is a problem because it is not working on IE (IE does not support arrowed function:)

Error in production build

It works in development but has either of the ff. errors in production.

Error 1:

ERROR in vendor-bundle-025d2a7274f90be4f253.js from UglifyJs
Unexpected token: operator (>) [vendor-bundle-025d2a7274f90be4f253.js:130115,17]

ERROR in vendor-bundle-025d2a7274f90be4f253.js from UglifyJs
Unexpected token: operator (>) [vendor-bundle-025d2a7274f90be4f253.js:130115,17]

Error 2:

ERROR in ./node_modules/shortcut-buttons-flatpickr/dist/types/index.d.ts
Module parse failed: /Users/james/Documents/workspace/rails/dbocl/client/node_modules/shortcut-buttons-flatpickr/dist/types/index.d.ts Unexpected token (2:7)
You may need an appropriate loader to handle this file type.
| import { Instance as Flatpickr } from 'flatpickr/dist/types/instance.d';
| export declare namespace ShortcutButtonsFlatpickr {
|     type OnClickSignature = (index: number, fp: Flatpickr) => void;
|     type Button = {
 @ ./app/v2/_widgets/forms/DateTimeField.tsx 32:28-84
 @ ./app/v2/eventGroup/productionScheduleReport/components/Filters.tsx
 @ ./app/v2/eventGroup/productionScheduleReport/components/ProductionScheduleReport.tsx
 @ ./app/v2/eventGroup/productionScheduleReport/containers/ProductionScheduleReport.tsx
 @ ./app/v2/AppRouter.tsx
 @ ./app/v2/main/components/App.tsx
 @ ./app/v2/main/containers/App.tsx
 @ ./app/v2/_boot/index.tsx
 @ multi es5-shim/es5-shim es5-shim/es5-sham babel-polyfill ./app/v2/_boot/index

Unable to close calendar on button click with rangePlugin

When i'm pressing today button i'm unable to close the calendar with a rangePlugin

GIF

Is there a way to fix it?

Here is how my flatpickr is initialized:

$('#daterange').flatpickr({
    plugins: [
        new rangePlugin({ input: "#secondrange" }),
        ShortcutButtonsPlugin({
            theme: 'dark',
            button: [
                { label: 'Oggi' }
            ],
            onClick(index, fp) {
                let now = moment().format('DD/MM/YYYY');
                fp.setDate([now, now], true);
                fp.close();
                fp.close();
            }
        })
    ],
    mode: "range",
    locale: "it",
    maxDate: new Date(),
    defaultDate: sessionStorage['start'] ? [moment(sessionStorage.getItem("start")).format('DD/MM/YYYY'), moment(sessionStorage.getItem("end")).format('DD/MM/YYYY')] : ['today', 'today'],
    dateFormat: "d/m/Y",
    onChange: function (selectedDates) {
        sessionStorage.setItem("start", selectedDates[0]);
        sessionStorage.setItem("end", selectedDates[1]);

        $('#daterange').attr("data-start", moment(selectedDates[0]).format('YYYY-MM-DD'));
        $('#daterange').attr("data-end", moment(selectedDates[1]).format('YYYY-MM-DD'));
        getTotali(true);

    },
});

TypeError Angular14

node_modules_ionic_core_dist_esm_ion-popover_entry_js.js:2 ERROR TypeError: (0 , shortcut_buttons_flatpickr_dist_types_index_d__WEBPACK_IMPORTED_MODULE_23__.ShortcutButtonsPlugin) is not a function at JobsPage.ionViewDidEnter (jobs.page.ts:187:30) at HTMLElement.handler (ionic-angular.js:2397:37) at _ZoneDelegate.invokeTask (zone.js:443:35) at Object.onInvokeTask (core.mjs:26218:33) at _ZoneDelegate.invokeTask (zone.js:442:64) at Zone.runTask (zone.js:214:51) at ZoneTask.invokeTask [as invoke] (zone.js:525:38) at invokeTask (zone.js:1727:22) at globalCallback (zone.js:1758:31) at HTMLElement.globalZoneAwareCallback

any help appreciated.

Importing as below,

import { ShortcutButtonsPlugin } from 'shortcut-buttons-flatpickr/dist/types/index.d';

Add class attribute as a supported attribute.

Currently only the aria-label and access-key attribute are supported. You should probably add class as a supported attribute so that users of this plugin can add a custom class to the shortcut buttons.

// index.ts
....

const supportedAttributes = new Set([
    'accesskey',
    'aria-label',
    'class' // new supported attribute
]);

....

Register plugin to "loadedPlugins"

The Flatpickr's default plugins register themselves to the loadedPlugins array.
It would be super great to determine if the plugin is loaded/enabled in the same way the other plugins are registered.

When the plugin is ready, a simple fp.loadedPlugins.push("shortcutButtons"); should do the trick.
See here, for example.

How to use in react

I like this plugin but i can't import to my react project. i try import but always error shortcutButtonsPlugin is not defined

import 'shortcut-buttons-flatpickr';
import { ShortcutButtonsPlugin } from 'shortcut-buttons-flatpickr';
import ShortcutButtonsPlugin from 'shortcut-buttons-flatpickr';

Publish latest version on npm

Would it be possible to publish the latest version of this library to NPM? I'm looking to make use of #31 but it's not part of the 0.3.1 NPM package. Thanks!

Accessibility and Keyboard controls

First let me say, thanks for opening up your work for all of us, it's extremely generous.

https://codepen.io/the-plumpNation/pen/xaPrjP

I added another input to your codepen example (found here flatpickr/flatpickr#576) so that the basic form keyboard controls (tabbing mainly) could be tested also.

Tabbing from one input to the next works as expected.

When I use the arrow keys, I begin interacting with the picker as expected, and if I now tab, the shortcut buttons focus correctly. Nice!

However, when I tab from the last shortcut button, I now no longer experience the same behaviour as when not using the plugin, which is to *tab back to the input that this datepicker belongs to.

I also wondered what would be the best way of alerting a screenreader to the fact that these shortcuts now exist.

Thanks again! If I find some time, I will take a look myself, if not, it's documented here if anyone else fancies a go.

Fails in chrome responsive mode

When initiating a flatpickr instance with the shortcut plugin on chrome in responsive mode the following js error happens:

vendor.8def00a5.js:50420 TypeError: Cannot read property 'appendChild' of undefined
    at Object.onReady (vendor.8def00a5.js:98029)
    at triggerEvent (vendor.8def00a5.js:50260)
    at init (vendor.8def00a5.js:48503)
    at FlatpickrInstance (vendor.8def00a5.js:50397)
    at _flatpickr (vendor.8def00a5.js:50416)
    at Object.flatpickr [as default] (vendor.8def00a5.js:50443)

Bildschirmfoto 2019-08-20 um 16 50 07

This is independent of #9 which is triggered for mobile devices as it's happening too in chrome responsive mode with a desktop screen size.

Update CDN link in the readme to latest version

Hi!

It took me longer than I'm proud of to figure out why button.attributes.class wasn't working. Then I realized, the JS that I downloaded from the CDN link, was still old an old version. :)

So just a little heads-up, maybe update these links?

ISSUE WITH SHORTCUTS

hello, I was wondering if there was a way to implement like a "last month" shortcut button, i saw in your code you calculate it out, however, what about months with 28 or 31 days or leapyears.

also one other issue is when i select your shortcut. I still have to click on the day to have it register how would i go about fixing this

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.