Add DateTimePicker component

package.json

@@ -8,6 +8,7 @@
     "lint": "vue-cli-service lint"
   },
   "dependencies": {
+    "flatpickr": "^4.6.3",
     "popper.js": "^1.14.6",
     "vue": "^2.5.21",
     "vue-clickaway": "^2.2.2",

src/App.vue

@@ -6,6 +6,7 @@
       <router-link to="/table" tag="li" exact><a>Table</a></router-link>
       <router-link to="/popover" tag="li" exact><a>Popover</a></router-link>
       <router-link to="/switch" tag="li" exact><a>Switch</a></router-link>
+      <router-link to="/date-time-picker" tag="li" exact><a>Date Time Picker</a></router-link>
     </AdminMenu>
 
     <div id="wpcontent">

src/assets/app.css

@@ -0,0 +1,12 @@
+@import '../assets/wp.css';
+@import '~flatpickr/dist/flatpickr.css';
+/*Uncomment your prefered theme from the list below:*/
+
+/*@import '~flatpickr/dist/themes/airbnb.css';*/
+/*@import '~flatpickr/dist/themes/confetti.css';*/
+/*@import '~flatpickr/dist/themes/dark.css';*/
+/*@import '~flatpickr/dist/themes/light.css';*/
+/*@import '~flatpickr/dist/themes/material_blue.css';*/
+/*@import '~flatpickr/dist/themes/material_green.css';*/
+/*@import '~flatpickr/dist/themes/material_orange.css';*/
+/*@import '~flatpickr/dist/themes/material_red.css';*/

src/components/DateTimePicker.vue

@@ -0,0 +1,52 @@
+<template>
+  <input :value="value" ref="dtInput" type="text">
+</template>
+<script>
+    import flatpickr from "flatpickr";
+    export default {
+        name: 'DateTimePicker',
+        props: {
+            value: { required: true },
+            format: { default: 'Y-m-d' },
+            asString: { type: Boolean, default: false },
+            time: { type: Boolean, default: false },
+            date: { type: Boolean, default: false },
+            dateTime: { type: Boolean, default: false },
+            options: { default: () => ({}) }
+        },
+        computed: {
+            getFormat() {
+                if (this.dateTime) {
+                    return 'Y-m-d H:i'
+                } else if (this.date) {
+                    return 'Y-m-d'
+                } else if (this.time) {
+                    return 'H:i'
+                } else {
+                    return null
+                }
+            }
+        },
+        mounted() {
+            const vm = this;
+            flatpickr(vm.$refs.dtInput, {
+                onChange: function(selectedDates, dateStr, instance) {
+                    if ((vm.options.mode == 'multiple' || vm.options.mode == 'range') && !vm.asString) {
+                        const dates = selectedDates.map(date => {
+                            const parsed = instance.formatDate(date, vm.getFormat || vm.format)
+                            return parsed
+                        });
+                        vm.$emit('input', dates)
+                    } else {
+                        vm.$emit('input', dateStr)
+                    }
+                },
+                defaultDate: vm.value,
+                enableTime: vm.dateTime || vm.time,
+                noCalendar: vm.time,
+                dateFormat: vm.getFormat || vm.format,
+                ...vm.options
+            });
+        }
+    }
+</script>

src/main.js

@@ -4,9 +4,9 @@ import router from './router'
 
 Vue.config.productionTip = false
 
-import './assets/wp.css'
+import './assets/app.css'
 
 new Vue({
-  router,
-  render: h => h(App)
+    router,
+    render: h => h(App)
 }).$mount('#app')

src/router.js

@@ -5,18 +5,20 @@ import Buttons from './views/Buttons.vue'
 import Table from './views/Table.vue'
 import Popover from './views/Popover.vue'
 import Switch from './views/Switch.vue'
+import DateTimePicker from './views/DateTimePicker.vue'
 
 Vue.use(Router)
 
 export default new Router({
-  mode: 'hash',
-  base: process.env.BASE_URL,
-  linkExactActiveClass: 'current',
-  routes: [
-    { path: '/', name: 'home', component: Home },
-    { path: '/buttons', name: 'buttons', component: Buttons },
-    { path: '/table', name: 'table', component: Table },
-    { path: '/popover', name: 'popover', component: Popover },
-    { path: '/switch', name: 'switch', component: Switch },
-  ]
+    mode: 'hash',
+    base: process.env.BASE_URL,
+    linkExactActiveClass: 'current',
+    routes: [
+        { path: '/', name: 'home', component: Home },
+        { path: '/buttons', name: 'buttons', component: Buttons },
+        { path: '/table', name: 'table', component: Table },
+        { path: '/popover', name: 'popover', component: Popover },
+        { path: '/switch', name: 'switch', component: Switch },
+        { path: '/date-time-picker', name: 'date-time-picker', component: DateTimePicker },
+    ]
 })

src/views/DateTimePicker.vue

@@ -0,0 +1,92 @@
+<template>
+  <section>
+    <h1>DateTimePicker</h1>
+    <p>This DateTimePicker component has the following features: </p>
+    <ol>
+      <li>Date Picker</li>
+      <li>Time Picker</li>
+      <li>Date Time Picker</li>
+      <li>Date Range Picker</li>
+      <li>Multi Date Picker</li>
+    </ol>
+    <h4>Examples:</h4>
+    <div class="sep">
+      <h3>1. Date Picker:</h3>
+      <p><code>{{ datePickerSample }}</code></p>
+      <date-time-picker v-model="datePicker" />
+      <!--  Or, <date-time-picker v-model="dateTime" date />  -->
+    </div>
+
+    <div class="sep">
+      <h3>2. Time Picker:</h3>
+      <p><code>{{ timePickerSample }}</code></p>
+      <date-time-picker v-model="timePicker" time />
+    </div>
+
+    <div class="sep">
+      <h3>3. Date Time Picker:</h3>
+      <p><code>{{ dateTimePickerSample }}</code></p>
+      <date-time-picker v-model="dateTimePicker" date-time />
+    </div>
+
+    <div class="sep">
+      <h3>4. Date Range Picker (v-model as string):</h3>
+      <p><code>{{ dateRangePickerStringSample }}</code></p>
+      <date-time-picker v-model="dateRangePickerString" :options="{mode: 'range'}" as-string />
+    </div>
+
+    <div class="sep">
+      <h3>5. Date Range Picker (v-model as array):</h3>
+      <p><code>{{ dateRangePickerArraySample }}</code></p>
+      <date-time-picker v-model="dateRangePickerArray" :options="{mode: 'range'}" />
+    </div>
+
+    <div class="sep">
+      <h3>6. Multi Date Picker (v-model as string):</h3>
+      <p><code>{{ multiDatePickerStringSample }}</code></p>
+      <date-time-picker v-model="multiDatePickerString" :options="{mode: 'multiple'}" as-string />
+    </div>
+
+    <div class="sep">
+      <h3>7. Multi Date Picker (v-model as array):</h3>
+      <p><code>{{ multiDatePickerArraySample }}</code></p>
+      <date-time-picker v-model="multiDatePickerArray" :options="{mode: 'multiple'}" />
+    </div>
+
+    <p>Additional configurations may be passed in the <code>options</code> prop <a href="https://flatpickr.js.org/options/">as listed here.</a></p>
+    <p>[<strong>Note: To apply a theme, uncomment your prefered theme from <code>app.css</code></strong>]</p>
+  </section>
+</template>
+<script>
+    import DateTimePicker from '@/components/DateTimePicker'
+
+    export default {
+        components: {
+            DateTimePicker
+        },
+        data() {
+            return {
+                datePicker: Date.now(),
+                timePicker: Date.now(),
+                dateTimePicker: Date.now(),
+                dateRangePickerString: Date.now(),
+                dateRangePickerArray: Date.now(),
+                multiDatePickerString: Date.now(),
+                multiDatePickerArray: Date.now(),
+
+                datePickerSample: '<date-time-picker v-model="datePicker" />',
+                timePickerSample: '<date-time-picker v-model="datePicker" time />',
+                dateTimePickerSample: '<date-time-picker v-model="datePicker" date-time />',
+                dateRangePickerStringSample: '<date-time-picker v-model="dateRangePickerString" :options="{mode: \'range\'}" as-string />',
+                dateRangePickerArraySample: '<date-time-picker v-model="dateRangePickerArray" :options="{mode: \'range\'}" />',
+                multiDatePickerStringSample: '<date-time-picker v-model="multiDatePickerString" :options="{mode: \'multiple\'}" as-string />',
+                multiDatePickerArraySample: '<date-time-picker v-model="multiDatePickerArray" :options="{mode: \'multiple\'}" />',
+            }
+        }
+    }
+</script>
+<style scoped>
+  .sep {
+    margin: 1rem 0 2rem 0;
+  }
+</style>