stimulus-flatpickr - npm Package Compare versions

Comparing version 1.0.0 to 1.1.0-beta.2

karma.conf.js

@@ -7,15 +7,14 @@ // Karma configuration
     // base path that will be used to resolve all patterns (eg. files, exclude)
-    basePath: "",
+    basePath: '',
 
     // frameworks to use
     // available frameworks: https://npmjs.org/browse/keyword/karma-adapter
-    frameworks: ["mocha", "sinon-chai", "fixture"],
+    frameworks: ['mocha', 'sinon-chai', 'fixture'],
 
     // list of files / patterns to load in the browser
     files: [
-      "spec/*.js",
-      "src/**/*.js",
-      "spec/fixtures/*.html",
+      'spec/*.js',
+      'spec/fixtures/*.html',
       {
-        pattern: "**/*.js.map",
+        pattern: '**/*.js.map',
         included: false
@@ -31,9 +30,9 @@ }
     preprocessors: {
-      "spec/**/*.js": ["webpack", "sourcemap"],
-      "src/**/*.js": ["webpack", "sourcemap"],
-      "spec/fixtures/*.html": ["html2js"]
+      'spec/**/*.js': ['webpack', 'sourcemap'],
+      'src/**/*.js': ['webpack', 'sourcemap'],
+      'spec/fixtures/*.html': ['html2js']
     },
 
     webpack: {
-      mode: "development",
+      mode: 'development',
       module: {
@@ -44,7 +43,7 @@ rules: [
             exclude: [/node_modules/],
-            use: ["babel-loader"]
+            use: ['babel-loader']
           },
           {
             test: /\.css$/,
-            use: ["style-loader", "css-loader"]
+            use: ['style-loader', 'css-loader']
           }
@@ -59,3 +58,4 @@ ]
         includeStack: true
-      }
+      },
+      clearContext: false
     },
@@ -66,3 +66,3 @@
     // available reporters: https://npmjs.org/browse/keyword/karma-reporter
-    reporters: ["mocha", "coverage"],
+    reporters: ['mocha', 'coverage'],
 
@@ -72,9 +72,9 @@ coverageReporter: {
         {
-          type: "lcov"
+          type: 'lcov'
         },
         {
-          type: "text-summary"
+          type: 'text-summary'
         },
         {
-          type: "text"
+          type: 'text'
         }
@@ -98,3 +98,4 @@ ]
     // available browser launchers: https://npmjs.org/browse/keyword/karma-launcher
-    browsers: ["ChromeHeadless"],
+    browsers: ['ChromeHeadless'],
+    // browsers: ['Chrome'],
 
@@ -107,4 +108,4 @@ // Continuous Integration mode
     // how many browser should be started simultaneous
-    concurrency: Infinity
-  });
-};
+    concurrency: 5
+  })
+}

package.json

 {
   "name": "stimulus-flatpickr",
-  "version": "1.0.0",
+  "version": "1.1.0-beta.2",
   "description": "A Stimulus Wrapper for Flatpickr library",
-  "main": "dist/stimulus-flatpickr.js",
-  "umd:main": "dist/stimulus-flatpickr.umd.js",
-  "module": "dist/stimulus-flatpickr.m.js",
-  "source": "src/stimulus-flatpickr.js",
+  "main": "dist/index.js",
+  "umd:main": "dist/index.umd.js",
+  "module": "dist/index.m.js",
+  "source": "src/index.js",
   "author": "@adrienpoly",
@@ -15,31 +15,33 @@ "license": "MIT",
     "dev": "rollup -wc",
-    "test": "karma start",
+    "test": "NODE_ENV=test karma start",
     "test:watch": "yarn test --auto-watch --no-single-run",
-    "test:browser": "yarn test:watch --browsers Chrome",
-    "codecov": "codecov"
+    "test:headless": "yarn test --auto-watch --no-single-run --browsers ChromeHeadless",
+    "codecov": "codecov",
+    "release": "np"
   },
   "dependencies": {
-    "flatpickr": "^4.4.6",
-    "stimulus": "^1.0.1"
+    "flatpickr": ">=4.6.0",
+    "stimulus": "^1.1.1"
   },
   "devDependencies": {
-    "babel-core": "^6.26.0",
-    "babel-loader": "^7.1.4",
-    "babel-plugin-istanbul": "^5.0.1",
-    "babel-plugin-syntax-async-functions": "^6.13.0",
-    "babel-plugin-transform-async-functions": "^6.22.0",
-    "babel-plugin-transform-class-properties": "^6.24.1",
-    "babel-plugin-transform-object-rest-spread": "^6.26.0",
-    "babel-plugin-transform-runtime": "^6.23.0",
-    "babel-preset-env": "^1.6.1",
-    "babel-runtime": "^6.26.0",
-    "chai": "^4.1.2",
-    "chai-dom": "^1.8.0",
+    "@babel/core": "^7.6.0",
+    "@babel/plugin-proposal-class-properties": "^7.3.4",
+    "@babel/plugin-transform-classes": "^7.3.4",
+    "@babel/preset-env": "^7.6.0",
+    "babel-loader": "^8.0.5",
+    "babel-plugin-istanbul": "^5.1.1",
+    "chai": "^4.2.0",
+    "chai-dom": "^1.8.1",
     "codecov": "^3.1.0",
     "css-loader": "^1.0.0",
-    "karma": "^3.0.0",
-    "karma-babel-preprocessor": "6",
+    "eslint": "^6.3.0",
+    "eslint-plugin-import": "^2.18.2",
+    "eslint-plugin-mocha": "^6.1.0",
+    "eslint-plugin-node": "^10.0.0",
+    "eslint-plugin-promise": "^4.2.1",
+    "eslint-plugin-standard": "^4.0.1",
+    "karma": "^4.0.1",
     "karma-chai": "^0.1.0",
     "karma-chrome-launcher": "^2.2.0",
-    "karma-coverage": "^1.1.2",
+    "karma-coverage": "^2.0.1",
     "karma-fixture": "^0.2.6",
@@ -49,11 +51,14 @@ "karma-html2js-preprocessor": "^1.1.0",
     "karma-mocha-reporter": "^2.2.5",
-    "karma-rollup-preprocessor": "^6.0.1",
+    "karma-rollup-preprocessor": "^7.0.2",
     "karma-sinon-chai": "^2.0.2",
     "karma-sourcemap-loader": "^0.3.7",
-    "karma-webpack": "^3.0.0",
+    "karma-webpack": "^4.0.2",
     "mocha": "^5.2.0",
-    "rollup": "^0.64.1",
-    "rollup-plugin-buble": "^0.19.2",
-    "rollup-plugin-filesize": "^4.0.1",
-    "rollup-plugin-node-resolve": "^3.3.0",
+    "np": "^5.0.3",
+    "npm-run-all": "^4.1.3",
+    "rollup": "^1.20.3",
+    "rollup-plugin-babel": "^4.3.2",
+    "rollup-plugin-filesize": "^6.0.1",
+    "rollup-plugin-node-resolve": "^5.2.0",
+    "rollup-plugin-uglify": "^6.0.2",
     "sinon": "^6.1.4",
@@ -63,5 +68,6 @@ "sinon-chai": "^3.2.0",
     "style-loader": "^0.23.0",
-    "webpack": "^4.5.0",
-    "webpack-cli": "^2.0.14",
-    "webpack-dev-middleware": "^3.1.2"
+    "webpack": "^4.39.3",
+    "webpack-cli": "^3.2.3",
+    "webpack-dev-middleware": "^3.6.1",
+    "webpack-dev-server": "^3.2.1"
   },
@@ -68,0 +74,0 @@ "repository": {

readme.md

@@ -6,8 +6,8 @@ <h1 align="center">📆 Stimulus-Flatpickr Wrapper</h1>
   </a>
-  <a href="https://circleci.com/gh/adrienpoly/stimulus-flatpickr" rel="nofollow">
-  <img src="https://circleci.com/gh/adrienpoly/stimulus-flatpickr.svg?style=svg" alt="CircleCi build status">
+  <a href="https://circleci.com/gh/adrienpoly/stimulus-flatpickr" rel="nofollow">	
+    <img src="https://circleci.com/gh/adrienpoly/stimulus-flatpickr/tree/master.svg?style=svg" alt="CircleCi build status">	
+  </a>	
+  <a href="https://codecov.io/gh/adrienpoly/stimulus-flatpickr">	
+    <img src="https://codecov.io/gh/adrienpoly/stimulus-flatpickr/branch/master/graph/badge.svg" alt="Coverage"/>	
   </a>
-  <a href="https://codecov.io/gh/adrienpoly/stimulus-flatpickr">
-    <img src="https://codecov.io/gh/adrienpoly/stimulus-flatpickr/branch/master/graph/badge.svg" alt="Coverage"/>
-  </a>
 </p>
@@ -25,2 +25,3 @@
 - **strftime friendly**: [converts automatically strftime](#date-and-time-formats) formats to flatpickr formating tokens
+- **Disable days of week**: easily disable days of week (ie: all sundays)
 - **Turbolinks**: make all your datepickers compatible with Turbolinks by design
@@ -276,2 +277,39 @@ - **Getters**: all Flatpickr elements are available as [targets](#elements)
 
+### Enable/Disable days of week
+
+With Flatpickr to disable certain days of the week, you need to use the disable js function. Obviously passing a function through data-attributes is not easy 😄.
+
+The wrapper introduce two new configuration options:
+
+- `disableDaysOfWeek`: pass an array of days to disable (all others are enabled)
+- `enableDaysOfWeek`: pass an array of days to enable (all others are disabled)
+
+<table>
+<th>
+Code
+</th>
+<th>
+Result
+</th>
+<tr>
+<td>
+   <pre lang="erb">
+   <%= form_with model: Appointement.new, authenticity_token: true do |f| %>
+     <%= f.text_field :start_time,
+       data: {
+         controller: "flatpickr",
+         flatpickr_disable_days_of_week: [5,6], #disables saturdays and sundays
+         flatpickr_disable: ["2018-09-25", "2018-09-26"] #disables individual dates
+       } %>
+   <% end %>
+   </pre>
+</td>
+<td>
+  <p align="center">
+    <img src="./images/datetime-days-of-week.png" alt="datetime picker result days of week">
+  </p>
+</td>
+</tr>
+</table>
+
 ### Callbacks
@@ -319,7 +357,7 @@
 
-`this.selectedDateElem`: the selected date element.
+`this.selectedDateElemTarget`: the selected date element.
 
-`todayDateElem`: today element.
+`this.todayDateElemTarget`: today element.
 
-`weekdayContainer`: the container we all the days of the week.
+`this.weekdayContainerTarget`: the container we all the days of the week.
 
@@ -345,2 +383,6 @@ ## Overriding connect & disconnect
 
+## Internationalization
+
+To handle multiple language to translate your datepicker and convert the date formats, you can have a look at the [example app](https://github.com/adrienpoly/rails_stimulus_flatpickr). `stimulus-flatpickr` makes it straight forward to handle locales.
+
 ## CSS
@@ -347,0 +389,0 @@

rollup.config.js

@@ -1,29 +0,31 @@
-import buble from "rollup-plugin-buble";
-import filesize from "rollup-plugin-filesize";
-import resolve from "rollup-plugin-node-resolve";
+import filesize from 'rollup-plugin-filesize'
+import resolve from 'rollup-plugin-node-resolve'
+import babel from 'rollup-plugin-babel'
 
+const pkg = require('./package.json')
+
+const name = pkg.name
+
 export default {
-  input: "src/stimulus-flatpickr.js",
-  external: ["stimulus", "flatpickr"],
+  input: 'src/index.js',
+  external: ['stimulus', 'flatpickr'],
   output: [
     {
-      file: "dist/stimulus-flatpickr.js",
-      format: "cjs",
-      name: "StimulusFlatpickr",
+      file: 'dist/index.js',
+      format: 'cjs',
       sourcemap: true
     },
     {
-      file: "dist/stimulus-flatpickr.m.js",
-      format: "es",
-      name: "StimulusFlatpickr",
+      file: 'dist/index.m.js',
+      format: 'es',
       sourcemap: true
     },
     {
-      file: "dist/stimulus-flatpickr.umd.js",
-      format: "umd",
-      name: "StimulusFlatpickr",
+      file: 'dist/index.umd.js',
+      format: 'umd',
+      name,
       sourcemap: true,
       globals: {
-        stimulus: "Stimulus",
-        flatpickr: "Flatpickr"
+        stimulus: 'Stimulus',
+        flatpickr: 'Flatpickr'
       }
@@ -34,10 +36,7 @@ }
     resolve(),
-    buble({
-      transforms: {
-        classes: true
-      },
-      objectAssign: "Object.assign"
+    babel({
+      exclude: 'node_modules/**'
     }),
     filesize()
   ]
-};
+}

spec/flatpickr_controller_events_spec.js

@@ -1,79 +0,79 @@
-import Flatpickr from "../src/stimulus-flatpickr";
-import "flatpickr/dist/flatpickr.css";
-import {
-  registerApplication,
-  fixtureQuerySelector,
-  addFlatpickrOption,
-  resetDataAttributes
-} from "./helpers";
-import chai, { expect } from "chai";
-import chaiDom from "chai-dom";
-import sinon from "sinon";
-import sinonChai from "sinon-chai";
-var controller, spy;
+// import Flatpickr from './controllers/flatpickr_hook_controller'
+import { Application } from 'stimulus'
+import StimulusFlatpickr from './controllers/flatpickr_hook_controller'
+import 'flatpickr/dist/flatpickr.css'
+import { registerController, nextFrame, fixtureQuerySelector, addFlatpickrOption } from './helpers'
+import chai, { expect } from 'chai'
+import chaiDom from 'chai-dom'
+import sinon from 'sinon'
+import sinonChai from 'sinon-chai'
+var controller, spy
+const application = Application.start()
 
-chai.use(chaiDom);
-chai.use(sinonChai);
+chai.use(chaiDom)
+chai.use(sinonChai)
 
-describe("Flatpickr Controller EVENTS tests", function() {
-  before("initialize controller", async function() {
-    fixture.load("index.html");
-    this.sandbox = sinon.createSandbox();
-    this.sandbox.stub(Flatpickr.prototype, "open");
-    this.sandbox.stub(Flatpickr.prototype, "close");
-    this.sandbox.stub(Flatpickr.prototype, "ready");
-    this.sandbox.stub(Flatpickr.prototype, "monthChange");
-    this.sandbox.stub(Flatpickr.prototype, "yearChange");
-    this.spyDayCreate = this.sandbox.stub(Flatpickr.prototype, "dayCreate");
-    this.spyValueUpdate = this.sandbox.stub(Flatpickr.prototype, "valueUpdate");
-    this.spyChange = this.sandbox.stub(Flatpickr.prototype, "change");
-    controller = await registerApplication("flatpickr", Flatpickr);
-  });
+describe('Flatpickr Controller EVENTS tests', function() {
+  before('initialize controller', async function() {
+    fixture.load('index.html')
+    this.sandbox = sinon.createSandbox()
+    this.sandbox.stub(StimulusFlatpickr.prototype, 'open')
+    this.sandbox.stub(StimulusFlatpickr.prototype, 'close')
+    this.sandbox.stub(StimulusFlatpickr.prototype, 'ready')
+    this.sandbox.stub(StimulusFlatpickr.prototype, 'monthChange')
+    this.sandbox.stub(StimulusFlatpickr.prototype, 'yearChange')
+    this.spyDayCreate = this.sandbox.stub(StimulusFlatpickr.prototype, 'dayCreate')
+    this.spyValueUpdate = this.sandbox.stub(StimulusFlatpickr.prototype, 'valueUpdate')
+    this.spyChange = this.sandbox.stub(StimulusFlatpickr.prototype, 'change')
+    application.register('datepicker', StimulusFlatpickr)
+    await nextFrame()
+    controller = application.controllers[0]
+  })
 
-  describe("Initial state", function() {
-    it("Stimulus Flatpickr controller READY function is called", function() {
-      expect(controller.ready).has.been.calledOnce;
-      expect(this.spyDayCreate.getCalls().length).to.be.at.least(28);
-    });
-  });
+  describe('Initial state', function() {
+    it('Stimulus Flatpickr controller READY function is called', function() {
+      expect(controller.ready).has.been.calledOnce
+      // expect(this.spyDayCreate.getCalls().length).to.be.at.least(28)
+    })
+  })
 
-  describe("When focus", function() {
-    it("Stimulus Flatpickr controller OPEN function is called", function() {
-      const input = fixtureQuerySelector(".flatpickr-input");
-      input.dispatchEvent(new Event("focus"));
-      expect(controller.open).has.been.calledOnce;
-    });
-  });
+  describe('When focus', function() {
+    it('Stimulus Flatpickr controller OPEN function is called', function() {
+      const input = fixtureQuerySelector('.flatpickr-input')
+      input.dispatchEvent(new Event('focus'))
+      expect(controller.open).has.been.calledOnce
+    })
+  })
 
-  describe("When set a new date", function() {
-    it("Stimulus Flatpickr controller valueUpdate & change functions are called once", function() {
-      controller.fp.setDate("2018-10-15", true, "Y-m-d");
-      expect(controller.valueUpdate).has.been.calledOnce;
-      expect(this.spyValueUpdate.getCall(0).args[1]).to.be.equal("2018-10-15");
-      expect(controller.change).has.been.calledOnce;
-      expect(this.spyChange.getCall(0).args[1]).to.be.equal("2018-10-15");
-    });
-  });
+  describe('When set a new date', function() {
+    it('Stimulus Flatpickr controller valueUpdate & change functions are called once', function() {
+      controller.fp.setDate('2018-10-15', true, 'Y-m-d')
+      expect(controller.valueUpdate).has.been.calledOnce
+      expect(this.spyValueUpdate.getCall(0).args[1]).to.match(/2018-10-15/)
+      expect(controller.change).has.been.calledOnce
+      expect(this.spyChange.getCall(0).args[1]).to.match(/2018-10-15/)
+    })
+  })
 
-  describe("When input focus out", function() {
-    it("Stimulus Flatpickr controller CLOSE function is called once", function() {
-      const otherInput = fixtureQuerySelector("#other-input");
-      otherInput.dispatchEvent(new Event("focus"));
-      expect(controller.close).has.been.calledOnce;
-    });
-  });
+  describe('When input focus out', function() {
+    it('Stimulus Flatpickr controller CLOSE function is called once', function() {
+      const otherInput = fixtureQuerySelector('#other-input')
+      otherInput.dispatchEvent(new Event('focus'))
+      expect(controller.close).has.been.calledOnce
+    })
+  })
 
-  describe("When change month", function() {
-    it("Stimulus Flatpickr controller monthChange() function is called once", function() {
-      controller.fp.changeMonth(1);
-      expect(controller.monthChange).has.been.calledOnce;
-    });
-  });
+  describe('When change month', function() {
+    it('Stimulus Flatpickr controller monthChange() function is called once', function() {
+      controller.fp.changeMonth(1)
+      expect(controller.monthChange).has.been.calledOnce
+    })
+  })
 
-  describe("When change year", function() {
-    it("Stimulus Flatpickr controller yearChange() function is called once", function() {
-      controller.fp.changeYear(1);
-      expect(controller.yearChange).has.been.calledOnce;
-    });
-  });
-});
+  describe('When change year', function() {
+    it('Stimulus Flatpickr controller yearChange() function is called once', function() {
+      controller.fp.changeYear(1)
+      expect(controller.yearChange).has.been.calledOnce
+    })
+  })
+})

spec/flatpickr_controller_spec.js

@@ -1,186 +0,261 @@
-import Flatpickr from "../src/stimulus-flatpickr";
-import "flatpickr/dist/flatpickr.css";
-import {
-  registerApplication,
-  fixtureQuerySelector,
-  calendarQuerySelector,
-  flatpickrCalendar,
-  addFlatpickrOption,
-  resetDataAttributes
-} from "./helpers";
-import chai, { expect } from "chai";
-import chaiDom from "chai-dom";
-var controller;
+import { Application } from 'stimulus'
+import chai, { expect } from 'chai'
+import chaiDom from 'chai-dom'
 
-chai.use(chaiDom);
+import StimulusFlatpickr from './controllers/flatpickr_controller'
+import { nextFrame, fixtureQuerySelector, flatpickrCalendar, addFlatpickrOption, beforeEachSuite } from './helpers'
 
-describe("Flatpickr Controller tests", function() {
-  before("initialize controller", async function() {
-    fixture.load("index.html");
-    controller = await registerApplication("flatpickr", Flatpickr);
-  });
+import 'flatpickr/dist/flatpickr.css'
 
-  describe("Initial state", function() {
+var controller
+
+const application = Application.start()
+
+chai.use(chaiDom)
+
+describe('Flatpickr Controller tests', function() {
+  beforeEachSuite('initialize controller', async function() {
+    fixture.load('index.html')
+    application.register('datepicker', StimulusFlatpickr)
+    await nextFrame()
+    controller = application.controllers[0]
+  })
+
+  describe('Initial state', function() {
+    it('Stimulus flatpickr controller is initialized', function() {
+      expect(controller).to.exist
+    })
+
     it('can find an input with the class "flatpickr-input"', function() {
-      expect(fixtureQuerySelector(".flatpickr-input")).to.exist;
-    });
+      expect(fixtureQuerySelector('.flatpickr-input')).to.exist
+    })
 
     it('can find a div in the document with the class "flatpickr-calendar"', function() {
-      expect(flatpickrCalendar()).to.exist;
-    });
+      expect(flatpickrCalendar()).to.exist
+    })
 
-    it("does not have the class open", function() {
-      expect(flatpickrCalendar()).not.to.have.class("open");
-    });
-  });
+    it('does not have the class open', function() {
+      expect(flatpickrCalendar()).not.to.have.class('open')
+    })
+  })
 
-  describe("When input focus", function() {
-    it("Flatpickr has the open class", function() {
-      const input = fixtureQuerySelector(".flatpickr-input");
-      input.dispatchEvent(new Event("focus"));
+  describe('When input focus', function() {
+    it('Flatpickr has the open class', async function() {
+      const input = fixtureQuerySelector('.flatpickr-input')
+      input.dispatchEvent(new Event('focus'))
+      await nextFrame()
 
-      expect(flatpickrCalendar()).to.have.class("open");
-    });
-  });
+      expect(flatpickrCalendar()).to.have.class('open')
+    })
+  })
 
-  describe("When input focus out", function() {
-    it("Flatpickr does not have open class", function() {
-      const otherInput = fixtureQuerySelector("#other-input");
-      otherInput.dispatchEvent(new Event("focus"));
+  describe('When input focus out', function() {
+    it('Flatpickr does not have open class', function() {
+      controller.fp.open()
+      const otherInput = fixtureQuerySelector('#other-input')
+      otherInput.dispatchEvent(new Event('focus'))
 
-      expect(flatpickrCalendar()).not.to.have.class("open");
-    });
-  });
+      expect(flatpickrCalendar()).not.to.have.class('open')
+    })
+  })
 
-  describe("Flatpickr options with time enabled", function() {
-    after(function() {
-      resetDataAttributes(controller);
-    });
-    context("set enableTime false option", function() {
-      it("cannot set time", async function() {
-        await addFlatpickrOption("EnableTime", "false", controller);
+  describe('Flatpickr options with time enabled', function() {
+    context('set enableTime false option', function() {
+      it('cannot set time', async function() {
+        addFlatpickrOption('EnableTime', 'false', controller)
+        await nextFrame()
 
-        expect(flatpickrCalendar()).not.to.have.class("hasTime");
-        expect(flatpickrCalendar()).not.to.contain(".flatpickr-time");
-      });
-    });
+        expect(flatpickrCalendar()).not.to.have.class('hasTime')
+        expect(flatpickrCalendar()).not.to.contain('.flatpickr-time')
+      })
+    })
 
-    context("set enableTime true option", function() {
-      after(async function() {
-        await resetDataAttributes(controller);
-      });
-      it("can set time", async function() {
-        await addFlatpickrOption("EnableTime", "true", controller);
-        expect(flatpickrCalendar()).to.have.class("hasTime");
-        expect(flatpickrCalendar()).to.contain(".flatpickr-time");
-      });
-    });
+    context('set enableTime true option', function() {
+      it('can set time', async function() {
+        addFlatpickrOption('EnableTime', 'true', controller)
+        await nextFrame()
 
-    context("add time_24hr true option", function() {
-      it("am pm are not visible", async function() {
-        await addFlatpickrOption("Time-24hr", "true", controller);
+        expect(flatpickrCalendar()).to.have.class('hasTime')
+        expect(flatpickrCalendar()).to.contain('.flatpickr-time')
+      })
+    })
 
-        expect(flatpickrCalendar()).to.have.class("hasTime");
-        expect(flatpickrCalendar()).not.to.contain(".flatpickr-am-pm");
-      });
-    });
+    context('add time_24hr true option', function() {
+      it('am pm are not visible', async function() {
+        addFlatpickrOption('Time-24hr', 'true', controller)
+        await nextFrame()
 
-    context("add enableSeconds false option", function() {
-      it("cannot set seconds", async function() {
-        await addFlatpickrOption("EnableSeconds", "false", controller);
+        expect(flatpickrCalendar()).to.have.class('hasTime')
+        expect(flatpickrCalendar()).not.to.contain('.flatpickr-am-pm')
+      })
+    })
 
-        expect(flatpickrCalendar()).not.to.contain(".flatpickr-second");
-      });
-    });
+    context('add enableSeconds false option', function() {
+      it('cannot set seconds', async function() {
+        addFlatpickrOption('EnableSeconds', 'false', controller)
+        await nextFrame()
 
-    context("add enableSeconds true option", function() {
-      it("can set seconds", async function() {
-        await addFlatpickrOption("EnableSeconds", "true", controller);
+        expect(flatpickrCalendar()).not.to.contain('.flatpickr-second')
+      })
+    })
 
-        expect(flatpickrCalendar()).to.contain(".flatpickr-time");
-        expect(flatpickrCalendar()).to.contain(".flatpickr-second");
-      });
-    });
-  });
+    context('add enableSeconds true option', function() {
+      it('can set seconds', async function() {
+        addFlatpickrOption('EnableSeconds', 'true', controller)
+        await nextFrame()
 
-  describe("Flatpickr options with time Disabled", function() {
+        expect(flatpickrCalendar()).to.contain('.flatpickr-time')
+        expect(flatpickrCalendar()).to.contain('.flatpickr-second')
+      })
+    })
+  })
+
+  describe('Flatpickr options with time Disabled', function() {
+    context('add multiMonth 2 option', function() {
+      it('can see two months', async function() {
+        addFlatpickrOption('EnableTime', 'false', controller)
+        addFlatpickrOption('ShowMonths', 2, controller)
+        await nextFrame()
+
+        expect(flatpickrCalendar()).to.have.class('multiMonth')
+      })
+    })
+
+    context('add AltFormat %Y-%m-%d option', function() {
+      it('can see new input field', async function() {
+        addFlatpickrOption('AltFormat', '%B %d, %Y', controller)
+        addFlatpickrOption('DefaultDate', '2018-10-15', controller)
+        await nextFrame()
+
+        expect(controller.selectedDateElemTarget).to.have.attribute('aria-label', 'October 15, 2018')
+        expect(controller.inputTarget).to.have.value('2018-10-15')
+      })
+
+      it('base dateFormat remains the same', function() {
+        expect(controller.fp.config.dateFormat).to.equal('Y-m-d')
+      })
+    })
+
+    context('add range mode', function() {
+      it('calendar has the range class', function() {
+        addFlatpickrOption('Mode', 'range', controller)
+        expect(flatpickrCalendar()).to.have.class('rangeMode')
+      })
+    })
+  })
+
+  describe('Flatpickr disable dates options', function() {
     before(async function() {
-      await addFlatpickrOption("EnableTime", "false", controller);
-    });
+      controller.fp.setDate('2018-10-15')
+      addFlatpickrOption('DateFormat', 'Y-m-d', controller)
+      addFlatpickrOption('DefaultDate', '2018-10-15', controller)
+      await nextFrame()
+    })
 
-    after(async function() {
-      await resetDataAttributes(controller);
-    });
+    context('set min date', function() {
+      it('dates before min date are disabled', async function() {
+        addFlatpickrOption('MinDate', '2018-10-03', controller)
+        await nextFrame()
 
-    context("add multiMonth 2 option", function() {
-      it("can see two months", async function() {
-        await addFlatpickrOption("ShowMonths", 2, controller);
-        expect(flatpickrCalendar()).to.have.class("multiMonth");
-      });
-    });
+        expect(document.querySelector('span[aria-label="October 2, 2018"]')).to.have.class('flatpickr-disabled')
+      })
+    })
 
-    context("add AltInput true option", function() {
-      it("can see new input field", async function() {
-        expect(fixture.el).not.to.contain("input[type=hidden].flatpickr-input");
-        await addFlatpickrOption("AltInput", "true", controller);
-        expect(fixture.el).to.contain("input[type=hidden].flatpickr-input");
-        expect(fixture.el).to.contain("input[readonly].flatpickr-input");
-      });
-    });
+    context('disable dates', function() {
+      it('disabled individual dates are disabled', async function() {
+        addFlatpickrOption('Disable', ['2018-10-14', '2018-10-17'], controller)
+        await nextFrame()
 
-    context("add AltFormat %Y-%m-%d option", function() {
-      it("can see new input field", async function() {
-        await addFlatpickrOption("AltFormat", "%B %d, %Y", controller);
-        controller.fp.setDate("2018-10-15");
-        expect(
-          calendarQuerySelector(".flatpickr-day.selected")
-        ).to.have.attribute("aria-label", "October 15, 2018");
+        expect(document.querySelector('span[aria-label="October 14, 2018"]')).to.have.class('flatpickr-disabled')
+      })
 
-        expect(
-          fixtureQuerySelector("input[type=hidden].flatpickr-input")
-        ).to.have.value("2018-10-15");
-        expect(controller.fp.config.dateFormat).to.equal("Y-m-d");
-      });
-      it("base dateFormat remains the same", async function() {
-        expect(controller.fp.config.dateFormat).to.equal("Y-m-d");
-      });
-    });
+      it('add disable days of week all sundays are disabled', async function() {
+        addFlatpickrOption('DisableDaysOfWeek', [6], controller)
+        await nextFrame()
 
-    context("add range mode", function() {
-      it("calendar has the range class", async function() {
-        await addFlatpickrOption("Mode", "range", controller);
-        expect(flatpickrCalendar()).to.have.class("rangeMode");
-      });
-    });
-  });
+        expect(document.querySelector('span[aria-label="October 6, 2018"]')).to.have.class('flatpickr-disabled')
+        expect(document.querySelector('span[aria-label="October 13, 2018"]')).to.have.class('flatpickr-disabled')
+      })
+    })
+  })
 
-  describe("Flatpickr dates options", function() {
+  describe('Flatpickr enable dates options', function() {
     before(async function() {
-      await addFlatpickrOption("DateFormat", "Y-m-d", controller);
-    });
+      controller.fp.setDate('2018-10-15')
+      addFlatpickrOption('DateFormat', 'Y-m-d', controller)
+      addFlatpickrOption('DefaultDate', '2018-10-15', controller)
+      await nextFrame()
+    })
 
-    context("set min date", function() {
-      it("dates before min date are disabled", async function() {
-        controller.fp.setDate("2018-10-15");
-        await addFlatpickrOption("MinDate", "2018-10-14", controller);
-        expect(
-          document.querySelector('span[aria-label="October 6, 2018"]')
-        ).to.have.class("disabled");
-      });
-    });
+    it('enable individual dates are enabled', async function() {
+      addFlatpickrOption('Enable', ['2018-10-14', '2018-10-17'], controller)
+      addFlatpickrOption('DefaultDate', '2018-10-14', controller)
+      await nextFrame()
 
-    context("disable dates", function() {
-      it("disabled dates are disabled", async function() {
-        await addFlatpickrOption(
-          "Disable",
-          ["2018-10-14", "2018-10-17"],
-          controller
-        );
+      expect(document.querySelector('span[aria-label="October 14, 2018"]')).not.to.have.class('flatpickr-disabled')
+    })
 
-        expect(
-          document.querySelector('span[aria-label="October 14, 2018"]')
-        ).to.have.class("disabled");
-      });
-    });
-  });
-});
+    it('add enable days of week only mondays are enabled', async function() {
+      addFlatpickrOption('EnableDaysOfWeek', [1], controller)
+      await nextFrame()
+
+      expect(document.querySelector('span[aria-label="October 8, 2018"]')).not.to.have.class('flatpickr-disabled')
+      expect(document.querySelector('span[aria-label="October 15, 2018"]')).not.to.have.class('flatpickr-disabled')
+      expect(document.querySelector('span[aria-label="October 14, 2018"]')).not.to.have.class('flatpickr-disabled')
+    })
+  })
+
+  describe('Flatpickr enable days of week only', function() {
+    it('add enable days of week', async function() {
+      addFlatpickrOption('EnableDaysOfWeek', [1], controller)
+      await nextFrame()
+
+      const enabledDays = controller.daysTarget.querySelectorAll('span.flatpickr-day:not(.flatpickr-disabled)')
+      expect(enabledDays.length).to.be.within(4, 6)
+    })
+  })
+
+  describe('Flatpickr disable days of week only', function() {
+    it('add disable days of week', async function() {
+      addFlatpickrOption('DisableDaysOfWeek', [1], controller)
+      await nextFrame()
+
+      const disabledDays = controller.daysTarget.querySelectorAll('span.flatpickr-day.flatpickr-disabled')
+      expect(disabledDays.length).to.be.within(4, 6)
+    })
+  })
+
+  describe('Flatpickr disable days test with invalid entries', function() {
+    context("don't provide an array", function() {
+      it('it still work and no days are disabled', function() {
+        addFlatpickrOption('DisableDaysOfWeek', 1, controller)
+
+        const disabledDays = controller.daysTarget.querySelectorAll('span.flatpickr-day.flatpickr-disabled')
+        expect(controller).to.exist
+        expect(disabledDays.length).to.equal(0)
+      })
+    })
+
+    context('provide an array of string', function() {
+      it('it is the same as an array of integer', function() {
+        addFlatpickrOption('DisableDaysOfWeek', ['1'], controller)
+
+        const disabledDays = controller.daysTarget.querySelectorAll('span.flatpickr-day.flatpickr-disabled')
+        expect(controller).to.exist
+        expect(disabledDays.length).to.be.within(4, 6)
+      })
+    })
+  })
+
+  describe('Flatpickr enable days test with invalid entries', function() {
+    context("don't provide an array", function() {
+      it('it still work and all days are disabled', function() {
+        addFlatpickrOption('EnableDaysOfWeek', 1, controller)
+
+        const disabledDays = controller.daysTarget.querySelectorAll('span.flatpickr-day.flatpickr-disabled')
+        expect(controller).to.exist
+        expect(disabledDays.length).to.be.at.least(30)
+      })
+    })
+  })
+})

spec/flatpickr_controller_targets_spec.js

@@ -1,43 +0,44 @@
-import Flatpickr from "../src/stimulus-flatpickr";
-import "flatpickr/dist/flatpickr.css";
-import {
-  registerApplication,
-  addFlatpickrOption,
-  resetDataAttributes
-} from "./helpers";
-import chai, { expect } from "chai";
-import chaiDom from "chai-dom";
-var controller;
+import StimulusFlatpickr from './controllers/flatpickr_controller'
+import { Application } from 'stimulus'
+import 'flatpickr/dist/flatpickr.css'
+import { nextFrame } from './helpers'
+import chai, { expect } from 'chai'
+import chaiDom from 'chai-dom'
+var controller
+const application = Application.start()
 
 const elementsSelectors = {
-  calendarContainer: ".flatpickr-calendar",
-  currentYearElement: ".cur-year",
-  days: ".dayContainer",
-  daysContainer: ".flatpickr-days",
-  input: ".flatpickr-input",
-  monthNav: ".flatpickr-months",
-  nextMonthNav: ".flatpickr-next-month",
-  prevMonthNav: ".flatpickr-prev-month",
-  selectedDateElem: ".flatpickr-day.selected",
-  rContainer: ".flatpickr-rContainer",
-  todayDateElem: ".flatpickr-day.today",
-  weekdayContainer: ".flatpickr-weekdays"
-};
+  calendarContainer: '.flatpickr-calendar',
+  currentYearElement: '.cur-year',
+  days: '.dayContainer',
+  daysContainer: '.flatpickr-days',
+  input: '.flatpickr-input',
+  monthNav: '.flatpickr-months',
+  nextMonthNav: '.flatpickr-next-month',
+  prevMonthNav: '.flatpickr-prev-month',
+  rContainer: '.flatpickr-rContainer',
+  todayDateElem: '.flatpickr-day.today',
+  weekdayContainer: '.flatpickr-weekdays'
+}
 
-chai.use(chaiDom);
+chai.use(chaiDom)
 
-describe("Flatpickr Controller Target tests", function() {
-  before("initialize controller", async function() {
-    fixture.load("index.html");
-    controller = await registerApplication("flatpickr", Flatpickr);
-    await addFlatpickrOption("DefaultDate", new Date(), controller);
-  });
+describe('Flatpickr Controller Target tests', function() {
+  before('initialize controller', async function() {
+    fixture.load('index.html')
+    application.register('datepicker', StimulusFlatpickr)
+    await nextFrame()
+    controller = application.controllers[0]
+    // controller = await registerController('flatpickr', Flatpickr)
+    // await addFlatpickrOption('DefaultDate', new Date(), controller)
+    // await Promise.resolve()
+  })
 
-  Object.keys(elementsSelectors).forEach(element => {
-    const selector = elementsSelectors[element];
+  Object.keys(elementsSelectors).forEach((element) => {
+    const selector = elementsSelectors[element]
     it(`${element}Target`, async function() {
-      expect(controller[`${element}Target`]).to.exist;
-      expect(controller[`${element}Target`]).to.match(selector);
-    });
-  });
-});
+      expect(controller[`${element}Target`]).to.match(selector)
+      expect(controller[`${element}Target`]).to.exist
+    })
+  })
+})

spec/helpers.js

@@ -1,61 +0,59 @@
-import { Application } from "stimulus";
+import { Application } from 'stimulus'
 
-async function registerApplication(element, controllerType) {
-  const stimulusApp = Application.start();
-  stimulusApp.register(element, controllerType);
-  return new Promise(resolve =>
+const nextFrame = async () => {
+  return new Promise((resolve) => requestAnimationFrame(resolve))
+}
+
+async function registerController(element, controllerType) {
+  const stimulusApp = Application.start()
+  stimulusApp.register(element, controllerType)
+
+  return new Promise((resolve) =>
     setTimeout(() => {
-      resolve(stimulusApp.controllers[0]);
-    }, 1)
-  );
+      resolve(stimulusApp.controllers[0])
+    })
+  )
 }
 
 function flatpickrCalendar() {
-  return document.querySelector(".flatpickr-calendar");
+  return document.querySelector('.flatpickr-calendar')
 }
 
-async function addFlatpickrOption(option, value, controller) {
-  return new Promise(resolve => {
-    const flatpickr = fixture.el.querySelector("#datepicker");
-    flatpickr.dataset[`flatpickr${option}`] =
-      typeof value === "object" ? JSON.stringify(value) : value;
-    controller.connect();
-
-    return setTimeout(() => {
-      resolve(flatpickr);
-    });
-  });
+function addFlatpickrOption(option, value, controller) {
+  const flatpickr = fixture.el.querySelector('#datepicker')
+  flatpickr.dataset[`datepicker${option}`] = typeof value === 'object' ? JSON.stringify(value) : value
+  controller.connect()
+  // await nextFrame()
 }
 
 function fixtureQuerySelector(selector) {
-  return fixture.el.querySelector(`${selector}`);
+  return fixture.el.querySelector(selector)
 }
 
 function calendarQuerySelector(selector) {
-  return document.querySelector(`.flatpickr-calendar ${selector}`);
+  return document.querySelector(`.flatpickr-calendar ${selector}`)
 }
 
-async function resetDataAttributes(controller) {
-  const attributes = controller.element.dataset;
-  Object.keys(attributes).forEach(attribute => {
-    delete controller.element.dataset[attribute];
-  });
-  controller.element.dataset.controller = "flatpickr";
-  controller.connect();
-  return Promise.resolve();
+function resetDataAttributes(controller) {
+  const attributes = controller.element.dataset
+  Object.keys(attributes).forEach((attribute) => {
+    delete controller.element.dataset[attribute]
+  })
+  controller.element.dataset.controller = 'flatpickr'
+  controller.connect()
 }
 
-function beforeEachSuite(fn) {
-  before(function() {
-    const suites = this.test.parent.suites || [];
-    suites.forEach(s => {
-      s.beforeAll(fn);
-      const hook = s._beforeAll.pop();
-      s._beforeAll.unshift(hook);
-    });
-  });
+function beforeEachSuite(title, fn) {
+  before(title, function() {
+    const suites = this.test.parent.suites || []
+    suites.forEach((s) => {
+      s.beforeAll(fn)
+      const hook = s._beforeAll.pop()
+      s._beforeAll.unshift(hook)
+    })
+  })
 }
 
 export {
-  registerApplication,
+  registerController,
   fixtureQuerySelector,
@@ -66,3 +64,4 @@ calendarQuerySelector,
   resetDataAttributes,
-  beforeEachSuite
-};
+  beforeEachSuite,
+  nextFrame
+}

spec/mapping_spec.js

@@ -1,67 +0,63 @@
-import { expect } from "chai";
-import { convertDateFormat } from "../src/strftime_mapping";
+import { convertDateFormat } from '../src/strftime_mapping'
+import { expect } from 'chai'
 
 const testDateFormats = {
-  "%Y-%m-%d": "Y-m-d",
-  "%B %d, %Y": "F d, Y",
-  "%b %d": "M d",
-  "%d/%m/%Y": "d/m/Y",
-  "%e %b": "j M",
-  "%e %B %Y": "j F Y"
-};
+  '%Y-%m-%d': 'Y-m-d',
+  '%B %d, %Y': 'F d, Y',
+  '%b %d': 'M d',
+  '%d/%m/%Y': 'd/m/Y',
+  '%e %b': 'j M',
+  '%e %B %Y': 'j F Y'
+}
 
 const mapping = {
-  "%Y": "Y",
-  "%y": "y",
-  "%C": "Y",
-  "%m": "m",
-  "%-m": "n",
-  "%_m": "n",
-  "%B": "F",
-  "%^B": "F",
-  "%b": "M",
-  "%^b": "M",
-  "%h": "M",
-  "%^h": "M",
-  "%d": "d",
-  "%-d": "j",
-  "%e": "j",
-  "%H": "H",
-  "%k": "H",
-  "%I": "h",
-  "%l": "h",
-  "%P": "K",
-  "%p": "K",
-  "%M": "i",
-  "%S": "S",
-  "%A": "l",
-  "%a": "D",
-  "%w": "w"
-};
+  '%Y': 'Y',
+  '%y': 'y',
+  '%C': 'Y',
+  '%m': 'm',
+  '%-m': 'n',
+  '%_m': 'n',
+  '%B': 'F',
+  '%^B': 'F',
+  '%b': 'M',
+  '%^b': 'M',
+  '%h': 'M',
+  '%^h': 'M',
+  '%d': 'd',
+  '%-d': 'j',
+  '%e': 'j',
+  '%H': 'H',
+  '%k': 'H',
+  '%I': 'h',
+  '%l': 'h',
+  '%P': 'K',
+  '%p': 'K',
+  '%M': 'i',
+  '%S': 'S',
+  '%A': 'l',
+  '%a': 'D',
+  '%w': 'w'
+}
 
-describe("strftime date conversion to Flatpickr tokens", function() {
-  describe("convertDateFormat", function() {
-    it("random string without % should not be changed", function() {
-      const testString = "eznlen =:=:;:::; =:;fzlefnlzief &é&ééçà(!345345345)";
-      expect(convertDateFormat(testString)).to.equal(testString);
-    });
+describe('strftime date conversion to Flatpickr tokens', function() {
+  context('convertDateFormat', function() {
+    it('random string without % should not be changed', function() {
+      const testString = 'eznlen =:=:;:::; =:;fzlefnlzief &é&ééçà(!345345345)'
+      expect(convertDateFormat(testString)).to.equal(testString)
+    })
 
-    Object.keys(testDateFormats).forEach(strftimeDateFormat => {
-      const flatpickrDateFormat = testDateFormats[strftimeDateFormat];
+    Object.keys(testDateFormats).forEach((strftimeDateFormat) => {
+      const flatpickrDateFormat = testDateFormats[strftimeDateFormat]
       it(`strftime format ${strftimeDateFormat} to be converted to ${flatpickrDateFormat}`, function() {
-        expect(convertDateFormat(strftimeDateFormat)).to.equal(
-          flatpickrDateFormat
-        );
-      });
-    });
+        expect(convertDateFormat(strftimeDateFormat)).to.equal(flatpickrDateFormat)
+      })
+    })
 
-    it(`strftime format to be converted to `, function() {
-      Object.keys(mapping).forEach(strftimeDateFormat => {
-        const flatpickrDateFormat = mapping[strftimeDateFormat];
-        expect(convertDateFormat(strftimeDateFormat)).to.equal(
-          flatpickrDateFormat
-        );
-      });
-    });
-  });
-});
+    it('strftime format to be converted to', function() {
+      Object.keys(mapping).forEach((strftimeDateFormat) => {
+        const flatpickrDateFormat = mapping[strftimeDateFormat]
+        expect(convertDateFormat(strftimeDateFormat)).to.equal(flatpickrDateFormat)
+      })
+    })
+  })
+})

src/config_options.js

 const booleanOptions = [
-  "allowInput",
-  "altInput",
-  "animate",
-  "clickOpens",
-  "closeOnSelect",
-  "disableMobile",
-  "enableSeconds",
-  "enableTime",
-  "inline",
-  "noCalendar",
-  "shorthandCurrentMonth",
-  "static",
-  "time_24hr",
-  "weekNumbers",
-  "wrap"
-];
+  'allowInput',
+  'altInput',
+  'animate',
+  'clickOpens',
+  'closeOnSelect',
+  'disableMobile',
+  'enableSeconds',
+  'enableTime',
+  'inline',
+  'noCalendar',
+  'shorthandCurrentMonth',
+  'static',
+  'time_24hr',
+  'weekNumbers',
+  'wrap'
+]
 
-const stringOptions = [
-  "altInputClass",
-  "conjunction",
-  "defaultDate",
-  "mode",
-  "nextArrow",
-  "position",
-  "prevArrow"
-];
+const stringOptions = ['altInputClass', 'conjunction', 'defaultDate', 'mode', 'nextArrow', 'position', 'prevArrow']
 
 const numberOptions = [
-  "defaultHour",
-  "defaultMinute",
-  "defaultSeconds",
-  "hourIncrement",
-  "minuteIncrement",
-  "showMonths"
-];
+  'defaultHour',
+  'defaultMinute',
+  'defaultSeconds',
+  'hourIncrement',
+  'minuteIncrement',
+  'showMonths'
+]
 
-const arrayOptions = ["disable", "enable"];
+const arrayOptions = ['disable', 'enable', 'disableDaysOfWeek', 'enableDaysOfWeek']
 
-const dateOptions = ["maxDate", "minDate", "maxTime", "minTime", "now"];
+const dateOptions = ['maxDate', 'minDate', 'maxTime', 'minTime', 'now']
 
-export const dateFormats = ["altFormat", "ariaDateFormat", "dateFormat"];
+export const dateFormats = ['altFormat', 'ariaDateFormat', 'dateFormat']
 
@@ -50,2 +42,2 @@ export const options = {
   number: numberOptions
-};
+}

src/elements.js

 export const elements = [
-  "calendarContainer",
-  "currentYearElement",
-  "days",
-  "daysContainer",
-  "input",
-  "nextMonthNav",
-  "monthNav",
-  "prevMonthNav",
-  "rContainer",
-  "selectedDateElem",
-  "todayDateElem",
-  "weekdayContainer"
-];
+  'calendarContainer',
+  'currentYearElement',
+  'days',
+  'daysContainer',
+  'input',
+  'nextMonthNav',
+  'monthNav',
+  'prevMonthNav',
+  'rContainer',
+  'selectedDateElem',
+  'todayDateElem',
+  'weekdayContainer'
+]

src/events.js

@@ -1,10 +0,1 @@
-export const events = [
-  "change",
-  "open",
-  "close",
-  "monthChange",
-  "yearChange",
-  "ready",
-  "valueUpdate",
-  "dayCreate"
-];
+export const events = ['change', 'open', 'close', 'monthChange', 'yearChange', 'ready', 'valueUpdate', 'dayCreate']

src/strftime_mapping.js

 export const mapping = {
-  "%Y": "Y",
-  "%y": "y",
-  "%C": "Y",
-  "%m": "m",
-  "%-m": "n",
-  "%_m": "n",
-  "%B": "F",
-  "%^B": "F",
-  "%b": "M",
-  "%^b": "M",
-  "%h": "M",
-  "%^h": "M",
-  "%d": "d",
-  "%-d": "j",
-  "%e": "j",
-  "%H": "H",
-  "%k": "H",
-  "%I": "h",
-  "%l": "h",
-  "%P": "K",
-  "%p": "K",
-  "%M": "i",
-  "%S": "S",
-  "%A": "l",
-  "%a": "D",
-  "%w": "w"
-};
+  '%Y': 'Y',
+  '%y': 'y',
+  '%C': 'Y',
+  '%m': 'm',
+  '%-m': 'n',
+  '%_m': 'n',
+  '%B': 'F',
+  '%^B': 'F',
+  '%b': 'M',
+  '%^b': 'M',
+  '%h': 'M',
+  '%^h': 'M',
+  '%d': 'd',
+  '%-d': 'j',
+  '%e': 'j',
+  '%H': 'H',
+  '%k': 'H',
+  '%I': 'h',
+  '%l': 'h',
+  '%P': 'K',
+  '%p': 'K',
+  '%M': 'i',
+  '%S': 'S',
+  '%A': 'l',
+  '%a': 'D',
+  '%w': 'w'
+}
 
 const strftimeRegex = new RegExp(
   Object.keys(mapping)
-    .join("|")
-    .replace(new RegExp("\\^", "g"), "\\^"),
-  "g"
-);
+    .join('|')
+    .replace(new RegExp('\\^', 'g'), '\\^'),
+  'g'
+)
 
-export const convertDateFormat = format => {
-  return format.replace(strftimeRegex, match => {
-    return mapping[match];
-  });
-};
+export const convertDateFormat = (format) => {
+  return format.replace(strftimeRegex, (match) => {
+    return mapping[match]
+  })
+}

New alerts

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

Found 1 instance in 1 package

No v1

Quality

Package is not semver >=1. This means it is not stable and does not support ^ ranges.

Found 1 instance in 1 package

Improved metrics

Number of lines in readme file

420

increased by11.11%

Worsened metrics

Total package byte prevSize

319116

decreased by-48.29%

Dev dependency count

44

increased by12.82%

Number of package files

49

decreased by-22.22%

Lines of code

2109

decreased by-2.32%

Number of low quality alerts

2

increased by100%

Number of medium supply chain risk alerts

1

increased byInfinity%

Dependency changes

• Updatedflatpickr@>=4.6.0

• Updatedstimulus@^1.1.1