From 221364401a554a2a1712053da9ad37d592f14c9d Mon Sep 17 00:00:00 2001
From: Tanmay Mishu <tanmaymishu@gmail.com>
Date: Wed, 6 Nov 2019 15:31:34 +0600
Subject: [PATCH] Add DateTimePicker component

---
 package-lock.json                 |  5 ++
 package.json                      |  1 +
 src/App.vue                       |  1 +
 src/assets/app.css                | 12 ++++
 src/components/DateTimePicker.vue | 52 +++++++++++++++++
 src/main.js                       |  6 +-
 src/router.js                     | 22 ++++----
 src/views/DateTimePicker.vue      | 92 +++++++++++++++++++++++++++++++
 8 files changed, 178 insertions(+), 13 deletions(-)
 create mode 100644 src/assets/app.css
 create mode 100644 src/components/DateTimePicker.vue
 create mode 100644 src/views/DateTimePicker.vue

diff --git a/package-lock.json b/package-lock.json
index f48a68f..38494c3 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -4562,6 +4562,11 @@
         "write": "^0.2.1"
       }
     },
+    "flatpickr": {
+      "version": "4.6.3",
+      "resolved": "https://registry.npmjs.org/flatpickr/-/flatpickr-4.6.3.tgz",
+      "integrity": "sha512-007VucCkqNOMMb9ggRLNuJowwaJcyOh4sKAFcdGfahfGc7JQbf94zSzjdBq/wVyHWUEs5o3+idhFZ0wbZMRmVQ=="
+    },
     "flush-write-stream": {
       "version": "1.0.3",
       "resolved": "https://registry.npmjs.org/flush-write-stream/-/flush-write-stream-1.0.3.tgz",
diff --git a/package.json b/package.json
index 3e6ccbe..6f4feef 100644
--- a/package.json
+++ b/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",
diff --git a/src/App.vue b/src/App.vue
index 3df1b68..d31ac73 100644
--- a/src/App.vue
+++ b/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">
diff --git a/src/assets/app.css b/src/assets/app.css
new file mode 100644
index 0000000..eca3b22
--- /dev/null
+++ b/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';*/
diff --git a/src/components/DateTimePicker.vue b/src/components/DateTimePicker.vue
new file mode 100644
index 0000000..5d22072
--- /dev/null
+++ b/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>
diff --git a/src/main.js b/src/main.js
index ac5344c..1a70524 100644
--- a/src/main.js
+++ b/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')
diff --git a/src/router.js b/src/router.js
index 192ce77..8c0880d 100644
--- a/src/router.js
+++ b/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 },
+    ]
 })
diff --git a/src/views/DateTimePicker.vue b/src/views/DateTimePicker.vue
new file mode 100644
index 0000000..4b4e4ac
--- /dev/null
+++ b/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>