feat(quasar): Hide days not belonging to the current month in date pi…

…cker ref quasarframework#4760
pdanpdan · Jul 31, 2019 · 294c7d2 · 294c7d2
1 parent b8f7aef
commit 294c7d2
Show file tree

Hide file tree

Showing 2 changed files with 6 additions and 3 deletions.
diff --git a/ui/src/components/datetime/QDate.js b/ui/src/components/datetime/QDate.js
@@ -208,7 +208,7 @@ export default Vue.extend({
       const len = days < 0 ? days + 7 : days
       if (len < 6) {
         for (let i = endDay - len; i <= endDay; i++) {
-          res.push({ i })
+          res.push({ i, fill: true })
         }
       }
 
@@ -249,7 +249,7 @@ export default Vue.extend({
       if (left > 0) {
         const afterDays = 7 - left
         for (let i = 1; i <= afterDays; i++) {
-          res.push({ i })
+          res.push({ i, fill: true })
         }
       }
 
@@ -479,7 +479,7 @@ export default Vue.extend({
                 key: this.innerModel.year + '/' + this.innerModel.month,
                 staticClass: 'q-date__calendar-days fit'
               }, this.days.map(day => h('div', {
-                staticClass: `q-date__calendar-item q-date__calendar-item--${day.in === true ? 'in' : 'out'}`
+                staticClass: `q-date__calendar-item q-date__calendar-item--${day.fill === true ? 'fill' : (day.in === true ? 'in' : 'out')}`
               }, [
                 day.in === true
                   ? h(QBtn, {

diff --git a/ui/src/components/datetime/date.styl b/ui/src/components/datetime/date.styl
@@ -80,6 +80,9 @@
     &--out
       opacity .18
 
+    &--fill
+      visibility hidden
+
   &__calendar-days-container
     height 75%