Flatpickr wrapper

package.json

@@ -89,6 +89,7 @@
     "shelljs": "0.7.6",
     "url-loader": "0.5.8",
     "vue-component-tree": "^2.2.1",
+    "vue-flatpickr-component": "^7.0.1",
     "vue-loader": "13.3.0",
     "vue-style-loader": "3.0.1",
     "vue-template-compiler": "2.5.2",

src/components/ui/date-time-pickers/DateTimePickers.vue

@@ -0,0 +1,93 @@
+<template>
+  <div class="sets-list row">
+    <div class="col-md-12">
+      <div class="row">
+        <div class="col-lg-4">
+          <vuestic-widget :headerText="$t('dateTimePicker.basic')">
+            <div class="form-group">
+              <div class="input-group">
+                <vuestic-date-picker
+                  id="date-picker-basic"
+                  v-model="simple"
+                />
+                <label class="control-label" for="date-picker-basic">{{ $t('dateTimePicker.basic') }}</label>
+                <i class="bar"></i>
+              </div>
+            </div>
+          </vuestic-widget>
+        </div>
+        <div class="col-lg-4">
+          <vuestic-widget :headerText="$t('dateTimePicker.time')">
+            <div class="form-group">
+              <div class="input-group">
+                <vuestic-date-picker
+                  id="date-picker-time"
+                  :config="{enableTime: true}"
+                  v-model="time"
+                />
+                <label class="control-label" for="date-picker-time">{{ $t('dateTimePicker.time') }}</label>
+                <i class="bar"></i>
+              </div>
+            </div>
+          </vuestic-widget>
+        </div>
+        <div class="col-lg-4">
+          <vuestic-widget :headerText="$t('dateTimePicker.range')">
+            <div class="form-group">
+              <div class="input-group">
+                <vuestic-date-picker
+                  id="date-picker-range"
+                  :config="{mode: 'range'}"
+                  v-model="range"
+                />
+                <label class="control-label" for="date-picker-range">{{ $t('dateTimePicker.range') }}</label>
+                <i class="bar"></i>
+              </div>
+            </div>
+          </vuestic-widget>
+        </div>
+        <div class="col-lg-4">
+          <vuestic-widget :headerText="$t('dateTimePicker.multiple')">
+            <div class="form-group">
+              <div class="input-group">
+                <vuestic-date-picker
+                  id="date-picker-multiple"
+                  :config="{mode: 'multiple'}"
+                  v-model="multiple"
+                />
+                <label class="control-label" for="date-picker-multiple">{{ $t('dateTimePicker.multiple') }}</label>
+                <i class="bar"></i>
+              </div>
+            </div>
+          </vuestic-widget>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+  import VuesticWidget
+    from '../../../vuestic-theme/vuestic-components/vuestic-widget/VuesticWidget.vue'
+  import VuesticDatePicker from '../../../vuestic-theme/vuestic-components/vuestick-date-picker/VuesticDatePicker.vue'
+
+  export default {
+    name: 'date-time-pickers',
+    data () {
+      return {
+        simple: '2018-06-12',
+        time: '2018-04-26 12:20',
+        range: '2018-04-10 to 2018-04-18',
+        multiple: '2018-04-25, 2018-04-27',
+      }
+    },
+    components: {
+      VuesticDatePicker,
+      VuesticWidget
+    },
+  }
+</script>
+
+<style lang="scss">
+
+</style>

src/components/ui/tree-view/TreeView.vue

@@ -69,4 +69,3 @@
 <style lang="scss">
 
 </style>
-

src/i18n/en.json

@@ -175,7 +175,8 @@
     "tables": "Tables",
     "typography": "Typography",
     "uiElements": "UI Elements",
-    "treeView": "Tree view"
+    "treeView": "Tree view",
+    "dateTimePickers": "Date time pickers"
   },
   "messages": {
     "all": "See all messages",
@@ -237,5 +238,11 @@
     "selectable": "Selectable",
     "editable": "Editable",
     "advanced": "Advanced"
+  },
+  "dateTimePicker": {
+    "basic": "Basic",
+    "time": "Time",
+    "range": "Range",
+    "multiple": "Multiple"
   }
 }

src/router/index.js

@@ -7,10 +7,10 @@ Vue.use(Router)
 
 const demoRoutes = []
 if (process.env.NODE_ENV === 'development') {
-  const VueComponentTree = require('vue-component-tree')
+  const VueComponentTree = require('vue-component-tree').default
 
   demoRoutes.push(
-    VueComponentTree.default(require.context('./..', true, /.demo.vue$/), '/demo')
+    VueComponentTree(require.context('./..', true, /.demo.vue$/), '/demo')
   )
 }
 

src/sass/_mixins.scss

@@ -1,3 +1,9 @@
+@mixin flex-center () {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
 @mixin theme-button-variant($color, $background, $border, $shadow) {
   $hover-bg: lighten($background, 10%);
   $disabled-bg: darken($background, 15%);

src/sass/main.scss

@@ -12,6 +12,7 @@
 @import "~awesome-bootstrap-checkbox/awesome-bootstrap-checkbox.scss";
 @import "~medium-editor/src/sass/medium-editor";
 @import "_icons-styles.scss";
+@import "~flatpickr/dist/flatpickr.css";
 
 @import "base";
 @import "typography";

src/store/modules/menu/ui.js

@@ -87,6 +87,14 @@ export default {
       meta: {
         title: 'menu.treeView'
       }
+    },
+    {
+      name: 'DateTimePickers',
+      path: '/ui/date-time-pickers',
+      component: lazyLoading('ui/date-time-pickers/DateTimePickers'),
+      meta: {
+        title: 'menu.dateTimePickers'
+      }
     }
   ]
 }

src/vuestic-theme/vuestic-components/vuestic-tree-view/vuestic-tree-view-readme.md

@@ -6,7 +6,7 @@
 ```
 
 ```javascript
-import VuesticTreeViewRootMapper from 'vuestic-admin/src/vuestic-theme/vuestic-components/vuestic-tree-view/VuesticTreeRootMapper.js'
+import VuesticTreeViewRootMapper from '~vuestic-admin/src/vuestic-theme/vuestic-components/vuestic-tree-view/VuesticTreeRootMapper.js'
 
   data () {
     vuesticTreeRoot: VuesticTreeRootMapper.map([

src/vuestic-theme/vuestic-components/vuestick-date-picker/VuesticDatePicker.demo.vue

@@ -0,0 +1,64 @@
+<template>
+  <div
+    style="left: 420px; top: 180px; background-color: white; position: absolute"
+  >
+    <div class="form-group">
+      <div class="input-group">
+        <vuestic-date-picker
+          id="simple-input"
+          v-model="one"
+        />
+        <label class="control-label" for="simple-input">Simple</label>
+        <i class="bar"></i>
+      </div>
+      <div class="input-group">
+        <vuestic-date-picker
+          id="simple-input-2"
+          v-model="two"
+          :config="{mode: 'range'}"
+        />
+        <label class="control-label" for="simple-input-2">Range</label>
+        <i class="bar"></i>
+      </div>
+      <div class="input-group">
+        <vuestic-date-picker
+          id="simple-input-3"
+          v-model="three"
+          :config="{enableTime: true}"
+        />
+        <label class="control-label" for="simple-input-3">Day time</label>
+        <i class="bar"></i>
+      </div>
+      <div class="input-group">
+        <vuestic-date-picker
+          id="simple-input-4"
+          v-model="three"
+          :config="{enableTime: true}"
+          @on-change="doSomethingOnChange"
+        />
+        <label class="control-label" for="simple-input-4">Day time</label>
+        <i class="bar"></i>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+  import VuesticDatePicker from './VuesticDatePicker.vue'
+
+  export default {
+    components: { VuesticDatePicker },
+    data () {
+      return {
+        one: null,
+        two: null,
+        three: null,
+      }
+    },
+    methods: {
+      doSomethingOnChange (input) {
+        console.log('input', input)
+      },
+    },
+  }
+</script>