fix: minor refactoring

tiant11 · Mar 26, 2019 · 55feb8c · 55feb8c
1 parent 1195607
commit 55feb8c
Show file tree

Hide file tree

Showing 2 changed files with 23 additions and 24 deletions.
diff --git a/src/components/ui/datepickers/Datepickers.vue b/src/components/ui/datepickers/Datepickers.vue
@@ -3,61 +3,61 @@
     <div class="va-row">
 
       <div class="small-set flex lg6 xs12">
-        <vuestic-widget :headerText="$t('datepickers.dateOfBirth')">
+        <va-card :title="$t('datepickers.dateOfBirth')">
           <va-date-picker
             v-model="simple"
           />
-        </vuestic-widget>
+        </va-card>
       </div>
 
       <div class="small-set flex lg6 xs12">
-        <vuestic-widget :headerText="$t('datepickers.daysOfTheWeek')">
+        <va-card :title="$t('datepickers.daysOfTheWeek')">
           <va-date-picker
             v-model="weekDays"
             weekDays
           />
-        </vuestic-widget>
+        </va-card>
       </div>
     </div>
     <div class="va-row">
 
       <div class="small-set flex lg6 xs12">
-        <vuestic-widget :headerText="$t('datepickers.setupMeeting')">
+        <va-card :title="$t('datepickers.setupMeeting')">
           <va-date-picker
             enableTime
             v-model="dayTime"
           />
-        </vuestic-widget>
+        </va-card>
       </div>
 
       <div class="small-set flex lg6 xs12">
-        <vuestic-widget :headerText="$t('datepickers.upcomingVacation')">
+        <va-card :title="$t('datepickers.upcomingVacation')">
           <va-date-picker
             mode="range"
             v-model="range"
           />
-        </vuestic-widget>
+        </va-card>
       </div>
     </div>
     <div class="va-row">
       <div class="small-set flex lg6 xs12">
-        <vuestic-widget :headerText="$t('datepickers.multipleAndDisabledDates')">
+        <va-card :title="$t('datepickers.multipleAndDisabledDates')">
           <va-date-picker
             mode="multiple"
             :disable="disable"
             v-model="multipleDates"
           />
-        </vuestic-widget>
+        </va-card>
       </div>
       <div class="small-set flex lg6 xs12">
-        <vuestic-widget :headerText="$t('datepickers.inline')">
+        <va-card :title="$t('datepickers.inline')">
           <va-date-picker
             mode="multiple"
             :disable="disable"
             inline
             v-model="inline"
           />
-        </vuestic-widget>
+        </va-card>
       </div>
     </div>
   </div>

diff --git a/src/vuestic-theme/vuestic-components/va-date-picker/VaDatePicker.vue b/src/vuestic-theme/vuestic-components/va-date-picker/VaDatePicker.vue
@@ -25,7 +25,8 @@ export default {
       required: true,
     },
     weekDays: {
-      type: Boolean
+      type: Boolean,
+      default: false
     },
     mode: {
       type: String,
@@ -88,19 +89,11 @@ export default {
     }
   },
   methods: {
-    onOpen (selectedDates, dateStr, instance) {
-      if (!this.weekDays) {
-        let el = instance.calendarContainer.getElementsByClassName('flatpickr-weekdays')[0]
-        el.classList.add('flatpickr-weekdays--hidden')
+    onOpen (selectedDates, dateStr, pcrObject) {
+      if (this.weekDays) {
+        pcrObject.calendarContainer.classList.add('flatpickr-calendar--show-days')
       }
     },
-  },
-  mounted () {
-    if (this.inline) {
-      let el = this.$el.getElementsByClassName('flatpickr-calendar')[0]
-      this.$el.removeChild(el)
-      this.$el.appendChild(el)
-    }
   }
 }
 </script>
@@ -170,6 +163,12 @@ $dayMargin: 0.6rem;
   background-color: $datepickerBackground;
   box-shadow: $datepicker-box-shadow;
 
+  :not(.flatpickr-calendar--show-days) {
+    .flatpickr-weekdays {
+      display: none;
+    }
+  }
+
   &.arrowTop {
     &:before {
       content: none;