diff --git a/package-lock.json b/package-lock.json
index 7531e8e..12c534f 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -12,7 +12,6 @@
         "@tinymce/tinymce-vue": "2.0.0",
         "bootstrap": "^4.5.3",
         "jquery": "^3.5.1",
-        "luxon": "^1.11.3",
         "moment": "^2.29.1",
         "moment-timezone": "^0.5.26",
         "popper.js": "^1.14.4",
@@ -21,7 +20,7 @@
         "v-calendar": "^0.9.7",
         "validatorjs": "^3.22.1",
         "vue": "^2.6.12",
-        "vue-bootstrap-datetimepicker": "^5.0.1",
+        "vue-date-pick": "^1.5.1",
         "vue-uniq-ids": "^1.0.0",
         "weekstart": "^1.0.0"
       },
@@ -13152,14 +13151,6 @@
         "yallist": "^3.0.2"
       }
     },
-    "node_modules/luxon": {
-      "version": "1.28.0",
-      "resolved": "https://registry.npmjs.org/luxon/-/luxon-1.28.0.tgz",
-      "integrity": "sha512-TfTiyvZhwBYM/7QdAVDh+7dBTBA29v4ik0Ce9zda3Mnf8on1S5KJI8P2jKFZ8+5C0jhmr0KwJEO/Wdpm0VeWJQ==",
-      "engines": {
-        "node": "*"
-      }
-    },
     "node_modules/make-dir": {
       "version": "3.1.0",
       "resolved": "https://registry.npmjs.org/make-dir/-/make-dir-3.1.0.tgz",
@@ -14689,34 +14680,6 @@
         "node": ">=0.12"
       }
     },
-    "node_modules/pc-bootstrap4-datetimepicker": {
-      "version": "4.17.51",
-      "resolved": "https://registry.npmjs.org/pc-bootstrap4-datetimepicker/-/pc-bootstrap4-datetimepicker-4.17.51.tgz",
-      "integrity": "sha512-UQDSKS5d1c43btk2vQ4siiv9YIkscZYQfTE513abeTqh5PIOJiyAeNdoCSTsDTZcpWJtWZHWk15yDXypYSFzcQ==",
-      "dependencies": {
-        "bootstrap": "^4.0.0-beta.2",
-        "jquery": "^1.8.3 || ^2.0 || ^3.0",
-        "moment": "^2.10",
-        "moment-timezone": "^0.4.0"
-      },
-      "peerDependencies": {
-        "bootstrap": "^4.0.0-beta.2",
-        "jquery": "^1.8.3 || ^2.0 || ^3.0",
-        "moment": "^2.10",
-        "moment-timezone": "^0.4.0 || ^0.5.0"
-      }
-    },
-    "node_modules/pc-bootstrap4-datetimepicker/node_modules/moment-timezone": {
-      "version": "0.4.1",
-      "resolved": "https://registry.npmjs.org/moment-timezone/-/moment-timezone-0.4.1.tgz",
-      "integrity": "sha1-gfWYw61eIs2teWtn7NjYjQ9bqgY=",
-      "dependencies": {
-        "moment": ">= 2.6.0"
-      },
-      "engines": {
-        "node": "*"
-      }
-    },
     "node_modules/performance-now": {
       "version": "2.1.0",
       "resolved": "https://registry.npmjs.org/performance-now/-/performance-now-2.1.0.tgz",
@@ -19725,19 +19688,16 @@
       "resolved": "https://registry.npmjs.org/vue/-/vue-2.6.14.tgz",
       "integrity": "sha512-x2284lgYvjOMj3Za7kqzRcUSxBboHqtgRE2zlos1qWaOye5yUmHn42LB1250NJBLRwEcdrB0JRwyPTEPhfQjiQ=="
     },
-    "node_modules/vue-bootstrap-datetimepicker": {
-      "version": "5.0.1",
-      "resolved": "https://registry.npmjs.org/vue-bootstrap-datetimepicker/-/vue-bootstrap-datetimepicker-5.0.1.tgz",
-      "integrity": "sha512-jao7sWXHgKzjbOio97u7kEfB/FJMWJ5rhsc4q8iNTOLCULfSJ5m3AZ2qZh62dNcMA4/uuTW6m6tONYIith/2XQ==",
+    "node_modules/vue-date-pick": {
+      "version": "1.5.1",
+      "resolved": "https://registry.npmjs.org/vue-date-pick/-/vue-date-pick-1.5.1.tgz",
+      "integrity": "sha512-7IZDRBgrBUWiF7xMgVAEETq49E//djP7mCbMofLtG91D0IZNbLocT0Z+eueVrJ496lf5WSUE1dF3/ZaOGZW++w==",
       "dependencies": {
-        "pc-bootstrap4-datetimepicker": "^4.17.50"
+        "vue": "^2.6.0"
       },
       "engines": {
-        "node": ">= 6.9.0",
-        "npm": ">= 3.10.0"
-      },
-      "peerDependencies": {
-        "vue": "^2.0.0"
+        "node": ">= 6.0.0",
+        "npm": ">= 3.0.0"
       }
     },
     "node_modules/vue-eslint-parser": {
@@ -31547,11 +31507,6 @@
         "yallist": "^3.0.2"
       }
     },
-    "luxon": {
-      "version": "1.28.0",
-      "resolved": "https://registry.npmjs.org/luxon/-/luxon-1.28.0.tgz",
-      "integrity": "sha512-TfTiyvZhwBYM/7QdAVDh+7dBTBA29v4ik0Ce9zda3Mnf8on1S5KJI8P2jKFZ8+5C0jhmr0KwJEO/Wdpm0VeWJQ=="
-    },
     "make-dir": {
       "version": "3.1.0",
       "resolved": "https://registry.npmjs.org/make-dir/-/make-dir-3.1.0.tgz",
@@ -32801,27 +32756,6 @@
         "sha.js": "^2.4.8"
       }
     },
-    "pc-bootstrap4-datetimepicker": {
-      "version": "4.17.51",
-      "resolved": "https://registry.npmjs.org/pc-bootstrap4-datetimepicker/-/pc-bootstrap4-datetimepicker-4.17.51.tgz",
-      "integrity": "sha512-UQDSKS5d1c43btk2vQ4siiv9YIkscZYQfTE513abeTqh5PIOJiyAeNdoCSTsDTZcpWJtWZHWk15yDXypYSFzcQ==",
-      "requires": {
-        "bootstrap": "^4.0.0-beta.2",
-        "jquery": "^1.8.3 || ^2.0 || ^3.0",
-        "moment": "^2.10",
-        "moment-timezone": "^0.4.0"
-      },
-      "dependencies": {
-        "moment-timezone": {
-          "version": "0.4.1",
-          "resolved": "https://registry.npmjs.org/moment-timezone/-/moment-timezone-0.4.1.tgz",
-          "integrity": "sha1-gfWYw61eIs2teWtn7NjYjQ9bqgY=",
-          "requires": {
-            "moment": ">= 2.6.0"
-          }
-        }
-      }
-    },
     "performance-now": {
       "version": "2.1.0",
       "resolved": "https://registry.npmjs.org/performance-now/-/performance-now-2.1.0.tgz",
@@ -36955,12 +36889,12 @@
       "resolved": "https://registry.npmjs.org/vue/-/vue-2.6.14.tgz",
       "integrity": "sha512-x2284lgYvjOMj3Za7kqzRcUSxBboHqtgRE2zlos1qWaOye5yUmHn42LB1250NJBLRwEcdrB0JRwyPTEPhfQjiQ=="
     },
-    "vue-bootstrap-datetimepicker": {
-      "version": "5.0.1",
-      "resolved": "https://registry.npmjs.org/vue-bootstrap-datetimepicker/-/vue-bootstrap-datetimepicker-5.0.1.tgz",
-      "integrity": "sha512-jao7sWXHgKzjbOio97u7kEfB/FJMWJ5rhsc4q8iNTOLCULfSJ5m3AZ2qZh62dNcMA4/uuTW6m6tONYIith/2XQ==",
+    "vue-date-pick": {
+      "version": "1.5.1",
+      "resolved": "https://registry.npmjs.org/vue-date-pick/-/vue-date-pick-1.5.1.tgz",
+      "integrity": "sha512-7IZDRBgrBUWiF7xMgVAEETq49E//djP7mCbMofLtG91D0IZNbLocT0Z+eueVrJ496lf5WSUE1dF3/ZaOGZW++w==",
       "requires": {
-        "pc-bootstrap4-datetimepicker": "^4.17.50"
+        "vue": "^2.6.0"
       }
     },
     "vue-eslint-parser": {
diff --git a/package.json b/package.json
index f890d9a..2414f8b 100644
--- a/package.json
+++ b/package.json
@@ -22,7 +22,6 @@
     "@tinymce/tinymce-vue": "2.0.0",
     "bootstrap": "^4.5.3",
     "jquery": "^3.5.1",
-    "luxon": "^1.11.3",
     "moment": "^2.29.1",
     "moment-timezone": "^0.5.26",
     "popper.js": "^1.14.4",
@@ -31,7 +30,7 @@
     "v-calendar": "^0.9.7",
     "validatorjs": "^3.22.1",
     "vue": "^2.6.12",
-    "vue-bootstrap-datetimepicker": "^5.0.1",
+    "vue-date-pick": "^1.5.1",
     "vue-uniq-ids": "^1.0.0",
     "weekstart": "^1.0.0"
   },
diff --git a/src/DemoApp.vue b/src/DemoApp.vue
index 82acef6..40d78eb 100644
--- a/src/DemoApp.vue
+++ b/src/DemoApp.vue
@@ -1,226 +1,249 @@
 <template>
-    <div class="container">
-        <h1>vue-form-elements playground</h1>
-        <form-select-list name="sampleSelectList"
-                     label="Sample Select List"
-                     :options="selectOptions"
-                     v-model="data.sampleSelect"
-                     helper="This is a sample select list field with a validation rule that it must match red"
-                     validation="in:red">
-        </form-select-list>
-        <form-input name="sampleInput"
-                    label="Sample Input with Validation"
-                    helper="This is sample help text for the sample input field. This field is required and has a minimum length of 2 characters."
-                    v-model="data.sampleInput"
-                    :validation="inputValidationRules">
-        </form-input>
-        <form-input name="password.value"
-                    label="Sample Input to support Password masking"
-                    type="password"
-                    helper="This password style implementation has complex validation rules. The field must be 9 characters long with at least one alphabetic, lower and upper case, numeric and symbol"
-                    v-model="data.password.value"
-                    :validation="passwordValidationRules">
-        </form-input>
-        <form-input name="password.confirm"
-                    label="Sample Input with validation rule to match another property"
-                    type="password"
-                    helper="This password style has validation rules to match another field"
-                    v-model="data.password.confirm"
-                    :validationData="data"
-                    :validation="confirmPasswordValidationRules">
-        </form-input>
-        <form-input name="sampleError"
-                    label="Sample Field With External Forced Error"
-                    helper="This field will show an error by using the error prop. This example field is controlling the data that will be passed in to the error prop"
-                    :error="data.sampleError"
-                    v-model="data.sampleError">
-        </form-input>
-        <form-input name="sampleCustomValidationError"
-                    label="Sample Custom Validation Message"
-                    helper="This field has a required field that has a custom validation error message by using the validationMessages property."
-                    v-model="data.sampleCustomValidationError"
-                    validation="required"
-                    :validationMessages="customValidationMessages">
-        </form-input>
-        <form-text-area name="sampleText"
-                        label="Sample Text Area"
-                        rows="4"
-                        helper="This text area has a maximum character limit of 20 validation rule."
-                        error="This error is shown by default"
-                        validation="max:20"
-                        :richtext="richtext"
-                        v-model="data.sampleText">
-        </form-text-area>
-        Current Character Count: {{data.sampleText.length}}
-        <form-checkbox name="useRichtext"
-                       label="Use richtext editor for above textarea"
-                       v-model="richtext"
-                       toggle="true"
-                       helper="">
-        </form-checkbox>
+  <div class="container">
+    <h1>vue-form-elements playground</h1>
+    <form-select-list
+      v-model="data.sampleSelect"
+      name="sampleSelectList"
+      label="Sample Select List"
+      :options="selectOptions"
+      helper="This is a sample select list field with a validation rule that it must match red"
+      validation="in:red"
+    >
+    </form-select-list>
+    <form-input
+      v-model="data.sampleInput"
+      name="sampleInput"
+      label="Sample Input with Validation"
+      helper="This is sample help text for the sample input field. This field is required and has a minimum length of 2 characters."
+      :validation="inputValidationRules"
+    >
+    </form-input>
+    <form-input
+      v-model="data.password.value"
+      name="password.value"
+      label="Sample Input to support Password masking"
+      type="password"
+      helper="This password style implementation has complex validation rules. The field must be 9 characters long with at least one alphabetic, lower and upper case, numeric and symbol"
+      :validation="passwordValidationRules"
+    >
+    </form-input>
+    <form-input
+      v-model="data.password.confirm"
+      name="password.confirm"
+      label="Sample Input with validation rule to match another property"
+      type="password"
+      helper="This password style has validation rules to match another field"
+      :validation-data="data"
+      :validation="confirmPasswordValidationRules"
+    >
+    </form-input>
+    <form-input
+      v-model="data.sampleError"
+      name="sampleError"
+      label="Sample Field With External Forced Error"
+      helper="This field will show an error by using the error prop. This example field is controlling the data that will be passed in to the error prop"
+      :error="data.sampleError"
+    >
+    </form-input>
+    <form-input
+      v-model="data.sampleCustomValidationError"
+      name="sampleCustomValidationError"
+      label="Sample Custom Validation Message"
+      helper="This field has a required field that has a custom validation error message by using the validationMessages property."
+      validation="required"
+      :validation-messages="customValidationMessages"
+    >
+    </form-input>
+    <form-text-area
+      v-model="data.sampleText"
+      name="sampleText"
+      label="Sample Text Area"
+      rows="4"
+      helper="This text area has a maximum character limit of 20 validation rule."
+      error="This error is shown by default"
+      validation="max:20"
+      :richtext="richtext"
+    >
+    </form-text-area>
+    Current Character Count: {{ data.sampleText.length }}
+    <form-checkbox
+      v-model="richtext"
+      name="useRichtext"
+      label="Use richtext editor for above textarea"
+      toggle="true"
+      helper=""
+    >
+    </form-checkbox>
 
+    <form-select
+      v-model="data.sampleSelect"
+      name="sampleSelect"
+      label="Sample Select"
+      :options="selectOptions"
+      helper="This is a sample select field with a validation rule that it must match red"
+      validation="in:red"
+    >
+    </form-select>
+    <form-radio-button-group
+      name="sampleRadioButtonGroup"
+      label="Sample Radio Button Group"
+      :options="radioButtonOptions"
+      helper="This shows rendering a radio button group with a required validation rule"
+      validation="required"
+    >
+    </form-radio-button-group>
+    <form-checkbox
+      v-model="data.sampleCheckbox"
+      name="sampleCheckbox"
+      label="Sample Checkbox"
+      helper="This checkbox represents a boolean in the data model."
+    >
+    </form-checkbox>
+    Current Value: {{ data.sampleCheckbox }}
 
+    <form-checkbox
+      v-model="data.sampleCustomCheckbox"
+      name="sampleCustomCheckbox"
+      label="Sample Custom Checkbox"
+      toggle="true"
+      helper="This checkbox represents a boolean in the data model. Need parameter 'toggle=true' for enable custom switches"
+    >
+    </form-checkbox>
 
-        <form-select name="sampleSelect"
-                     label="Sample Select"
-                     :options="selectOptions"
-                     v-model="data.sampleSelect"
-                     helper="This is a sample select field with a validation rule that it must match red"
-                     validation="in:red">
-        </form-select>
-        <form-radio-button-group name="sampleRadioButtonGroup"
-                                 label="Sample Radio Button Group"
-                                 :options="radioButtonOptions"
-                                 helper="This shows rendering a radio button group with a required validation rule"
-                                 validation="required">
-        </form-radio-button-group>
-        <form-checkbox name="sampleCheckbox"
-                       label="Sample Checkbox"
-                       v-model="data.sampleCheckbox"
-                       helper="This checkbox represents a boolean in the data model.">
-        </form-checkbox>
-        Current Value: {{data.sampleCheckbox}}
-
-        <form-checkbox name="sampleCustomCheckbox"
-                       label="Sample Custom Checkbox"
-                       v-model="data.sampleCustomCheckbox"
-                       toggle="true"
-                       helper="This checkbox represents a boolean in the data model. Need parameter 'toggle=true' for enable custom switches">
-        </form-checkbox>
-
-        Current Value: {{data.sampleCustomCheckbox}}
-        <form-radio-button-group name="sampleCustomRadioButtonGroup"
-                                 toggle="true"
-                                 label="Sample Custom Radio Button Group"
-                                 :options="radioButtonOptions"
-                                 helper="This shows rendering a radio button group with a required validation rule. Need parameter 'toggle=true' for enable custom radio"
-                                 validation="required">
-        </form-radio-button-group>
-        <form-date-picker
-                label="Sample calendar"
-                placeholder="Placeholder Sample Calendar"
-                helper="Helper Sample Calendar, Theming is supported by overwriting CSS classes."
-                data-format="datetime"
-                v-model="data.sampleDatePicker"
-        />
-        <form-html-editor
-            label="Sample Html Editor"
-            :content="data.sampleHtmlText"
-            @input="data.sampleHtmlText = $event"
-        />
-        <form-text-area
-          label="HTML Output"
-          v-model="data.sampleHtmlText"
-        ></form-text-area>
-        <form-delay-time-control
-            name="sampleDelayTimeControl"
-            v-model="data.sampleDelayTimeControl"
-            label="Sample delay time control"
-            helper="Example 7 minutes (PT7M)"
-            validation="required"
-        />
-    </div>
+    Current Value: {{ data.sampleCustomCheckbox }}
+    <form-radio-button-group
+      name="sampleCustomRadioButtonGroup"
+      toggle="true"
+      label="Sample Custom Radio Button Group"
+      :options="radioButtonOptions"
+      helper="This shows rendering a radio button group with a required validation rule. Need parameter 'toggle=true' for enable custom radio"
+      validation="required"
+    >
+    </form-radio-button-group>
+    <form-date-picker
+      v-model="data.sampleDatePicker"
+      label="Sample calendar"
+      placeholder="Placeholder Sample Calendar"
+      helper="Helper Sample Calendar, Theming is supported by overwriting CSS classes."
+      data-format="datetime"
+    />
+    <form-html-editor
+      label="Sample Html Editor"
+      :content="data.sampleHtmlText"
+      @input="data.sampleHtmlText = $event"
+    />
+    <form-text-area
+      v-model="data.sampleHtmlText"
+      label="HTML Output"
+    ></form-text-area>
+    <form-delay-time-control
+      v-model="data.sampleDelayTimeControl"
+      name="sampleDelayTimeControl"
+      label="Sample delay time control"
+      helper="Example 7 minutes (PT7M)"
+      validation="required"
+    />
+  </div>
 </template>
 
-
 <script>
-  // We're bringing in our Vue plugin
-  import Vue from 'vue'
-  import VueFormElements from './components/index';
-  import FormDatePicker from './components/FormDatePicker';
-  import { DateTime } from 'luxon';
+// We're bringing in our Vue plugin
+import Vue from "vue";
+import VueFormElements from "./components/index";
+import FormDatePicker from "./components/FormDatePicker";
 
-  // Register our plugin
-  Vue.use(VueFormElements)
+// Register our plugin
+Vue.use(VueFormElements);
 
-  export default {
-    components: {FormDatePicker},
-    data() {
-      return {
-        // The data model to bind our elements to
-        data: {
-          sampleInput: '',
-          sampleText: '',
-          sampleHtmlText: '<h3>Edit this text inline</h3> <ul> <li>Add some <a href="https://github.com/ProcessMaker/vue-form-elements/branches">links</a></li> <li><span style="color: #8e44ad;">Color</span> some text</li> </ul>',
-          // Shows off ability to nest and refer to items deep in data model
-          password: {
-            value: '',
-            confirm: ''
-          },
-          sampleCheckbox: false,
-          sampleCustomCheckbox: false,
-          sampleRadioButtonGroup: '',
-          sampleSelect: '',
-          sampleCustomValidationError: '',
-          sampleDatePicker: DateTime.local().toISO(),
-          sampleDelayTimeControl: '',
+export default {
+  components: { FormDatePicker },
+  data() {
+    return {
+      // The data model to bind our elements to
+      data: {
+        sampleInput: "",
+        sampleText: "",
+        sampleHtmlText:
+          "<h3>Edit this text inline</h3> <ul> <li>Add some <a href=\"https://github.com/ProcessMaker/vue-form-elements/branches\">links</a></li> <li><span style=\"color: #8e44ad;\">Color</span> some text</li> </ul>",
+        // Shows off ability to nest and refer to items deep in data model
+        password: {
+          value: "",
+          confirm: ""
         },
-        richtext: false,
-        inputValidationRules: 'required|min:2',
-        textValidationRules: 'max:255',
-        passwordValidationRules: 'required|regex:/(?=.{9,})(?=.*?[^\\w\\s])(?=.*?[0-9])(?=.*?[A-Z]).*?[a-z].*/',
-        confirmPasswordValidationRules: 'required|same:password.value',
-        selectOptions: {
-          defaultOptionKey: 'red',
-          key: 'value',
-          value: 'content',
-          jsonData: JSON.stringify([
-            {
-              content: 'Green',
-              value: 'green'
-            },
-            {
-              content: 'Red',
-              value: 'red'
-            },
-            {
-              content: 'Blue',
-              value: 'blue'
-            },
-            {
-              content: 'Yellow',
-              value: 'yellow'
-            },
-            {
-              content: 'White',
-              value: 'white'
-            },
-            {
-              content: 'Black',
-              value: 'black'
-            },
-          ])
-        },
-        radioButtonOptions: [
+        sampleCheckbox: false,
+        sampleCustomCheckbox: false,
+        sampleRadioButtonGroup: "",
+        sampleSelect: "",
+        sampleCustomValidationError: "",
+        sampleDatePicker: new Date().toISOString(),
+        sampleDelayTimeControl: ""
+      },
+      richtext: false,
+      inputValidationRules: "required|min:2",
+      textValidationRules: "max:255",
+      passwordValidationRules:
+        "required|regex:/(?=.{9,})(?=.*?[^\\w\\s])(?=.*?[0-9])(?=.*?[A-Z]).*?[a-z].*/",
+      confirmPasswordValidationRules: "required|same:password.value",
+      selectOptions: {
+        defaultOptionKey: "red",
+        key: "value",
+        value: "content",
+        jsonData: JSON.stringify([
+          {
+            content: "Green",
+            value: "green"
+          },
           {
-            content: 'Small',
-            value: 'small'
+            content: "Red",
+            value: "red"
           },
           {
-            content: 'Medium',
-            value: 'medium'
+            content: "Blue",
+            value: "blue"
           },
           {
-            content: 'Large',
-            value: 'large'
+            content: "Yellow",
+            value: "yellow"
           },
           {
-            content: 'X-Large',
-            value: 'xlarge'
+            content: "White",
+            value: "white"
           },
-        ],
-        customValidationMessages: {
-          required: 'This field is totally required and you should, like, put it in.'
+          {
+            content: "Black",
+            value: "black"
+          }
+        ])
+      },
+      radioButtonOptions: [
+        {
+          content: "Small",
+          value: "small"
+        },
+        {
+          content: "Medium",
+          value: "medium"
+        },
+        {
+          content: "Large",
+          value: "large"
+        },
+        {
+          content: "X-Large",
+          value: "xlarge"
         }
+      ],
+      customValidationMessages: {
+        required:
+          "This field is totally required and you should, like, put it in."
       }
-    }
-
+    };
   }
+};
 </script>
 
 <style lang="scss" scoped>
-    .container {
-        margin-bottom: 32px;
-    }
-
+.container {
+  margin-bottom: 32px;
+}
 </style>
diff --git a/src/components/DatePicker.vue b/src/components/DatePicker.vue
new file mode 100644
index 0000000..7fc0453
--- /dev/null
+++ b/src/components/DatePicker.vue
@@ -0,0 +1,29 @@
+<script>
+import DatePick from "vue-date-pick";
+
+/*
+Internal fork of the DatePick library by extending it and fixing the {close,remove} events to target the b-modal
+(Bootstrap-Vue) modals to not "focus-in" automatically on the input text.
+ */
+export default {
+  extends: DatePick,
+  methods: {
+    addCloseEvents() {
+      if (!this.closeEventListener) {
+        this.closeEventListener = (e) => this.inspectCloseEvent(e);
+        ["click", "keyup"].forEach((eventName) =>
+          document.addEventListener(eventName, this.closeEventListener)
+        );
+      }
+    },
+    removeCloseEvents() {
+      if (!this.closeEventListener) {
+        this.closeEventListener = (e) => this.inspectCloseEvent(e);
+        ["click", "keyup"].forEach((eventName) =>
+          document.addEventListener(eventName, this.closeEventListener)
+        );
+      }
+    }
+  }
+};
+</script>
diff --git a/src/components/FormDatePicker.vue b/src/components/FormDatePicker.vue
index e6497ac..3d6a2ea 100644
--- a/src/components/FormDatePicker.vue
+++ b/src/components/FormDatePicker.vue
@@ -1,68 +1,70 @@
 <template>
   <div class="form-group position-relative">
-    <label v-uni-for="name">{{label}}</label>
-    <date-picker
+    <label v-uni-for="name" class="mr-2">{{ label }}</label>
+    <date-pick
       v-model="date"
-      :config="config"
-      :disabled="disabled"
-      :placeholder="placeholder"
+      v-bind="config"
+      :format="format"
       :data-test="dataTest"
-      :aria-label="$attrs['aria-label']"
-      :tabindex="$attrs['tabindex']"
       :class="classList"
+      :input-attributes="inputAttributes"
+      @input="submitDate"
     />
     <div v-if="errors.length > 0" class="invalid-feedback d-block">
-      <div v-for="(error, index) in errors" :key="index">{{error}}</div>
+      <div v-for="(err, index) in errors" :key="index">{{ err }}</div>
     </div>
-    <small v-if="helper" class="form-text text-muted">{{helper}}</small>
+    <small v-if="helper" v-once class="form-text text-muted">{{
+      helper
+    }}</small>
   </div>
 </template>
 
 <script>
-import { createUniqIdsMixin } from 'vue-uniq-ids';
-import ValidationMixin from './mixins/validation';
+import { createUniqIdsMixin } from "vue-uniq-ids";
+import moment from "moment-timezone";
+import Mustache from "mustache";
+import DatePicker from "./DatePicker.vue";
+import ValidationMixin from "./mixins/validation";
 import DataFormatMixin from "./mixins/DataFormat";
-import datePicker from 'vue-bootstrap-datetimepicker';
-import moment from 'moment-timezone';
-import { getLang, getUserDateFormat, getUserDateTimeFormat } from '../dateUtils';
-import Mustache from 'mustache';
-let Validator = require('validatorjs');
+import { getUserDateFormat, getUserDateTimeFormat } from "../dateUtils";
+import "vue-date-pick/dist/vueDatePick.css";
 
-const uniqIdsMixin = createUniqIdsMixin();
-const checkFormats = ['YYYY-MM-DD', moment.ISO_8601];
-
-Validator.register('date_or_mustache', function(value, requirement, attribute) {
-  let rendered = null;
-  try {
-    // Clear out any mustache statements
-    rendered = Mustache.render(value, {});
-  } catch (e) {
-    rendered = value;
-  }
+const Validator = require("validatorjs");
 
-  if (value !== rendered) {
-    // contains mustache, so just give them the benefit of the doubt here
-    return true;
-  }
+const uniqIdsMixin = createUniqIdsMixin();
+const checkFormats = ["YYYY-MM-DD", moment.ISO_8601];
 
-  if (value === '') {
-    // Empty is ok, it just disables min/max
-    return true;
-  }
+Validator.register(
+  "date_or_mustache",
+  function(value, requirement, attribute) {
+    let rendered = null;
+    try {
+      // Clear out any mustache statements
+      rendered = Mustache.render(value, {});
+    } catch (e) {
+      rendered = value;
+    }
 
-  if (moment(value, checkFormats, true).isValid()) {
-    return true;
-  }
+    if (value !== rendered) {
+      // contains mustache, so just give them the benefit of the doubt here
+      return true;
+    }
 
-  return false;
+    if (value === "") {
+      // Empty is ok, it just disables min/max
+      return true;
+    }
 
-}, 'Must be YYYY-MM-DD, ISO8601, or mustache syntax');
+    return moment(value, checkFormats, true).isValid();
+  },
+  "Must be YYYY-MM-DD, ISO8601, or mustache syntax"
+);
 
 export default {
-  mixins: [uniqIdsMixin, ValidationMixin, DataFormatMixin],
   components: {
-    datePicker
+    "date-pick": DatePicker
   },
+  mixins: [uniqIdsMixin, ValidationMixin, DataFormatMixin],
   props: {
     name: String,
     placeholder: String,
@@ -71,119 +73,92 @@ export default {
     helper: String,
     dataFormat: String,
     value: [String, Boolean, Date],
-    inputClass: {type: [String, Array, Object], default: 'form-control'},
-    dataTest: String,
-    disabled: null,
+    ariaLabel: String,
+    tabIndex: Number,
+    inputClass: { type: [String, Array, Object], default: "form-control" },
+    dataTest: {
+      type: String,
+      default: "date-picker"
+    },
+    disabled: {
+      type: Boolean,
+      default: false
+    },
     minDate: { type: [String, Boolean], default: false },
-    maxDate: { type: [String, Boolean], default: false },
+    maxDate: { type: [String, Boolean], default: false }
   },
   data() {
     return {
       validatorErrors: [],
-      date: null,
-    }
-  },
-  created() {
-    Validator.register('after_min_date', (value, requirement, attribute) => {
-      if (this.parseDate(value) < this.parseDate(this.minDate)) {
-        return false;
+      date:
+        !!this.value && this.value.length > 0
+          ? this.parsingInputDate(this.value)
+          : "",
+      inputAttributes: {
+        class: `${this.inputClass}`,
+        placeholder: this.placeholder,
+        name: this.name,
+        "aria-label": this.ariaLabel,
+        "tab-index": this.tabIndex
       }
-      return true;
-    }, 'Must be after or equal Minimum Date');
+    };
   },
   computed: {
+    config() {
+      return {
+        format: this.format,
+        displayFormat: this.format,
+        pickTime: this.datepicker,
+        parseDate: this.parsingInputDate,
+        editable: !this.disabled,
+        use12HourClock: this.datepicker,
+        isDateDisabled: this.checkMinMaxDateDisabled
+      };
+    },
+    datepicker() {
+      return this.dataFormat === "datetime";
+    },
+    format() {
+      return this.datepicker ? getUserDateTimeFormat() : getUserDateFormat();
+    },
     classList() {
       return {
-        'is-invalid': (this.validator && this.validator.errorCount) || this.error,
-      }
+        "is-invalid":
+          (this.validator && this.validator.errorCount) || this.error
+      };
     },
     errors() {
       if (this.error) {
         return [...this.validatorErrors, this.error];
       }
       return this.validatorErrors;
-    },
-    config() {
-      return {
-        format: this.dataFormat === 'datetime' ? getUserDateTimeFormat() : getUserDateFormat(),
-        locale: getLang(),
-        useCurrent: false,
-        showClose: true,
-        minDate: this.parseDate(this.minDate),
-        maxDate: this.checkValidMaxDate(),
-        icons: {
-          time: 'far fa-clock',
-          date: 'far fa-calendar',
-          up: 'fas fa-arrow-up',
-          down: 'fas fa-arrow-down',
-          previous: 'fas fa-chevron-left',
-          next: 'fas fa-chevron-right',
-          today: 'fas fa-calendar-check',
-          clear: 'far fa-trash-alt',
-          close: 'far fa-times-circle'
-        }
-      };
-    },
+    }
   },
   watch: {
     validator: {
       deep: true,
       handler() {
-        this.validatorErrors = this.validator && this.validator.errors.get(this.name)
-          ? this.validator.errors.get(this.name)
-          : [];
-
-      },
-    },
-    date() {
-      if (this.value && !this.date) {
-        this.$emit('input', '');
+        this.validatorErrors =
+          this.validator && this.validator.errors.get(this.name)
+            ? this.validator.errors.get(this.name)
+            : [];
       }
-
-      if (this.isDateAndValueTheSame()) {
-        return;
-      }
-
-      const newDate = this.dataFormat === 'date' ? moment.utc(this.date, this.config.format) : moment(this.date, this.config.format);
-
-      this.$emit('input', newDate.toISOString());
-    },
-    value() {
-      if (!this.value) {
-        this.date = '';
-        return;
-      }
-
-      const newDate = this.generateDate(this.value);
-
-      if (!this.isDateAndValueTheSame()) {
-        this.date = newDate.format(this.config.format);
-      }
-    },
-    dataFormat: {
-      immediate: true,
-      handler() {
-        this.date = this.value
-          ? this.generateDate().format(this.config.format)
-          : '';
-      }
-    },
+    }
+  },
+  created() {
+    Validator.register(
+      "after_min_date",
+      (value, requirement, attribute) => {
+        return this.parseDate(value) >= this.parseDate(this.minDate);
+      },
+      "Must be after or equal Minimum Date"
+    );
   },
   methods: {
-    checkValidMaxDate() {
-      if (this.minDate == '') {
-        return this.parseDate(this.maxDate);
-      }
-      if (this.parseDate(this.maxDate) >= this.parseDate(this.minDate)) {
-        return this.parseDate(this.maxDate);
-      }
-      return false;
-    },
     parseDate(val) {
       let date = false;
 
-      if (typeof val === 'string' && val !== '') {
-
+      if (typeof val === "string" && val !== "") {
         try {
           date = Mustache.render(val, this.validationData);
         } catch (error) {
@@ -198,6 +173,54 @@ export default {
 
       return date;
     },
+    parseDateToDate(val) {
+      let date = "";
+
+      if (typeof val === "string" && val !== "") {
+        try {
+          date = Mustache.render(val, this.validationData);
+        } catch (error) {
+          date = val;
+        }
+
+        date = moment(date, checkFormats, true);
+        if (!date.isValid()) {
+          date = "";
+        } else {
+          date = date.toDate();
+        }
+      }
+
+      return date;
+    },
+    parsingInputDate(val) {
+      const date = moment(val, this.format, true);
+      // Check if user is typing, if the date is not valid, let the user continue
+      if (!date.isValid()) return "";
+      return date.toDate();
+    },
+    /*
+    Function to be used for the DatePicker, to see if minDate and maxDate are
+    1. Valid
+    2. Within the range
+    In the datepicker itself, this goes through a for loop to check if the dates that the user is seeing, are valid and
+    acceptable
+    @param {string, Date} date
+    @returns {boolean}
+     */
+    checkMinMaxDateDisabled(date) {
+      const minDate = !!this.minDate ? this.parseDateToDate(this.minDate) : "";
+      const maxDate = !!this.maxDate ? this.parseDateToDate(this.maxDate) : "";
+      // If minDate and maxDate are not defined, return. This would be the default case
+      if (minDate.length === 0 && maxDate.length === 0) return;
+      if (!!minDate && !!maxDate) {
+        return !(date >= minDate && date <= maxDate);
+      }
+      // If minDate is defined but maxDate not defined, block the dates before minDate is defined
+      if (!!minDate && maxDate.length === 0) return date < minDate;
+      // If maxDate is defined but minDate not defined, block the dates after maxDate is defined
+      if (minDate.length === 0 && !!maxDate) return date > maxDate;
+    },
     isDateAndValueTheSame() {
       if (!this.date && !this.value) {
         return true;
@@ -205,27 +228,31 @@ export default {
 
       const currentDate = moment(this.date, this.config.format);
       const currentValue = this.value ? moment(this.value) : null;
-      const comparatorString = this.dataFormat !== 'datetime' ? 'day' : null;
+      const comparatorString = this.dataFormat !== "datetime" ? "day" : null;
 
       return currentDate.isSame(currentValue, comparatorString);
     },
-    generateDate(value = this.value) {
-      let date = moment(value);
-
-      if (!date.isValid()) {
-        date = moment();
+    submitDate() {
+      if (this.value && !this.date) {
+        this.$emit("input", "");
       }
-
-      return date;
-    },
-  },
+      if (this.isDateAndValueTheSame()) return;
+      const newDate =
+        this.dataFormat === "date"
+          ? moment.utc(this.date, this.config.format)
+          : moment(this.date, this.config.format);
+      // Check if the date that the user inputted, is valid against the minDate set
+      if (newDate < this.parseDateToDate(this.minDate)) return null;
+      // Check if the date that the user inputted, is valid against the maxDate set
+      if (this.parseDateToDate(this.maxDate) > newDate) return null;
+      this.$emit("input", newDate.toISOString());
+    }
+  }
 };
 </script>
 
 <style>
-  @import '~pc-bootstrap4-datetimepicker/build/css/bootstrap-datetimepicker.css';
-
-  .inspector-container .bootstrap-datetimepicker-widget.dropdown-menu {
-    font-size: 11px;
-  }
+.vdpHeadCell {
+  padding: 0.3em 0.4em 1.8em;
+}
 </style>