fix perfomance of buttons and improve month and year layout

Author: marcosmoura

docs/src/pages/components/DatePicker.vue

@@ -53,7 +53,7 @@
 <script>
   export default {
     data: () => ({
-      date: new Date()
+      date: new Date('2018-05-20')
     })
   };
 </script>

src/components/mdDatePicker/mdDatePicker.scss

@@ -301,46 +301,58 @@ $month-small-width: 280px;
   }
 }
 
-.md-datepicker-years {
+.md-datepicker-years,
+.md-datepicker-months {
   max-height: 260px;
   padding: 0 8px 7px;
   display: flex;
   flex-wrap: wrap;
   overflow: auto;
+  position: relative;
+  z-index: 1;
+  border-bottom: 1px solid rgba(#000, .12);
 
   @include layout-xsmall {
-    flex-flow: column;
+    flex-flow: column nowrap;
+    align-items: center;
   }
+}
 
+.md-datepicker-years {
   .md-datepicker-year {
     min-width: 60px;
     margin: 8px 4px;
     padding: 0;
     flex: 1;
 
+    @include layout-xsmall {
+      max-width: 128px;
+      padding: 0 16px;
+    }
+
     &.md-primary {
       font-weight: 900;
 
       @include layout-xsmall {
-        font-size: 22px;
+        font-size: 20px;
       }
     }
   }
 }
 
 .md-datepicker-months {
-  padding: 0 8px 7px;
-  display: flex;
-  flex-wrap: wrap;
-  overflow: auto;
-
-  @include layout-xsmall {
-    flex-flow: column;
-  }
-
   .md-datepicker-month {
     margin: 8px 4px;
     padding: 0;
     flex: 1 1 calc(33.333% - 8px);
+    font-weight: 500;
+
+    @include layout-xsmall {
+      flex: 1;
+    }
+
+    &.md-primary {
+      font-weight: 900;
+    }
   }
 }

src/components/mdDatePicker/mdDatePicker.vue

@@ -55,8 +55,7 @@
                     'md-today': isToday(day),
                     'md-selected': isSelectedDay(day)
                   }"
-                  @click.native="setDate(day)"
-                  v-once>
+                  @click.native="setDate(day)">
                   {{ day }}
                 </md-button>
               </div>
@@ -70,10 +69,7 @@
             v-for="year in visibleYears()"
             :key="year"
             :class="[
-              {
-                'md-primary': isThisYear(year),
-                'md-primary md-raised': isSelectedYear(year),
-              },
+              { 'md-primary': isSelectedYear(year) },
               'data-' + year
             ]"
             @click.native="setYear(year)">
@@ -86,10 +82,7 @@
             class="md-dense md-datepicker-month"
             v-for="(month, index) in locale.months"
             :key="month"
-            :class="{
-              'md-primary': isThisMonth(index),
-              'md-primary md-raised': isSelectedMonth(index),
-            }"
+            :class="{ 'md-primary': isSelectedMonth(index) }"
             @click.native="setMonth(index)">
             {{ month }}
           </md-button>
@@ -124,7 +117,6 @@
   import isToday from 'date-fns/is_today';
   import isSameDay from 'date-fns/is_same_day';
   import isThisMonth from 'date-fns/is_this_month';
-  import isThisYear from 'date-fns/is_this_year';
   import isBefore from 'date-fns/is_before';
   import isValidDate from 'date-fns/is_valid';
 
@@ -160,8 +152,8 @@
           return years;
         },
         modelDate: this.value,
-        currentDate: parseDate(this.value),
-        selectedDate: parseDate(this.value),
+        currentDate: isValidDate(this.value) ? parseDate(this.value) : Date.now(),
+        selectedDate: isValidDate(this.value) ? parseDate(this.value) : Date.now(),
         createdMonths: [
           addMonths(this.value, -1),
           this.value,
@@ -202,17 +194,14 @@
       getDaysInMonth(month) {
         return getDaysInMonth(month);
       },
-      isThisYear(year) {
-        return isThisYear(setYear(new Date(), year));
-      },
       isThisMonth(month) {
         return isThisMonth(setYear(new Date(), month));
       },
       isToday(day) {
         return isToday(setDate(this.currentDate, day));
       },
       isSelectedDay(day) {
-        return isSameDay(this.selectedDate, setDate(this.currentDate, day));
+        return isSameDay(this.selectedDate, setDate(this.selectedDate, day));
       },
       isSelectedMonth(month) {
         return isSameDay(this.selectedDate, setMonth(this.selectedDate, month));
@@ -231,7 +220,6 @@
       },
       setModelValue(date) {
         this.selectedDate = date;
-        this.currentDate = date;
         this.$emit('input', date);
       },
       changeValue() {
@@ -267,12 +255,16 @@
         getComputedStyle(this.pickerElement).top;
         getComputedStyle(this.backdropElement).top;
         this.active = true;
+        this.currentDate = parseDate(this.value);
+        this.selectedDate = parseDate(this.value);
       },
       closePicker() {
         const cleanUp = () => {
           this.pickerElement.removeEventListener(transitionEndEventName, cleanUp);
           this.rootElement.removeChild(this.pickerElement);
           this.rootElement.removeChild(this.backdropElement);
+          this.currentDate = null;
+          this.selectedDate = null;
         };
 
         window.removeEventListener('resize', this.calculatePopupPosition);