Repository: flatpickr/flatpickr
Pull request #2247 (2020-08-17 14:03:26)

Fix clickOpens option in RangePlugin
Hi. I have issue when using RangePlugin with option "clickOpens: false".
I fix it in this commit.


Patch:
diff --git a/package-lock.json b/package-lock.json
index f8a516f2..8c70e63d 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -9264,18 +9264,18 @@
       "dev": true
     },
     "stylus": {
-      "version": "0.54.7",
-      "resolved": "https://registry.npmjs.org/stylus/-/stylus-0.54.7.tgz",
-      "integrity": "sha512-Yw3WMTzVwevT6ZTrLCYNHAFmanMxdylelL3hkWNgPMeTCpMwpV3nXjpOHuBXtFv7aiO2xRuQS6OoAdgkNcSNug==",
+      "version": "0.54.8",
+      "resolved": "https://registry.npmjs.org/stylus/-/stylus-0.54.8.tgz",
+      "integrity": "sha512-vr54Or4BZ7pJafo2mpf0ZcwA74rpuYCZbxrHBsH8kbcXOwSfvBFwsRfpGO5OD5fhG5HDCFW737PKaawI7OqEAg==",
       "dev": true,
       "requires": {
         "css-parse": "~2.0.0",
         "debug": "~3.1.0",
-        "glob": "^7.1.3",
-        "mkdirp": "~0.5.x",
+        "glob": "^7.1.6",
+        "mkdirp": "~1.0.4",
         "safer-buffer": "^2.1.2",
         "sax": "~1.2.4",
-        "semver": "^6.0.0",
+        "semver": "^6.3.0",
         "source-map": "^0.7.3"
       },
       "dependencies": {
@@ -9288,6 +9288,12 @@
             "ms": "2.0.0"
           }
         },
+        "mkdirp": {
+          "version": "1.0.4",
+          "resolved": "https://registry.npmjs.org/mkdirp/-/mkdirp-1.0.4.tgz",
+          "integrity": "sha512-vVqVZQyf3WLx2Shd0qJ9xuvqgAyKPLAiqITEtqW0oIUjzo3PePDd6fW9iFz30ef7Ysp/oiWqbhszeGWW2T6Gzw==",
+          "dev": true
+        },
         "ms": {
           "version": "2.0.0",
           "resolved": "https://registry.npmjs.org/ms/-/ms-2.0.0.tgz",
diff --git a/package.json b/package.json
index a858135a..d3733d79 100644
--- a/package.json
+++ b/package.json
@@ -3,9 +3,10 @@
   "version": "4.6.6",
   "description": "A lightweight, powerful javascript datetime picker",
   "scripts": {
-    "build": "run-s build:pre build:build build:types build:post",
+    "build": "run-s build:pre build:build build:esm build:types build:post",
     "build:pre": "rimraf dist",
     "build:build": "ts-node --transpile-only build.ts",
+    "build:esm": "tsc --module es2015 --target es6 --outDir dist/esm",
     "build:types": "tsc -p tsconfig.declarations.json",
     "build:post": "cp src/typings.d.ts dist/typings.d.ts",
     "fmt": "prettier --ignore-path .gitignore --trailing-comma es5 --write \"**/*.ts\"",
@@ -56,6 +57,7 @@
     "typescript": "^3.9.5"
   },
   "main": "dist/flatpickr.js",
+  "module": "dist/esm/src/index.js",
   "style": "dist/flatpickr.css",
   "types": "./dist/typings.d.ts",
   "repository": {
diff --git a/src/l10n/vn.ts b/src/l10n/vn.ts
index 4d6f28e0..397f5709 100644
--- a/src/l10n/vn.ts
+++ b/src/l10n/vn.ts
@@ -49,9 +49,9 @@ export const Vietnamese: CustomLocale = {
       "Tháng tám",
       "Tháng chín",
       "Tháng mười",
-      "Tháng 11",
-      "Tháng 12",
-    ],
+      "Tháng mười một",
+      "Tháng mười hai",
+    ]
   },
 
   firstDayOfWeek: 1,
diff --git a/src/plugins/monthSelect/index.ts b/src/plugins/monthSelect/index.ts
index d72804d5..b66840db 100644
--- a/src/plugins/monthSelect/index.ts
+++ b/src/plugins/monthSelect/index.ts
@@ -50,13 +50,7 @@ function monthSelectPlugin(pluginConfig?: Partial<Config>): Plugin {
         e.preventDefault();
         e.stopPropagation();
 
-        const selectedMonth = fp.rContainer
-          ?.querySelector<ElementDate>(".flatpickr-monthSelect-month.selected")!
-          .dateObj.getMonth();
-
-        if (selectedMonth === 0) {
-          fp.currentYear--;
-        }
+        fp.currentYear--;
         selectYear();
       });
 
@@ -64,13 +58,7 @@ function monthSelectPlugin(pluginConfig?: Partial<Config>): Plugin {
         e.preventDefault();
         e.stopPropagation();
 
-        const selectedMonth = fp.rContainer
-          ?.querySelector<ElementDate>(".flatpickr-monthSelect-month.selected")!
-          .dateObj.getMonth();
-
-        if (selectedMonth === 11) {
-          fp.currentYear++;
-        }
+        fp.currentYear++;
         selectYear();
       });
     }
diff --git a/src/plugins/rangePlugin.ts b/src/plugins/rangePlugin.ts
index 31e89541..1668e0e4 100644
--- a/src/plugins/rangePlugin.ts
+++ b/src/plugins/rangePlugin.ts
@@ -49,26 +49,28 @@ function rangePlugin(config: Config = {}): Plugin {
 
       secondInput.setAttribute("data-fp-omit", "");
 
-      fp._bind(secondInput, ["focus", "click"], () => {
-        if (fp.selectedDates[1]) {
-          fp.latestSelectedDateObj = fp.selectedDates[1];
-          fp._setHoursFromDate(fp.selectedDates[1]);
-          fp.jumpToDate(fp.selectedDates[1]);
-        }
+      if (fp.config.clickOpens) {
+        fp._bind(secondInput, ["focus", "click"], () => {
+          if (fp.selectedDates[1]) {
+            fp.latestSelectedDateObj = fp.selectedDates[1];
+            fp._setHoursFromDate(fp.selectedDates[1]);
+            fp.jumpToDate(fp.selectedDates[1]);
+          }
+
+          _secondInputFocused = true;
+          fp.isOpen = false;
+          fp.open(
+            undefined,
+            config.position === "left" ? fp._input : secondInput
+          );
+        });
 
-        _secondInputFocused = true;
-        fp.isOpen = false;
-        fp.open(
-          undefined,
-          config.position === "left" ? fp._input : secondInput
-        );
-      });
-
-      fp._bind(fp._input, ["focus", "click"], (e: FocusEvent) => {
-        e.preventDefault();
-        fp.isOpen = false;
-        fp.open();
-      });
+        fp._bind(fp._input, ["focus", "click"], (e: FocusEvent) => {
+          e.preventDefault();
+          fp.isOpen = false;
+          fp.open();
+        });
+      }
 
       if (fp.config.allowInput)
         fp._bind(secondInput, "keydown", (e: KeyboardEvent) => {


Test patch:
diff --git a/src/__tests__/build.spec.ts b/__tests__/build.spec.ts
similarity index 100%
rename from src/__tests__/build.spec.ts
rename to __tests__/build.spec.ts
diff --git a/src/__tests__/index.spec.ts b/__tests__/src/index.spec.ts
similarity index 98%
rename from src/__tests__/index.spec.ts
rename to __tests__/src/index.spec.ts
index 4a2d11ec..b79e359d 100644
--- a/src/__tests__/index.spec.ts
+++ b/__tests__/src/index.spec.ts
@@ -1,8 +1,8 @@
-import flatpickr from "../index";
-import { Russian } from "../l10n/ru";
-import { Instance, DayElement } from "../types/instance";
-import { Options, DateRangeLimit } from "../types/options";
-import confirmDatePlugin from "../plugins/confirmDate/confirmDate";
+import flatpickr from "index";
+import { Russian } from "l10n/ru";
+import { Instance, DayElement } from "types/instance";
+import { Options, DateRangeLimit } from "types/options";
+import confirmDatePlugin from "plugins/confirmDate/confirmDate";
 
 flatpickr.defaultConfig.animate = false;
 flatpickr.defaultConfig.closeOnSelect = true;
@@ -1594,4 +1594,25 @@ describe("flatpickr", () => {
       expect((fp.altInput as HTMLInputElement).value).toEqual("December");
     });
   });
+
+  describe("events + hooks", () => {
+    describe("onOpen", () => {
+      it("should fire only once", () => {
+        let timesFired = 0;
+
+        const fp = createInstance({
+          onOpen: () => timesFired++,
+        });
+
+        fp.open();
+        expect(timesFired).toEqual(1);
+      });
+    });
+  });
+
+  describe("server-side rendering", () => {
+    it("can be imported", () => {
+      expect(typeof flatpickr).toEqual("function");
+    });
+  });
 });
diff --git a/src/plugins/monthSelect/tests.spec.ts b/__tests__/src/plugins/monthSelect/index.spec.ts
similarity index 66%
rename from src/plugins/monthSelect/tests.spec.ts
rename to __tests__/src/plugins/monthSelect/index.spec.ts
index bb1f4cb3..c3903615 100644
--- a/src/plugins/monthSelect/tests.spec.ts
+++ b/__tests__/src/plugins/monthSelect/index.spec.ts
@@ -1,5 +1,5 @@
-import flatpickr from "../../index";
-import monthSelectPlugin from "./index";
+import flatpickr from "index";
+import monthSelectPlugin from "plugins/monthSelect/index";
 import { German } from "l10n/de";
 import { Instance } from "types/instance";
 import { Options } from "types/options";
@@ -59,4 +59,27 @@ describe("monthSelect", () => {
 
     expect(fp.altInput.value).toEqual("03 19");
   });
+
+  describe("year nav", () => {
+    describe("next/prev year buttons", () => {
+      it("should increment/decrement year when clicked (#2275)", () => {
+        const initYear = 2020;
+
+        const fp = createInstance({
+          plugins: [monthSelectPlugin()],
+          defaultDate: new Date(`${initYear}-03-20`),
+        }) as Instance;
+
+        const prevButton = fp.monthNav.querySelector(".flatpickr-prev-month")!;
+        prevButton.dispatchEvent(new MouseEvent("click"));
+
+        expect(fp.currentYear).toEqual(initYear - 1);
+
+        const nextButton = fp.monthNav.querySelector(".flatpickr-next-month")!;
+        nextButton.dispatchEvent(new MouseEvent("click"));
+
+        expect(fp.currentYear).toEqual(initYear);
+      });
+    });
+  });
 });
diff --git a/src/__tests__/rangePlugin.spec.ts b/__tests__/src/plugins/rangePlugin.spec.ts
similarity index 93%
rename from src/__tests__/rangePlugin.spec.ts
rename to __tests__/src/plugins/rangePlugin.spec.ts
index a6e782dc..a7e40b85 100644
--- a/src/__tests__/rangePlugin.spec.ts
+++ b/__tests__/src/plugins/rangePlugin.spec.ts
@@ -1,7 +1,7 @@
 import flatpickr from "index";
 import rangePlugin from "plugins/rangePlugin";
-import { Options } from "../types/options";
-import { Instance } from "../types/instance";
+import { Options } from "types/options";
+import { Instance } from "types/instance";
 
 type RangeInstance = Instance & {
   secondInput: HTMLInputElement;
diff --git a/src/__tests__/hooks.spec.ts b/src/__tests__/hooks.spec.ts
deleted file mode 100644
index aa8920b7..00000000
--- a/src/__tests__/hooks.spec.ts
+++ /dev/null
@@ -1,27 +0,0 @@
-import flatpickr from "index";
-import { Options } from "../types/options";
-import { Instance } from "../types/instance";
-
-flatpickr.defaultConfig.animate = false;
-
-jest.useFakeTimers();
-
-const createInstance = (config?: Options): Instance => {
-  return flatpickr(
-    document.createElement("input"),
-    config as Options
-  ) as Instance;
-};
-
-describe("Events + Hooks", () => {
-  it("should fire onOpen only once", () => {
-    let timesFired = 0;
-
-    const fp = createInstance({
-      onOpen: () => timesFired++,
-    });
-
-    fp.open();
-    expect(timesFired).toEqual(1);
-  });
-});
diff --git a/src/__tests__/ssr.spec.ts b/src/__tests__/ssr.spec.ts
deleted file mode 100644
index f09ebcdd..00000000
--- a/src/__tests__/ssr.spec.ts
+++ /dev/null
@@ -1,7 +0,0 @@
-import flatpickr from "../index";
-
-describe("flatpickr SSR", () => {
-  it("can be imported", () => {
-    expect(typeof flatpickr).toEqual("function");
-  });
-});