bulma-calendar date picker

app.js

@@ -60,9 +60,10 @@ if (urlPrefix !== "") {
     debugApp("urlPrefix = " + urlPrefix);
 }
 app.use(urlPrefix, express.static(path.join("public")));
-app.use(urlPrefix + "/lib/fa", express.static(path.join("node_modules", "@fortawesome", "fontawesome-free")));
+app.use(urlPrefix + "/lib/bulma-calendar", express.static(path.join("node_modules", "bulma-calendar", "dist")));
-app.use(urlPrefix + "/lib/cityssm-bulma-webapp-js", express.static(path.join("node_modules", "@cityssm", "bulma-webapp-js")));
 app.use(urlPrefix + "/lib/cityssm-bulma-js", express.static(path.join("node_modules", "@cityssm", "bulma-js", "dist")));
+app.use(urlPrefix + "/lib/cityssm-bulma-webapp-js", express.static(path.join("node_modules", "@cityssm", "bulma-webapp-js")));
+app.use(urlPrefix + "/lib/fa", express.static(path.join("node_modules", "@fortawesome", "fontawesome-free")));
 app.use(urlPrefix + "/lib/leaflet", express.static(path.join("node_modules", "leaflet", "dist")));
 app.use(urlPrefix + "/lib/randomcolor", express.static(path.join("node_modules", "randomcolor")));
 const sessionCookieName = configFunctions.getProperty("session.cookieName");

app.ts

@@ -107,10 +107,13 @@ if (urlPrefix !== "") {
 app.use(urlPrefix, express.static(path.join("public")));
 
 app.use(
-    urlPrefix + "/lib/fa",
+    urlPrefix + "/lib/bulma-calendar",
-    express.static(
+    express.static(path.join("node_modules", "bulma-calendar", "dist"))
-        path.join("node_modules", "@fortawesome", "fontawesome-free")
+);
-    )
+
+app.use(
+    urlPrefix + "/lib/cityssm-bulma-js",
+    express.static(path.join("node_modules", "@cityssm", "bulma-js", "dist"))
 );
 
 app.use(
@@ -119,8 +122,10 @@ app.use(
 );
 
 app.use(
-    urlPrefix + "/lib/cityssm-bulma-js",
+    urlPrefix + "/lib/fa",
-    express.static(path.join("node_modules", "@cityssm", "bulma-js", "dist"))
+    express.static(
+        path.join("node_modules", "@fortawesome", "fontawesome-free")
+    )
 );
 
 app.use(

package-lock.json

@@ -17,6 +17,7 @@
                 "@types/randomcolor": "^0.5.6",
                 "activedirectory2": "^2.1.0",
                 "better-sqlite3": "^7.6.2",
+                "bulma-calendar": "^6.1.18",
                 "camelcase": "^7.0.0",
                 "compression": "^1.7.4",
                 "cookie-parser": "^1.4.6",
@@ -36,8 +37,11 @@
                 "session-file-store": "^1.5.0"
             },
             "devDependencies": {
+                "@cityssm/bulma-a11y": "^0.4.0",
+                "@cityssm/bulma-sticky-table": "^2.0.1",
                 "@cityssm/bulma-webapp-css": "^0.12.0",
                 "@cityssm/mssql-multi-pool": "^2.1.6",
+                "@cityssm/simple-fa5-checkbox": "^0.2.1",
                 "@types/activedirectory2": "^1.2.3",
                 "@types/better-sqlite3": "^7.6.0",
                 "@types/compression": "^1.7.2",
@@ -60,6 +64,11 @@
                 "@typescript-eslint/eslint-plugin": "^5.38.0",
                 "@typescript-eslint/parser": "^5.38.0",
                 "bulma": "^0.9.4",
+                "bulma-divider": "^0.2.0",
+                "bulma-helpers": "^0.4.3",
+                "bulma-steps": "^2.2.1",
+                "bulma-switch": "^2.0.4",
+                "bulma-tooltip": "^3.0.2",
                 "cypress": "^10.8.0",
                 "cypress-axe": "^1.0.0",
                 "eslint": "^8.23.1",
@@ -524,6 +533,12 @@
                 "node": ">=4"
             }
         },
+        "node_modules/@cityssm/bulma-a11y": {
+            "version": "0.4.0",
+            "resolved": "https://registry.npmjs.org/@cityssm/bulma-a11y/-/bulma-a11y-0.4.0.tgz",
+            "integrity": "sha512-IZU3D6ZUPvWPVRo4uQ4jDeKZYqiPOQS38MBPu5qPsEUT9QJuXavyeE46nb0EDtjtqmv1dMQjGKa7calA/01ofA==",
+            "dev": true
+        },
         "node_modules/@cityssm/bulma-js": {
             "version": "0.3.3",
             "resolved": "https://registry.npmjs.org/@cityssm/bulma-js/-/bulma-js-0.3.3.tgz",
@@ -532,6 +547,12 @@
                 "node": "^12.20.0 || ^14.13.1 || >=16.0.0"
             }
         },
+        "node_modules/@cityssm/bulma-sticky-table": {
+            "version": "2.0.1",
+            "resolved": "https://registry.npmjs.org/@cityssm/bulma-sticky-table/-/bulma-sticky-table-2.0.1.tgz",
+            "integrity": "sha512-pu4L7OKC0vu+SASbeJTNs/x7XTm4bw/ZK6rHk8usF4FQdsfvjTjb8xdOHE09FZ5yCfekTFH6/TwcwMo2iOTO+A==",
+            "dev": true
+        },
         "node_modules/@cityssm/bulma-webapp-css": {
             "version": "0.12.0",
             "resolved": "https://registry.npmjs.org/@cityssm/bulma-webapp-css/-/bulma-webapp-css-0.12.0.tgz",
@@ -587,6 +608,12 @@
             "resolved": "https://registry.npmjs.org/@cityssm/random-words/-/random-words-1.2.1.tgz",
             "integrity": "sha512-mAnB+qNnTGDjMGdCOLURQatk2BrxRY+FHKTaBOIAF/Rb09BP9clalRt+903Y+rjZpzOPj/uahyF4FtY3ihbZ6w=="
         },
+        "node_modules/@cityssm/simple-fa5-checkbox": {
+            "version": "0.2.1",
+            "resolved": "https://registry.npmjs.org/@cityssm/simple-fa5-checkbox/-/simple-fa5-checkbox-0.2.1.tgz",
+            "integrity": "sha512-0/jrhjpjbazae/qvEa2WmzzmAtQ0lLHb7NrNcPvqfxrbbFhKuGRkF/4LvhofiXL/oS+n8Tex/tu97cylvj/UMA==",
+            "dev": true
+        },
         "node_modules/@cityssm/simple-password-generator": {
             "version": "2.1.2",
             "resolved": "https://registry.npmjs.org/@cityssm/simple-password-generator/-/simple-password-generator-2.1.2.tgz",
@@ -2337,7 +2364,47 @@
         "node_modules/bulma": {
             "version": "0.9.4",
             "resolved": "https://registry.npmjs.org/bulma/-/bulma-0.9.4.tgz",
-            "integrity": "sha512-86FlT5+1GrsgKbPLRRY7cGDg8fsJiP/jzTqXXVqiUZZ2aZT8uemEOHlU1CDU+TxklPEZ11HZNNWclRBBecP4CQ==",
+            "integrity": "sha512-86FlT5+1GrsgKbPLRRY7cGDg8fsJiP/jzTqXXVqiUZZ2aZT8uemEOHlU1CDU+TxklPEZ11HZNNWclRBBecP4CQ=="
+        },
+        "node_modules/bulma-calendar": {
+            "version": "6.1.18",
+            "resolved": "https://registry.npmjs.org/bulma-calendar/-/bulma-calendar-6.1.18.tgz",
+            "integrity": "sha512-7yXo7YTNxx3adrPdBBWdWEuxvowpTjJcfpRuEj7lqK52LWb79CjG9F6uKxUpB5DSguUyKflHnimRsRjjQJgZlw==",
+            "dependencies": {
+                "date-fns": "^2.21.3"
+            },
+            "peerDependencies": {
+                "bulma": "^0.9.3"
+            }
+        },
+        "node_modules/bulma-divider": {
+            "version": "0.2.0",
+            "resolved": "https://registry.npmjs.org/bulma-divider/-/bulma-divider-0.2.0.tgz",
+            "integrity": "sha512-REe3k56GECRfDaqFjC8cwLhV4RxXmV0RubuzDJqwior9wlJcdHlN0qfW0tvUX+qphikaTQegIeRuhjRIAqkjkw==",
+            "dev": true
+        },
+        "node_modules/bulma-helpers": {
+            "version": "0.4.3",
+            "resolved": "https://registry.npmjs.org/bulma-helpers/-/bulma-helpers-0.4.3.tgz",
+            "integrity": "sha512-g6Ocz9dazzPHBM7+yHEvNJ4NsUkhEriFEV7pL0U47MoVBmgT6MwS0v+w3bSAVsM1iX70cnjQIFAqj2/isnp1gA==",
+            "dev": true
+        },
+        "node_modules/bulma-steps": {
+            "version": "2.2.1",
+            "resolved": "https://registry.npmjs.org/bulma-steps/-/bulma-steps-2.2.1.tgz",
+            "integrity": "sha512-fD50xz49zPVAfsRNcwBR7rd1lgNdKrcsIXAfVMwMH9A6iDhauOTkiEJOxXj4xZuW/CI6JpV+fCgj5uIuN1lP3Q==",
+            "dev": true
+        },
+        "node_modules/bulma-switch": {
+            "version": "2.0.4",
+            "resolved": "https://registry.npmjs.org/bulma-switch/-/bulma-switch-2.0.4.tgz",
+            "integrity": "sha512-kMu4H0Pr0VjvfsnT6viRDCgptUq0Rvy7y7PX6q+IHg1xUynsjszPjhAdal5ysAlCG5HNO+5YXxeiu92qYGQolw==",
+            "dev": true
+        },
+        "node_modules/bulma-tooltip": {
+            "version": "3.0.2",
+            "resolved": "https://registry.npmjs.org/bulma-tooltip/-/bulma-tooltip-3.0.2.tgz",
+            "integrity": "sha512-CsT3APjhlZScskFg38n8HYL8oYNUHQtcu4sz6ERarxkUpBRbk9v0h/5KAvXeKapVSn2dp9l7bOGit5SECP8EWQ==",
             "dev": true
         },
         "node_modules/bytes": {
@@ -3262,6 +3329,18 @@
                 "node": ">=0.10"
             }
         },
+        "node_modules/date-fns": {
+            "version": "2.29.3",
+            "resolved": "https://registry.npmjs.org/date-fns/-/date-fns-2.29.3.tgz",
+            "integrity": "sha512-dDCnyH2WnnKusqvZZ6+jA1O51Ibt8ZMRNkDZdyAyK4YfbDwa/cEmuztzG5pk6hqlp9aSBPYcjOlktquahGwGeA==",
+            "engines": {
+                "node": ">=0.11"
+            },
+            "funding": {
+                "type": "opencollective",
+                "url": "https://opencollective.com/date-fns"
+            }
+        },
         "node_modules/dayjs": {
             "version": "1.11.5",
             "resolved": "https://registry.npmjs.org/dayjs/-/dayjs-1.11.5.tgz",
@@ -12342,11 +12421,23 @@
                 }
             }
         },
+        "@cityssm/bulma-a11y": {
+            "version": "0.4.0",
+            "resolved": "https://registry.npmjs.org/@cityssm/bulma-a11y/-/bulma-a11y-0.4.0.tgz",
+            "integrity": "sha512-IZU3D6ZUPvWPVRo4uQ4jDeKZYqiPOQS38MBPu5qPsEUT9QJuXavyeE46nb0EDtjtqmv1dMQjGKa7calA/01ofA==",
+            "dev": true
+        },
         "@cityssm/bulma-js": {
             "version": "0.3.3",
             "resolved": "https://registry.npmjs.org/@cityssm/bulma-js/-/bulma-js-0.3.3.tgz",
             "integrity": "sha512-DI6rHjTrasxu4rCgHh8A/C3+HTCH1rU+nuFj+wkxD0YxHrB7ZA6rltSKKeiNVkZbZUwoxMdeMBXxEYnIEhyCgA=="
         },
+        "@cityssm/bulma-sticky-table": {
+            "version": "2.0.1",
+            "resolved": "https://registry.npmjs.org/@cityssm/bulma-sticky-table/-/bulma-sticky-table-2.0.1.tgz",
+            "integrity": "sha512-pu4L7OKC0vu+SASbeJTNs/x7XTm4bw/ZK6rHk8usF4FQdsfvjTjb8xdOHE09FZ5yCfekTFH6/TwcwMo2iOTO+A==",
+            "dev": true
+        },
         "@cityssm/bulma-webapp-css": {
             "version": "0.12.0",
             "resolved": "https://registry.npmjs.org/@cityssm/bulma-webapp-css/-/bulma-webapp-css-0.12.0.tgz",
@@ -12393,6 +12484,12 @@
             "resolved": "https://registry.npmjs.org/@cityssm/random-words/-/random-words-1.2.1.tgz",
             "integrity": "sha512-mAnB+qNnTGDjMGdCOLURQatk2BrxRY+FHKTaBOIAF/Rb09BP9clalRt+903Y+rjZpzOPj/uahyF4FtY3ihbZ6w=="
         },
+        "@cityssm/simple-fa5-checkbox": {
+            "version": "0.2.1",
+            "resolved": "https://registry.npmjs.org/@cityssm/simple-fa5-checkbox/-/simple-fa5-checkbox-0.2.1.tgz",
+            "integrity": "sha512-0/jrhjpjbazae/qvEa2WmzzmAtQ0lLHb7NrNcPvqfxrbbFhKuGRkF/4LvhofiXL/oS+n8Tex/tu97cylvj/UMA==",
+            "dev": true
+        },
         "@cityssm/simple-password-generator": {
             "version": "2.1.2",
             "resolved": "https://registry.npmjs.org/@cityssm/simple-password-generator/-/simple-password-generator-2.1.2.tgz",
@@ -13776,7 +13873,44 @@
         "bulma": {
             "version": "0.9.4",
             "resolved": "https://registry.npmjs.org/bulma/-/bulma-0.9.4.tgz",
-            "integrity": "sha512-86FlT5+1GrsgKbPLRRY7cGDg8fsJiP/jzTqXXVqiUZZ2aZT8uemEOHlU1CDU+TxklPEZ11HZNNWclRBBecP4CQ==",
+            "integrity": "sha512-86FlT5+1GrsgKbPLRRY7cGDg8fsJiP/jzTqXXVqiUZZ2aZT8uemEOHlU1CDU+TxklPEZ11HZNNWclRBBecP4CQ=="
+        },
+        "bulma-calendar": {
+            "version": "6.1.18",
+            "resolved": "https://registry.npmjs.org/bulma-calendar/-/bulma-calendar-6.1.18.tgz",
+            "integrity": "sha512-7yXo7YTNxx3adrPdBBWdWEuxvowpTjJcfpRuEj7lqK52LWb79CjG9F6uKxUpB5DSguUyKflHnimRsRjjQJgZlw==",
+            "requires": {
+                "date-fns": "^2.21.3"
+            }
+        },
+        "bulma-divider": {
+            "version": "0.2.0",
+            "resolved": "https://registry.npmjs.org/bulma-divider/-/bulma-divider-0.2.0.tgz",
+            "integrity": "sha512-REe3k56GECRfDaqFjC8cwLhV4RxXmV0RubuzDJqwior9wlJcdHlN0qfW0tvUX+qphikaTQegIeRuhjRIAqkjkw==",
+            "dev": true
+        },
+        "bulma-helpers": {
+            "version": "0.4.3",
+            "resolved": "https://registry.npmjs.org/bulma-helpers/-/bulma-helpers-0.4.3.tgz",
+            "integrity": "sha512-g6Ocz9dazzPHBM7+yHEvNJ4NsUkhEriFEV7pL0U47MoVBmgT6MwS0v+w3bSAVsM1iX70cnjQIFAqj2/isnp1gA==",
+            "dev": true
+        },
+        "bulma-steps": {
+            "version": "2.2.1",
+            "resolved": "https://registry.npmjs.org/bulma-steps/-/bulma-steps-2.2.1.tgz",
+            "integrity": "sha512-fD50xz49zPVAfsRNcwBR7rd1lgNdKrcsIXAfVMwMH9A6iDhauOTkiEJOxXj4xZuW/CI6JpV+fCgj5uIuN1lP3Q==",
+            "dev": true
+        },
+        "bulma-switch": {
+            "version": "2.0.4",
+            "resolved": "https://registry.npmjs.org/bulma-switch/-/bulma-switch-2.0.4.tgz",
+            "integrity": "sha512-kMu4H0Pr0VjvfsnT6viRDCgptUq0Rvy7y7PX6q+IHg1xUynsjszPjhAdal5ysAlCG5HNO+5YXxeiu92qYGQolw==",
+            "dev": true
+        },
+        "bulma-tooltip": {
+            "version": "3.0.2",
+            "resolved": "https://registry.npmjs.org/bulma-tooltip/-/bulma-tooltip-3.0.2.tgz",
+            "integrity": "sha512-CsT3APjhlZScskFg38n8HYL8oYNUHQtcu4sz6ERarxkUpBRbk9v0h/5KAvXeKapVSn2dp9l7bOGit5SECP8EWQ==",
             "dev": true
         },
         "bytes": {
@@ -14491,6 +14625,11 @@
                 "assert-plus": "^1.0.0"
             }
         },
+        "date-fns": {
+            "version": "2.29.3",
+            "resolved": "https://registry.npmjs.org/date-fns/-/date-fns-2.29.3.tgz",
+            "integrity": "sha512-dDCnyH2WnnKusqvZZ6+jA1O51Ibt8ZMRNkDZdyAyK4YfbDwa/cEmuztzG5pk6hqlp9aSBPYcjOlktquahGwGeA=="
+        },
         "dayjs": {
             "version": "1.11.5",
             "resolved": "https://registry.npmjs.org/dayjs/-/dayjs-1.11.5.tgz",

package.json

@@ -41,6 +41,7 @@
         "@types/randomcolor": "^0.5.6",
         "activedirectory2": "^2.1.0",
         "better-sqlite3": "^7.6.2",
+        "bulma-calendar": "^6.1.18",
         "camelcase": "^7.0.0",
         "compression": "^1.7.4",
         "cookie-parser": "^1.4.6",
@@ -60,8 +61,11 @@
         "session-file-store": "^1.5.0"
     },
     "devDependencies": {
+        "@cityssm/bulma-a11y": "^0.4.0",
+        "@cityssm/bulma-sticky-table": "^2.0.1",
         "@cityssm/bulma-webapp-css": "^0.12.0",
         "@cityssm/mssql-multi-pool": "^2.1.6",
+        "@cityssm/simple-fa5-checkbox": "^0.2.1",
         "@types/activedirectory2": "^1.2.3",
         "@types/better-sqlite3": "^7.6.0",
         "@types/compression": "^1.7.2",
@@ -84,6 +88,11 @@
         "@typescript-eslint/eslint-plugin": "^5.38.0",
         "@typescript-eslint/parser": "^5.38.0",
         "bulma": "^0.9.4",
+        "bulma-divider": "^0.2.0",
+        "bulma-helpers": "^0.4.3",
+        "bulma-steps": "^2.2.1",
+        "bulma-switch": "^2.0.4",
+        "bulma-tooltip": "^3.0.2",
         "cypress": "^10.8.0",
         "cypress-axe": "^1.0.0",
         "eslint": "^8.23.1",

public-scss/style.scss

@@ -1,5 +1,6 @@
-@use "@cityssm/bulma-webapp-css/cityssm.css";
+@import "@cityssm/bulma-webapp-css/cityssm";
 @import "bulma/sass/utilities/derived-variables";
+@import "bulma-calendar/src/sass/index";
 
 $white: #fff;
 $black: #000;
@@ -160,3 +161,28 @@ span.button.is-static {
     pointer-events: all;
     cursor: default;
 }
+
+/*
+ * Calendar Picker
+ */
+
+.datetimepicker-dummy {
+    .datetimepicker-dummy-wrapper::before {
+        mask: unset;
+        -webkit-mask: unset;
+        background-color: transparent !important;
+    }
+
+    .datetimepicker-dummy-wrapper .datetimepicker-dummy-input:first-child {
+        text-indent: 2rem;
+    }
+
+    .datetimepicker-clear-button {
+        transform: none;
+        margin-right: 0.5rem;
+    }
+} 
+
+.datetimepicker.is-active {
+    z-index: 10;
+}

public-typescript/lotOccupancyEdit.js

@@ -54,6 +54,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
     for (const formInputElement of formInputElements) {
         formInputElement.addEventListener("change", setUnsavedChanges);
     }
+    los.initializeDatePickers(formElement);
     if (!isCreate) {
         document
             .querySelector("#button--deleteLotOccupancy")

public-typescript/lotOccupancyEdit.ts

@@ -93,6 +93,8 @@ declare const bulmaJS: BulmaJS;
         formInputElement.addEventListener("change", setUnsavedChanges);
     }
 
+    los.initializeDatePickers(formElement);
+    
     if (!isCreate) {
         document
             .querySelector("#button--deleteLotOccupancy")

public-typescript/main.js

@@ -42,6 +42,41 @@ Object.defineProperty(exports, "__esModule", { value: true });
             unlockFieldButtonElement.addEventListener("click", unlockField);
         }
     };
+    const datePickerBaseOptions = {
+        dateFormat: "yyyy-MM-dd",
+        showFooter: false,
+        color: "info"
+    };
+    const initializeDatePickers = (containerElement) => {
+        const dateElements = containerElement.querySelectorAll("input[type='date']");
+        for (const dateElement of dateElements) {
+            const datePickerOptions = Object.assign({}, datePickerBaseOptions);
+            if (dateElement.required) {
+                datePickerOptions.showClearButton = false;
+            }
+            if (dateElement.min) {
+                datePickerOptions.minDate = cityssm.dateStringToDate(dateElement.min);
+            }
+            if (dateElement.max) {
+                datePickerOptions.maxDate = cityssm.dateStringToDate(dateElement.max);
+            }
+            const cal = exports.bulmaCalendar.attach(dateElement, datePickerOptions)[0];
+            cal.on("save", () => {
+                dateElement.dispatchEvent(new Event("change"));
+            });
+            const clearButtonElement = containerElement.querySelector("#" + cal._id + " .datetimepicker-clear-button");
+            if (clearButtonElement) {
+                if (dateElement.required) {
+                    clearButtonElement.remove();
+                }
+                else {
+                    clearButtonElement.dataset.tooltip = "Clear";
+                    clearButtonElement.innerHTML =
+                        '<i class="fas fa-times" aria-hidden="true"></i>';
+                }
+            }
+        }
+    };
     const populateAliases = (containerElement) => {
         const aliasElements = containerElement.querySelectorAll(".alias");
         for (const aliasElement of aliasElements) {
@@ -50,26 +85,22 @@ Object.defineProperty(exports, "__esModule", { value: true });
                     aliasElement.textContent = exports.aliases.lot;
                     break;
                 case "lot":
-                    aliasElement.textContent =
+                    aliasElement.textContent = exports.aliases.lot.toLowerCase();
-                        exports.aliases.lot.toLowerCase();
                     break;
                 case "Occupancy":
                     aliasElement.textContent = exports.aliases.occupancy;
                     break;
                 case "occupancy":
-                    aliasElement.textContent =
+                    aliasElement.textContent = exports.aliases.occupancy.toLowerCase();
-                        exports.aliases.occupancy.toLowerCase();
                     break;
                 case "Occupant":
                     aliasElement.textContent = exports.aliases.occupant;
                     break;
                 case "occupant":
-                    aliasElement.textContent =
+                    aliasElement.textContent = exports.aliases.occupant.toLowerCase();
-                        exports.aliases.occupant.toLowerCase();
                     break;
                 case "ExternalReceiptNumber":
-                    aliasElement.textContent =
+                    aliasElement.textContent = exports.aliases.externalReceiptNumber;
-                        exports.aliases.externalReceiptNumber;
                     break;
             }
         }
@@ -90,6 +121,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
     const los = {
         highlightMap,
         initializeUnlockFieldButtons,
+        initializeDatePickers,
         populateAliases,
         getRandomColor
     };

public-typescript/main.ts

@@ -1,6 +1,10 @@
 /* eslint-disable unicorn/prefer-module */
 
 import type * as globalTypes from "../types/globalTypes";
+import type { Options as BulmaCalendarOptions } from "bulma-calendar";
+import type { cityssmGlobal } from "@cityssm/bulma-webapp-js/src/types";
+
+declare const cityssm: cityssmGlobal;
 
 (() => {
     const highlightMap = (
@@ -15,9 +19,7 @@ import type * as globalTypes from "../types/globalTypes";
 
         // eslint-disable-next-line no-constant-condition
         while (true) {
-            svgElementToHighlight = mapContainerElement.querySelector(
+            svgElementToHighlight = mapContainerElement.querySelector("#" + svgId);
-                "#" + svgId
-            );
 
             if (svgElementToHighlight || !svgId.includes("-")) {
                 break;
@@ -30,13 +32,9 @@ import type * as globalTypes from "../types/globalTypes";
             // eslint-disable-next-line unicorn/no-null
             svgElementToHighlight.style.fill = null;
 
-            svgElementToHighlight.classList.add(
+            svgElementToHighlight.classList.add("highlight", "is-" + contextualClass);
-                "highlight",
-                "is-" + contextualClass
-            );
 
-            const childPathElements =
+            const childPathElements = svgElementToHighlight.querySelectorAll("path");
-                svgElementToHighlight.querySelectorAll("path");
             for (const pathElement of childPathElements) {
                 // eslint-disable-next-line unicorn/no-null
                 pathElement.style.fill = null;
@@ -45,13 +43,11 @@ import type * as globalTypes from "../types/globalTypes";
     };
 
     const unlockField = (clickEvent: Event) => {
-        const fieldElement = (clickEvent.currentTarget as HTMLElement).closest(
+        const fieldElement = (clickEvent.currentTarget as HTMLElement).closest(".field");
-            ".field"
-        );
 
-        const inputOrSelectElement = fieldElement.querySelector(
+        const inputOrSelectElement = fieldElement.querySelector("input, select") as
-            "input, select"
+            | HTMLInputElement
-        ) as HTMLInputElement | HTMLSelectElement;
+            | HTMLSelectElement;
 
         inputOrSelectElement.classList.remove("is-readonly");
 
@@ -59,8 +55,7 @@ import type * as globalTypes from "../types/globalTypes";
             (inputOrSelectElement as HTMLInputElement).readOnly = false;
             (inputOrSelectElement as HTMLInputElement).disabled = false;
         } else {
-            const optionElements =
+            const optionElements = inputOrSelectElement.querySelectorAll("option");
-                inputOrSelectElement.querySelectorAll("option");
             for (const optionElement of optionElements) {
                 optionElement.disabled = false;
             }
@@ -70,15 +65,66 @@ import type * as globalTypes from "../types/globalTypes";
     };
 
     const initializeUnlockFieldButtons = (containerElement: HTMLElement) => {
-        const unlockFieldButtonElements = containerElement.querySelectorAll(
+        const unlockFieldButtonElements =
-            ".is-unlock-field-button"
+            containerElement.querySelectorAll(".is-unlock-field-button");
-        );
 
         for (const unlockFieldButtonElement of unlockFieldButtonElements) {
             unlockFieldButtonElement.addEventListener("click", unlockField);
         }
     };
 
+    const datePickerBaseOptions: BulmaCalendarOptions = {
+        dateFormat: "yyyy-MM-dd",
+        showFooter: false,
+        color: "info"
+    };
+
+    const initializeDatePickers = (containerElement: HTMLElement) => {
+        const dateElements = containerElement.querySelectorAll(
+            "input[type='date']"
+        ) as NodeListOf<HTMLInputElement>;
+
+        for (const dateElement of dateElements) {
+            const datePickerOptions = Object.assign({}, datePickerBaseOptions);
+
+            if (dateElement.required) {
+                datePickerOptions.showClearButton = false;
+            }
+
+            // apply min date if set
+            if (dateElement.min) {
+                datePickerOptions.minDate = cityssm.dateStringToDate(dateElement.min);
+            }
+
+            // apply max date if set
+            if (dateElement.max) {
+                datePickerOptions.maxDate = cityssm.dateStringToDate(dateElement.max);
+            }
+
+            const cal = exports.bulmaCalendar.attach(dateElement, datePickerOptions)[0];
+
+            // trigger change event on original element
+            cal.on("save", () => {
+                dateElement.dispatchEvent(new Event("change"));
+            });
+
+            // style the clear button
+            const clearButtonElement = containerElement.querySelector(
+                "#" + cal._id + " .datetimepicker-clear-button"
+            ) as HTMLElement;
+
+            if (clearButtonElement) {
+                if (dateElement.required) {
+                    clearButtonElement.remove();
+                } else {
+                    clearButtonElement.dataset.tooltip = "Clear";
+                    clearButtonElement.innerHTML =
+                        '<i class="fas fa-times" aria-hidden="true"></i>';
+                }
+            }
+        }
+    };
+
     const populateAliases = (containerElement: HTMLElement) => {
         const aliasElements = containerElement.querySelectorAll(
             ".alias"
@@ -91,8 +137,7 @@ import type * as globalTypes from "../types/globalTypes";
                     break;
 
                 case "lot":
-                    aliasElement.textContent =
+                    aliasElement.textContent = exports.aliases.lot.toLowerCase();
-                        exports.aliases.lot.toLowerCase();
                     break;
 
                 case "Occupancy":
@@ -100,8 +145,7 @@ import type * as globalTypes from "../types/globalTypes";
                     break;
 
                 case "occupancy":
-                    aliasElement.textContent =
+                    aliasElement.textContent = exports.aliases.occupancy.toLowerCase();
-                        exports.aliases.occupancy.toLowerCase();
                     break;
 
                 case "Occupant":
@@ -109,13 +153,11 @@ import type * as globalTypes from "../types/globalTypes";
                     break;
 
                 case "occupant":
-                    aliasElement.textContent =
+                    aliasElement.textContent = exports.aliases.occupant.toLowerCase();
-                        exports.aliases.occupant.toLowerCase();
                     break;
 
                 case "ExternalReceiptNumber":
-                    aliasElement.textContent =
+                    aliasElement.textContent = exports.aliases.externalReceiptNumber;
-                        exports.aliases.externalReceiptNumber;
                     break;
             }
         }
@@ -125,7 +167,6 @@ import type * as globalTypes from "../types/globalTypes";
     const luminosity = ["bright", "light", "dark"];
 
     const getRandomColor = (seedString: string) => {
-
         let actualSeedString = seedString;
 
         if (actualSeedString.length < 2) {
@@ -135,13 +176,17 @@ import type * as globalTypes from "../types/globalTypes";
         return exports.randomColor({
             seed: actualSeedString + actualSeedString,
             hue: hues[actualSeedString.codePointAt(actualSeedString.length - 1) % hues.length],
-            luminosity: luminosity[actualSeedString.codePointAt(actualSeedString.length - 2) % luminosity.length]
+            luminosity:
+                luminosity[
+                    actualSeedString.codePointAt(actualSeedString.length - 2) % luminosity.length
+                ]
         });
     };
 
     const los: globalTypes.LOS = {
         highlightMap,
         initializeUnlockFieldButtons,
+        initializeDatePickers,
         populateAliases,
         getRandomColor
     };

public-typescript/workOrderEdit.js

@@ -5,9 +5,10 @@ Object.defineProperty(exports, "__esModule", { value: true });
     const urlPrefix = document.querySelector("main").dataset.urlPrefix;
     const workOrderId = document.querySelector("#workOrderEdit--workOrderId").value;
     const isCreate = workOrderId === "";
-    los.initializeUnlockFieldButtons(document.querySelector("#form--workOrderEdit"));
+    const workOrderFormElement = document.querySelector("#form--workOrderEdit");
-    document
+    los.initializeDatePickers(workOrderFormElement.querySelector("#workOrderEdit--workOrderOpenDateString").closest(".field"));
-        .querySelector("#form--workOrderEdit")
+    los.initializeUnlockFieldButtons(workOrderFormElement);
+    workOrderFormElement
         .addEventListener("submit", (submitEvent) => {
         submitEvent.preventDefault();
         cityssm.postJSON(urlPrefix +
@@ -811,6 +812,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
                 },
                 onshown: (modalElement, closeModalFunction) => {
                     editCloseModalFunction = closeModalFunction;
+                    los.initializeDatePickers(modalElement);
                     bulmaJS.toggleHtmlClipped();
                     modalElement
                         .querySelector("form")
@@ -960,6 +962,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
                 onshown: (modalElement, closeModalFunction) => {
                     addModalElement = modalElement;
                     addCloseModalFunction = closeModalFunction;
+                    los.initializeDatePickers(modalElement);
                     bulmaJS.toggleHtmlClipped();
                     modalElement
                         .querySelector("form")

public-typescript/workOrderEdit.ts

@@ -22,12 +22,12 @@ declare const bulmaJS: BulmaJS;
 
     const isCreate = workOrderId === "";
 
-    los.initializeUnlockFieldButtons(
+    const workOrderFormElement = document.querySelector("#form--workOrderEdit") as HTMLFormElement;
-        document.querySelector("#form--workOrderEdit")
-    );
 
-    document
+    los.initializeDatePickers(workOrderFormElement.querySelector("#workOrderEdit--workOrderOpenDateString").closest(".field"));
-        .querySelector("#form--workOrderEdit")
+    los.initializeUnlockFieldButtons(workOrderFormElement);
+
+    workOrderFormElement
         .addEventListener("submit", (submitEvent) => {
             submitEvent.preventDefault();
 
@@ -1196,6 +1196,7 @@ declare const bulmaJS: BulmaJS;
                 onshown: (modalElement, closeModalFunction) => {
                     editCloseModalFunction = closeModalFunction;
 
+                    los.initializeDatePickers(modalElement);
                     bulmaJS.toggleHtmlClipped();
 
                     modalElement
@@ -1399,11 +1400,14 @@ declare const bulmaJS: BulmaJS;
                                 "#milestoneAdd--workOrderMilestoneDateString"
                             ) as HTMLInputElement
                         ).valueAsDate = new Date();
+
                     },
                     onshown: (modalElement, closeModalFunction) => {
                         addModalElement = modalElement;
                         addCloseModalFunction = closeModalFunction;
 
+                        los.initializeDatePickers(modalElement);
+
                         bulmaJS.toggleHtmlClipped();
 
                         modalElement

public-typescript/workOrderSearch.js

@@ -1,8 +1,10 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 (() => {
+    const los = exports.los;
     const urlPrefix = document.querySelector("main").dataset.urlPrefix;
     const searchFilterFormElement = document.querySelector("#form--searchFilters");
+    los.initializeDatePickers(searchFilterFormElement);
     const searchResultsContainerElement = document.querySelector("#container--searchResults");
     const limit = Number.parseInt(document.querySelector("#searchFilter--limit").value, 10);
     const offsetElement = document.querySelector("#searchFilter--offset");
@@ -132,28 +134,5 @@ Object.defineProperty(exports, "__esModule", { value: true });
         formEvent.preventDefault();
         resetOffsetAndGetWorkOrders();
     });
-    const workOrderOpenDateStringElement = document.querySelector("#searchFilter--workOrderOpenDateString");
-    document.querySelector("#button--workOrderOpenDateString-previous").addEventListener("click", () => {
-        if (workOrderOpenDateStringElement.value === "") {
-            workOrderOpenDateStringElement.valueAsDate = new Date();
-        }
-        else {
-            const openDate = workOrderOpenDateStringElement.valueAsDate;
-            openDate.setDate(openDate.getDate() - 1);
-            workOrderOpenDateStringElement.valueAsDate = openDate;
-        }
-        resetOffsetAndGetWorkOrders();
-    });
-    document.querySelector("#button--workOrderOpenDateString-next").addEventListener("click", () => {
-        if (workOrderOpenDateStringElement.value === "") {
-            workOrderOpenDateStringElement.valueAsDate = new Date();
-        }
-        else {
-            const openDate = workOrderOpenDateStringElement.valueAsDate;
-            openDate.setDate(openDate.getDate() + 1);
-            workOrderOpenDateStringElement.valueAsDate = openDate;
-        }
-        resetOffsetAndGetWorkOrders();
-    });
     getWorkOrders();
 })();

public-typescript/workOrderSearch.ts

@@ -1,17 +1,22 @@
 /* eslint-disable unicorn/prefer-module */
 
 import type * as recordTypes from "../types/recordTypes";
-
+import type * as globalTypes from "../types/globalTypes";
 import type { cityssmGlobal } from "@cityssm/bulma-webapp-js/src/types";
 
 declare const cityssm: cityssmGlobal;
 
 (() => {
+    const los = exports.los as globalTypes.LOS;
+
     const urlPrefix = document.querySelector("main").dataset.urlPrefix;
 
     const searchFilterFormElement = document.querySelector(
         "#form--searchFilters"
     ) as HTMLFormElement;
+
+    los.initializeDatePickers(searchFilterFormElement);
+
     const searchResultsContainerElement = document.querySelector(
         "#container--searchResults"
     ) as HTMLElement;
@@ -20,6 +25,7 @@ declare const cityssm: cityssmGlobal;
         (document.querySelector("#searchFilter--limit") as HTMLInputElement).value,
         10
     );
+
     const offsetElement = document.querySelector("#searchFilter--offset") as HTMLInputElement;
 
     const getWorkOrders = () => {
@@ -176,6 +182,7 @@ declare const cityssm: cityssmGlobal;
         resetOffsetAndGetWorkOrders();
     });
 
+    /*
     const workOrderOpenDateStringElement = document.querySelector("#searchFilter--workOrderOpenDateString") as HTMLInputElement;
 
     document.querySelector("#button--workOrderOpenDateString-previous").addEventListener("click", () => {
@@ -203,6 +210,7 @@ declare const cityssm: cityssmGlobal;
 
         resetOffsetAndGetWorkOrders();
     });
+    */
 
     getWorkOrders();
 })();

public/html/workOrder-addMilestone.html

@@ -25,8 +25,11 @@
                     <div class="column">
                         <div class="field">
                             <label class="label" for="milestoneAdd--workOrderMilestoneDateString">Milestone Date</label>
-                            <div class="control">
+                            <div class="control has-icons-left">
                                 <input class="input" id="milestoneAdd--workOrderMilestoneDateString" name="workOrderMilestoneDateString" type="date" required />
+                                <span class="icon is-left">
+                                    <i class="fas fa-calendar" aria-hidden="true"></i>
+                                </span>
                             </div>
                         </div>
                     </div>

public/html/workOrder-editMilestone.html

@@ -26,8 +26,11 @@
                     <div class="column">
                         <div class="field">
                             <label class="label" for="milestoneEdit--workOrderMilestoneDateString">Milestone Date</label>
-                            <div class="control">
+                            <div class="control has-icons-left">
                                 <input class="input" id="milestoneEdit--workOrderMilestoneDateString" name="workOrderMilestoneDateString" type="date" required />
+                                <span class="icon is-left">
+                                    <i class="fas fa-calendar" aria-hidden="true"></i>
+                                </span>
                             </div>
                         </div>
                     </div>

public/javascripts/main.min.js

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),(()=>{const e=e=>{const t=e.currentTarget.closest(".field").querySelector("input, select");if(t.classList.remove("is-readonly"),"INPUT"===t.tagName)t.readOnly=!1,t.disabled=!1;else{const e=t.querySelectorAll("option");for(const t of e)t.disabled=!1}t.focus()},t=["red","green","orange","blue","pink","yellow","purple"],o=["bright","light","dark"],l={highlightMap:(e,t,o)=>{let l,s=t;for(;!(l=e.querySelector("#"+s))&&s.includes("-");)s=s.slice(0,Math.max(0,s.lastIndexOf("-")));if(l){l.style.fill=null,l.classList.add("highlight","is-"+o);const e=l.querySelectorAll("path");for(const t of e)t.style.fill=null}},initializeUnlockFieldButtons:t=>{const o=t.querySelectorAll(".is-unlock-field-button");for(const t of o)t.addEventListener("click",e)},populateAliases:e=>{const t=e.querySelectorAll(".alias");for(const e of t)switch(e.dataset.alias){case"Lot":e.textContent=exports.aliases.lot;break;case"lot":e.textContent=exports.aliases.lot.toLowerCase();break;case"Occupancy":e.textContent=exports.aliases.occupancy;break;case"occupancy":e.textContent=exports.aliases.occupancy.toLowerCase();break;case"Occupant":e.textContent=exports.aliases.occupant;break;case"occupant":e.textContent=exports.aliases.occupant.toLowerCase();break;case"ExternalReceiptNumber":e.textContent=exports.aliases.externalReceiptNumber}},getRandomColor:e=>{let l=e;return l.length<2&&(l+="a1"),exports.randomColor({seed:l+l,hue:t[l.codePointAt(l.length-1)%t.length],luminosity:o[l.codePointAt(l.length-2)%o.length]})}};exports.los=l})();
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),(()=>{const e=e=>{const t=e.currentTarget.closest(".field").querySelector("input, select");if(t.classList.remove("is-readonly"),"INPUT"===t.tagName)t.readOnly=!1,t.disabled=!1;else{const e=t.querySelectorAll("option");for(const t of e)t.disabled=!1}t.focus()},t={dateFormat:"yyyy-MM-dd",showFooter:!1,color:"info"},o=["red","green","orange","blue","pink","yellow","purple"],a=["bright","light","dark"],s={highlightMap:(e,t,o)=>{let a,s=t;for(;!(a=e.querySelector("#"+s))&&s.includes("-");)s=s.slice(0,Math.max(0,s.lastIndexOf("-")));if(a){a.style.fill=null,a.classList.add("highlight","is-"+o);const e=a.querySelectorAll("path");for(const t of e)t.style.fill=null}},initializeUnlockFieldButtons:t=>{const o=t.querySelectorAll(".is-unlock-field-button");for(const t of o)t.addEventListener("click",e)},initializeDatePickers:e=>{const o=e.querySelectorAll("input[type='date']");for(const a of o){const o=Object.assign({},t);a.required&&(o.showClearButton=!1),a.min&&(o.minDate=cityssm.dateStringToDate(a.min)),a.max&&(o.maxDate=cityssm.dateStringToDate(a.max));const s=exports.bulmaCalendar.attach(a,o)[0];s.on("save",()=>{a.dispatchEvent(new Event("change"))});const l=e.querySelector("#"+s._id+" .datetimepicker-clear-button");l&&(a.required?l.remove():(l.dataset.tooltip="Clear",l.innerHTML='<i class="fas fa-times" aria-hidden="true"></i>'))}},populateAliases:e=>{const t=e.querySelectorAll(".alias");for(const e of t)switch(e.dataset.alias){case"Lot":e.textContent=exports.aliases.lot;break;case"lot":e.textContent=exports.aliases.lot.toLowerCase();break;case"Occupancy":e.textContent=exports.aliases.occupancy;break;case"occupancy":e.textContent=exports.aliases.occupancy.toLowerCase();break;case"Occupant":e.textContent=exports.aliases.occupant;break;case"occupant":e.textContent=exports.aliases.occupant.toLowerCase();break;case"ExternalReceiptNumber":e.textContent=exports.aliases.externalReceiptNumber}},getRandomColor:e=>{let t=e;return t.length<2&&(t+="a1"),exports.randomColor({seed:t+t,hue:o[t.codePointAt(t.length-1)%o.length],luminosity:a[t.codePointAt(t.length-2)%a.length]})}};exports.los=s})();

public/javascripts/workOrderSearch.min.js

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),(()=>{const e=document.querySelector("main").dataset.urlPrefix,t=document.querySelector("#form--searchFilters"),r=document.querySelector("#container--searchResults"),a=Number.parseInt(document.querySelector("#searchFilter--limit").value,10),s=document.querySelector("#searchFilter--offset"),o=()=>{const o=Number.parseInt(s.value,10);r.innerHTML='<div class="has-text-grey has-text-centered"><i class="fas fa-5x fa-circle-notch fa-spin" aria-hidden="true"></i><br />Loading Work Orders...</div>',cityssm.postJSON(e+"/workOrders/doSearchWorkOrders",t,t=>{if(0===t.workOrders.length)return void(r.innerHTML='<div class="message is-info"><p class="message-body">There are no work orders that meet the search criteria.</p></div>');const s=document.createElement("tbody");for(const r of t.workOrders)s.insertAdjacentHTML("beforeend",'<tr><td><a class="has-text-weight-bold" href="'+e+"/workOrders/"+r.workOrderId+'">'+cityssm.escapeHTML(r.workOrderNumber)+"</a></td><td>"+cityssm.escapeHTML(r.workOrderType)+'<br /><span class="is-size-7">'+cityssm.escapeHTML(r.workOrderDescription)+'</span></td><td class="is-nowrap"><span data-tooltip="Open Date"><i class="fas fa-fw fa-play" aria-label="Open Date"></i> '+r.workOrderOpenDateString+'</span><br /><span data-tooltip="Close Date"><i class="fas fa-fw fa-stop" aria-label="Close Date"></i> '+(r.workOrderCloseDate?r.workOrderCloseDateString:'<span class="has-text-grey">(No Close Date)</span>')+"</span></td><td>"+(0===r.workOrderMilestoneCount?"-":r.workOrderMilestoneCompletionCount+" / "+r.workOrderMilestoneCount)+"</td></tr>");r.innerHTML='<table class="table is-fullwidth is-striped is-hoverable"><thead><tr><th>Work Order Number</th><th>Work Order Description</th><th>Date</th><th>Progress</th></tr></thead><table><div class="level"><div class="level-left"><div class="level-item has-text-weight-bold">Displaying '+(o+1).toString()+" to "+Math.min(t.count,a+o)+" of "+t.count+'</div></div><div class="level-right">'+(o>0?'<div class="level-item"><button class="button is-rounded is-link is-outlined" data-page="previous" type="button" title="Previous"><i class="fas fa-arrow-left" aria-hidden="true"></i></button></div>':"")+(a+o<t.count?'<div class="level-item"><button class="button is-rounded is-link" data-page="next" type="button" title="Next"><span>Next</span><span class="icon"><i class="fas fa-arrow-right" aria-hidden="true"></i></span></button></div>':"")+"</div></div>",r.querySelector("table").append(s),o>0&&r.querySelector("button[data-page='previous']").addEventListener("click",n),a+o<t.count&&r.querySelector("button[data-page='next']").addEventListener("click",l)})},i=()=>{s.value="0",o()},n=()=>{s.value=Math.max(Number.parseInt(s.value,10)-a,0).toString(),o()},l=()=>{s.value=(Number.parseInt(s.value,10)+a).toString(),o()},d=t.querySelectorAll("input, select");for(const e of d)e.addEventListener("change",i);t.addEventListener("submit",e=>{e.preventDefault(),i()});const c=document.querySelector("#searchFilter--workOrderOpenDateString");document.querySelector("#button--workOrderOpenDateString-previous").addEventListener("click",()=>{if(""===c.value)c.valueAsDate=new Date;else{const e=c.valueAsDate;e.setDate(e.getDate()-1),c.valueAsDate=e}i()}),document.querySelector("#button--workOrderOpenDateString-next").addEventListener("click",()=>{if(""===c.value)c.valueAsDate=new Date;else{const e=c.valueAsDate;e.setDate(e.getDate()+1),c.valueAsDate=e}i()}),o()})();
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),(()=>{const e=exports.los,t=document.querySelector("main").dataset.urlPrefix,r=document.querySelector("#form--searchFilters");e.initializeDatePickers(r);const s=document.querySelector("#container--searchResults"),a=Number.parseInt(document.querySelector("#searchFilter--limit").value,10),i=document.querySelector("#searchFilter--offset"),o=()=>{const e=Number.parseInt(i.value,10);s.innerHTML='<div class="has-text-grey has-text-centered"><i class="fas fa-5x fa-circle-notch fa-spin" aria-hidden="true"></i><br />Loading Work Orders...</div>',cityssm.postJSON(t+"/workOrders/doSearchWorkOrders",r,r=>{if(0===r.workOrders.length)return void(s.innerHTML='<div class="message is-info"><p class="message-body">There are no work orders that meet the search criteria.</p></div>');const i=document.createElement("tbody");for(const e of r.workOrders)i.insertAdjacentHTML("beforeend",'<tr><td><a class="has-text-weight-bold" href="'+t+"/workOrders/"+e.workOrderId+'">'+cityssm.escapeHTML(e.workOrderNumber)+"</a></td><td>"+cityssm.escapeHTML(e.workOrderType)+'<br /><span class="is-size-7">'+cityssm.escapeHTML(e.workOrderDescription)+'</span></td><td class="is-nowrap"><span data-tooltip="Open Date"><i class="fas fa-fw fa-play" aria-label="Open Date"></i> '+e.workOrderOpenDateString+'</span><br /><span data-tooltip="Close Date"><i class="fas fa-fw fa-stop" aria-label="Close Date"></i> '+(e.workOrderCloseDate?e.workOrderCloseDateString:'<span class="has-text-grey">(No Close Date)</span>')+"</span></td><td>"+(0===e.workOrderMilestoneCount?"-":e.workOrderMilestoneCompletionCount+" / "+e.workOrderMilestoneCount)+"</td></tr>");s.innerHTML='<table class="table is-fullwidth is-striped is-hoverable"><thead><tr><th>Work Order Number</th><th>Work Order Description</th><th>Date</th><th>Progress</th></tr></thead><table><div class="level"><div class="level-left"><div class="level-item has-text-weight-bold">Displaying '+(e+1).toString()+" to "+Math.min(r.count,a+e)+" of "+r.count+'</div></div><div class="level-right">'+(e>0?'<div class="level-item"><button class="button is-rounded is-link is-outlined" data-page="previous" type="button" title="Previous"><i class="fas fa-arrow-left" aria-hidden="true"></i></button></div>':"")+(a+e<r.count?'<div class="level-item"><button class="button is-rounded is-link" data-page="next" type="button" title="Next"><span>Next</span><span class="icon"><i class="fas fa-arrow-right" aria-hidden="true"></i></span></button></div>':"")+"</div></div>",s.querySelector("table").append(i),e>0&&s.querySelector("button[data-page='previous']").addEventListener("click",l),a+e<r.count&&s.querySelector("button[data-page='next']").addEventListener("click",d)})},n=()=>{i.value="0",o()},l=()=>{i.value=Math.max(Number.parseInt(i.value,10)-a,0).toString(),o()},d=()=>{i.value=(Number.parseInt(i.value,10)+a).toString(),o()},c=r.querySelectorAll("input, select");for(const e of c)e.addEventListener("change",n);r.addEventListener("submit",e=>{e.preventDefault(),n()}),o()})();

types/globalTypes.d.ts

@@ -1,5 +1,6 @@
 export interface LOS {
     highlightMap: (mapContainerElement: HTMLElement, mapKey: string, contextualClass: "success" | "danger") => void;
+    initializeDatePickers: (containerElement: HTMLElement) => void;
     initializeUnlockFieldButtons: (containerElement: HTMLElement) => void;
     populateAliases: (containerElement: HTMLElement) => void;
     getRandomColor: (seedString: string) => string;

types/globalTypes.js

@@ -1 +1,2 @@
-export {};
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

types/globalTypes.ts

@@ -4,6 +4,7 @@ export interface LOS {
         mapKey: string,
         contextualClass: "success" | "danger"
     ) => void;
+    initializeDatePickers: (containerElement: HTMLElement) => void;
     initializeUnlockFieldButtons: (containerElement: HTMLElement) => void;
     populateAliases: (containerElement: HTMLElement) => void;
     getRandomColor: (seedString: string) => string;

views/_footerA.ejs

@@ -27,6 +27,7 @@
 </script>
 <script src="<%= urlPrefix %>/lib/cityssm-bulma-js/bulma-js.js"></script>
 <script src="<%= urlPrefix %>/lib/cityssm-bulma-webapp-js/dist/cityssm.min.js"></script>
+<script src="<%= urlPrefix %>/lib/bulma-calendar/js/bulma-calendar.min.js"></script>
 <script src="<%= urlPrefix %>/lib/leaflet/leaflet.js"></script>
 <script src="<%= urlPrefix %>/lib/randomcolor/randomcolor.js"></script>
 <script>

views/lotOccupancy-edit.ejs

@@ -137,18 +137,24 @@
                 <div class="column is-3">
                     <div class="field">
                         <label class="label" for="lotOccupancy--occupancyStartDateString">Start Date</label>
-                        <div class="control">
+                        <div class="control has-icons-left">
                             <input class="input" id="lotOccupancy--occupancyStartDateString" name="occupancyStartDateString" type="date"
                             value="<%= lotOccupancy.occupancyStartDateString %>" required />
+                            <span class="icon is-left">
+                                <i class="fas fa-calendar" aria-hidden="true"></i>
+                            </span>
                         </div>
                     </div>
                     <div class="field">
                         <label class="label" for="lotOccupancy--occupancyEndDateString">End Date</label>
-                        <div class="control">
+                        <div class="control has-icons-left">
                             <input class="input" id="lotOccupancy--occupancyEndDateString" name="occupancyEndDateString" type="date" 
                                 value="<%= lotOccupancy.occupancyEndDateString %>"
                                 min="<%= lotOccupancy.occupancyStartDateString %>"
                                 <%= (configFunctions.getProperty("settings.lotOccupancy.occupancyEndDateIsRequired") ? " required" : "") %> />
+                            <span class="icon is-left">
+                                <i class="fas fa-calendar" aria-hidden="true"></i>
+                            </span>
                         </div>
                     </div>
                 </div>

views/workOrder-edit.ejs

@@ -91,8 +91,11 @@
                         <div class="column">
                             <div class="field">
                                 <label class="label" for="workOrderEdit--workOrderOpenDateString">Open Date</label>
-                                <div class="control">
+                                <div class="control has-icons-left">
                                     <input class="input" id="workOrderEdit--workOrderOpenDateString" name="workOrderOpenDateString" type="date" value="<%= workOrder.workOrderOpenDateString %>" required />
+                                    <span class="icon is-left">
+                                        <i class="fas fa-calendar" aria-hidden="true"></i>
+                                    </span>
                                 </div>
                             </div>
                         </div>

views/workOrder-search.ejs

@@ -76,24 +76,15 @@
                     </div>  
                 </div>
 
-                <label class="label" for="searchFilter--workOrderOpenDateString">Open Date</label>
+                <div class="field">
-                <div class="field has-addons">
+                    <label class="label" for="searchFilter--workOrderOpenDateString">Open Date</label>
-                    <div class="control">
-                        <button class="button" id="button--workOrderOpenDateString-previous" data-tooltip="Previous Day" type="button" aria-label="Previous Day">
-                            <i class="fas fa-arrow-left" aria-hidden="true"></i>
-                        </button>
-                    </div>
                     <div class="control is-expanded has-icons-left">
-                        <input class="input" id="searchFilter--workOrderOpenDateString" name="workOrderOpenDateString" type="date" value="<%= workOrderOpenDateString %>" />
+                        <input class="input" id="searchFilter--workOrderOpenDateString" name="workOrderOpenDateString" type="date" value="<%= workOrderOpenDateString %>" max="<%= dateTimeFunctions.dateToString(new Date()) %>" />
                         <span class="icon is-small is-left">
-                            <i class="fas fa-search" aria-hidden="true"></i>
+                            <i class="fas fa-calendar" aria-hidden="true"></i>
                         </span>
                     </div>
-                    <div class="control">
+
-                        <button class="button" id="button--workOrderOpenDateString-next" data-tooltip="Next Day" type="button" aria-label="Next Day">
-                            <i class="fas fa-arrow-right" aria-hidden="true"></i>
-                        </button>
-                    </div>
                 </div>
             </form>
         </div>