feat: quasarframework#29 Draft for Datepicker component

Author: rstoenescu

build/script.build.javascript.js

@@ -24,15 +24,16 @@ var
     include: ['**/*.svg', '**/*.html']
   },
   external = [
-    'jquery',
     'fastclick',
     'hammerjs',
+    'moment',
     'velocity-animate',
     'velocity-animate/velocity.ui'
   ],
   globals = {
     fastclick: 'FastClick',
     hammerjs: 'Hammer',
+    moment: 'moment',
     'velocity-animate': 'Velocity',
     'velocity-animate/velocity.ui': 'velui'
   },

dev/views/form.vue

@@ -1,5 +1,19 @@
 <template>
 
+  <p class="caption">Date</p>
+  <quasar-datetime :model.sync="timestamp" type="date"></quasar-datetime>
+  <br>
+  <quasar-inline-datetime :model.sync="timestamp" type="date"></quasar-inline-datetime>
+  <p class="caption">Time</p>
+  <quasar-datetime :model.sync="timestamp" type="time"></quasar-datetime>
+  <br>
+  <quasar-inline-datetime :model.sync="timestamp" type="time"></quasar-inline-datetime>
+  <p class="caption">Datetime</p>
+  <quasar-datetime :model.sync="timestamp" type="datetime"></quasar-datetime>
+  <br>
+  <quasar-inline-datetime :model.sync="timestamp" type="datetime"></quasar-inline-datetime>
+
+  <div style="height: 50px">&nbsp;</div>
   <div style="border: 1px solid black">
     <input v-model="text">
     <input v-model="text" :disabled="true">
@@ -353,7 +367,8 @@ export default {
       text: '',
       multiline: '',
       number: 64,
-      number2: 44
+      number2: 44,
+      timestamp: '2004-02-01T20:45:00.000Z'
     }
   }
 }

package.json

@@ -122,6 +122,7 @@
   "peerDependencies": {
     "fastclick": "^1.0.6",
     "hammerjs": "^2.0.8",
+    "moment": "^2.14.1",
     "velocity-animate": "^1.2.3",
     "vue": "^1.0.26",
     "vue-touch": "^1.1.0"

src/components/modal/modal.js

@@ -87,6 +87,8 @@ class Modal {
       this.$backdrop.addEventListener('click', this.close)
     }
 
+    document.body.classList.add('with-modal')
+
     let
       effect,
       options = {
@@ -144,6 +146,7 @@ class Modal {
           duration,
           complete: () => {
             this.$el.classList.add('hidden')
+            document.body.classList.remove('with-modal')
 
             if (this.selfDestroy) {
               this.destroy()

src/components/modal/modal.mat.styl

@@ -17,6 +17,8 @@ $modal-slim-body-padding ?= 0 24px
 $modal-scroll-size       ?= 240px
 $modal-buttons-padding   ?= 8px 8px 12px 24px
 
+body.with-modal
+  overflow hidden !important
 
 minimized-modal()
   max-width 80vw

src/install.js

@@ -16,6 +16,9 @@ import Checkbox from './vue-components/checkbox/checkbox.vue'
 import Chips from './vue-components/chips/chips.vue'
 import ContextMenuDesktop from './vue-components/context-menu/context-menu-desktop.vue'
 import ContextMenuMobile from './vue-components/context-menu/context-menu-mobile.vue'
+import Datetime from './vue-components/datetime/datetime.vue'
+import DesktopDatetime from './vue-components/datetime/datetime-desktop.vue'
+import InlineDatetime from './vue-components/datetime/inline-datetime.vue'
 import Drawer from './vue-components/drawer/drawer.vue'
 import DrawerLink from './vue-components/drawer/drawer-link.vue'
 import Fab from './vue-components/fab/fab.vue'
@@ -72,6 +75,8 @@ function registerComponents (_Vue) {
   _Vue.component('quasar-checkbox', Checkbox)
   _Vue.component('quasar-chips', Chips)
   _Vue.component('quasar-context-menu', Platform.is.desktop ? ContextMenuDesktop : ContextMenuMobile)
+  _Vue.component('quasar-datetime', Platform.is.desktop ? DesktopDatetime : Datetime)
+  _Vue.component('quasar-inline-datetime', InlineDatetime)
   _Vue.component('quasar-drawer', Drawer)
   _Vue.component('quasar-drawer-link', DrawerLink)
   _Vue.component('quasar-fab', Fab)

src/themes/core/orientation.styl

@@ -28,3 +28,21 @@
     transform rotate(0deg)
   100%
     transform rotate(359deg)
+
+@keyframes quasar-pop-in
+  0%
+    opacity 0
+    transform scale(.7)
+  70%
+    opacity 1
+    transform scale(1.07)
+  100%
+    transform scale(1)
+
+@keyframes quasar-scale-in
+  0%
+    opacity 0
+    transform scale(.7)
+  100%
+    opacity 1
+    transform scale(1)

src/vue-components/datetime/datetime-desktop.vue

@@ -0,0 +1,66 @@
+<template>
+  <div class="quasar-datetime-desktop">
+    <quasar-popover v-ref:popover :disabled="disabled">
+      <div slot="target" class="cursor-pointer textfield" :class="{disabled: disabled}">
+        <span>{{{ label }}}</span>
+        <span class="float-right quasar-select-arrow">&#8675</span>
+      </div>
+
+      <quasar-inline-datetime :model.sync="model" :type="type"></quasar-inline-datetime>
+    </quasar-popover>
+  </div>
+</template>
+
+<script>
+import moment from 'moment'
+
+export default {
+  props: {
+    type: {
+      type: String,
+      default: 'date',
+      twoWay: true
+    },
+    model: {
+      type: String,
+      required: true
+    },
+    format: {
+      type: String
+    },
+    okLabel: {
+      type: String,
+      default: 'Set'
+    },
+    cancelLabel: {
+      type: String,
+      default: 'Cancel'
+    },
+    disabled: {
+      type: Boolean,
+      default: false,
+      coerce: Boolean
+    }
+  },
+  computed: {
+    label () {
+      let format
+
+      if (this.format) {
+        format = this.format
+      }
+      else if (this.type === 'date') {
+        format = 'YYYY-MM-DD'
+      }
+      else if (this.type === 'time') {
+        format = 'HH:mm'
+      }
+      else {
+        format = 'YYYY-MM-DD HH:mm:ss'
+      }
+
+      return moment(this.model).format(format)
+    }
+  }
+}
+</script>

src/vue-components/datetime/datetime-modal.vue

@@ -0,0 +1,16 @@
+<template>
+  <div>
+    <quasar-inline-datetime :model.sync="model" :type="type">
+      <div class="modal-buttons row full-width">
+        <button @click="close()" class="primary clear">{{ cancelLabel }}</button>
+        <button @click="set(model)" class="primary clear">{{ okLabel }}</button>
+      </div>
+    </quasar-inline-datetime>
+  </div>
+</template>
+
+<script>
+export default {
+  methods: {}
+}
+</script>