jcsmorais / shortcut-buttons-flatpickr Goto Github PK

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

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)

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.

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.

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';

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';

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!

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);

    },
});

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

Pls see pull request #34, #35.

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
]);

....

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?

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

Hio)
http://skrinshoter.ru/s/080619/aQdkvR03
Flatpickr using native mobile picker. I guess problem is with this.

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.

Error occured in mobile view
it is because flatpickr fp.calendarContainer is undefined in shortcut-buttons-flatpickr library.
You should skip to appendChild if fp.calendarContainer is undefined

It is urgent issue in my side, so please fix it