Add pikaday demo with ProvidePlugin configuration

app/javascript/application/datepicker.js

@@ -0,0 +1,41 @@
+import "pikaday/css/pikaday.css"
+import Pikaday from "pikaday"
+
+export default class Datepicker {
+  constructor(element, options) {
+    if (options == null) { options = {} }
+
+    // Store DOM element for reference
+    this.element = element
+
+    // Do not re-run on elements that already have datepickers
+    if (this.element.datepicker === undefined) {
+      options = Object.assign({},
+        this.defaultOptions(),
+        options
+      )
+
+      const picker = new Pikaday(options)
+
+      // Store picker on element for reference
+      this.element.datepicker = picker
+
+      return picker
+    } else {
+      console.log("Datepicker already attached")
+      return
+    }
+  }
+
+  // Overridden by `options` in constructor
+  defaultOptions() {
+    return {
+      field: this.element,
+      format: "M/D/YYYY",
+      bound: true,
+      keyboardInput: false,
+      showDaysInNextAndPreviousMonths: true,
+      position: 'bottom left'
+    }
+  }
+}

app/javascript/application/form.js

@@ -0,0 +1,13 @@
+// Normally, I would use the following import:
+//
+// import Datepicker from 'datepicker'
+//
+// but this app also demonstrates how to use the
+// ProvidePlugin to make Datepicker available
+// without imports
+
+document.addEventListener('DOMContentLoaded', () => {
+  document.querySelectorAll('input[data-datepicker]').forEach((el) => {
+    new Datepicker(el)
+  })
+})

app/javascript/application/index.js

@@ -0,0 +1,2 @@
+import "./datepicker"
+import "./form"

app/javascript/packs/application.js

@@ -9,6 +9,7 @@ import ujs from "@rails/ujs"
 
 ujs.start()
 
+import "../application"
 
 // Uncomment to copy all static images under ../images to the output folder and reference
 // them with the image_pack_tag helper in views (e.g <%= image_pack_tag 'rails.png' %>)

app/views/welcome/index.html.erb

@@ -1,2 +1,4 @@
-<h1>Welcome#index</h1>
-<p>Find me in app/views/welcome/index.html.erb</p>
+<h1>Pikaday demo</h1>
+<div>
+  <form action=""><input type="text" data-datepicker></form>
+</div>

config/webpack/environment.js

@@ -1,3 +1,9 @@
 const { environment } = require('@rails/webpacker')
+const webpack = require('webpack')
+const {resolve} = require('path');
+
+environment.plugins.append('Provide', new webpack.ProvidePlugin({
+  Datepicker: [resolve('app/javascript/application/datepicker'), 'default']
+}))
 
 module.exports = environment

package.json

@@ -4,7 +4,8 @@
   "dependencies": {
     "@rails/actioncable": "^6.0.0-alpha",
     "@rails/ujs": "^6.0.0-alpha",
-    "@rails/webpacker": "^4.0.7"
+    "@rails/webpacker": "^4.0.7",
+    "pikaday": "^1.8.0"
   },
   "version": "0.1.0",
   "devDependencies": {

yarn.lock

@@ -4831,6 +4831,11 @@ pify@^4.0.1:
   resolved "https://registry.yarnpkg.com/pify/-/pify-4.0.1.tgz#4b2cd25c50d598735c50292224fd8c6df41e3231"
   integrity sha512-uB80kBFb/tfd68bVleG9T5GGsGPjJrLAUpR5PZIrhBnIaRTQRjqdJSsIKkOP6OAIFbj7GOrcudc5pNjZ+geV2g==
 
+pikaday@^1.8.0:
+  version "1.8.0"
+  resolved "https://registry.yarnpkg.com/pikaday/-/pikaday-1.8.0.tgz#ce930e257042e852e6aadee1115e01554b2d71c5"
+  integrity sha512-SgGxMYX0NHj9oQnMaSyAipr2gOrbB4Lfs/TJTb6H6hRHs39/5c5VZi73Q8hr53+vWjdn6HzkWcj8Vtl3c9ziaA==
+
 pinkie-promise@^2.0.0:
   version "2.0.1"
   resolved "https://registry.yarnpkg.com/pinkie-promise/-/pinkie-promise-2.0.1.tgz#2135d6dfa7a358c069ac9b178776288228450ffa"