create date selection

marcosmoura · marcosmoura · commit 6c3a5daaabdf · 2017-02-14T01:12:22.000-02:00
diff --git a/docs/src/routes.js b/docs/src/routes.js
@@ -13,7 +13,7 @@ const ButtonToggle = (r) => require.ensure([], () => r(require('./pages/componen
 const Card = (r) => require.ensure([], () => r(require('./pages/components/Card')), 'card');
 const Checkbox = (r) => require.ensure([], () => r(require('./pages/components/Checkbox')), 'checkbox');
 const Chips = (r) => require.ensure([], () => r(require('./pages/components/Chips')), 'chips');
-const DatePicker = (r) => require.ensure([], () => r(require('./pages/components/DatePicker')), 'date-picker');
+const Datepicker = (r) => require.ensure([], () => r(require('./pages/components/Datepicker')), 'date-picker');
 const Dialog = (r) => require.ensure([], () => r(require('./pages/components/Dialog')), 'dialog');
 const FileComponent = (r) => require.ensure([], () => r(require('./pages/components/File')), 'file');
 const Icon = (r) => require.ensure([], () => r(require('./pages/components/Icon')), 'icon');
@@ -112,7 +112,7 @@ const components = [
   {
     path: '/components/date-picker',
     name: 'components:date-picker',
-    component: DatePicker
+    component: Datepicker
   },
   {
     path: '/components/dialog',
diff --git a/src/components/mdDatePicker/mdDatePicker.scss b/src/components/mdDatePicker/mdDatePicker.scss
@@ -1,6 +1,9 @@
 @import 'http://github.com/core/stylesheets/variables.scss';
 @import 'http://github.com/core/stylesheets/mixins.scss';
 
+$month-width: 356px;
+$month-small-width: 280px;
+
 .md-datepicker {
   display: flex;
   flex: 1;
@@ -9,8 +12,27 @@
     cursor: pointer;
   }
 
-  input::-webkit-calendar-picker-indicator{
+  @mixin disable-input-controls {
     display: none;
+    -webkit-appearance: none;
+  }
+
+  input {
+    &:-ms-clear {
+      @include disable-input-controls;
+    }
+
+    &::-webkit-clear-button {
+      @include disable-input-controls;
+    }
+
+    &::-webkit-calendar-picker-indicator {
+      @include disable-input-controls;
+    }
+
+    &::-webkit-inner-spin-button {
+      @include disable-input-controls;
+    }
   }
 }
 
@@ -106,17 +128,50 @@
 }
 
 .md-datepicker-calendar {
-  padding: 8px;
+  margin: 8px;
+  overflow: hidden;
   text-align: center;
 
+  .md-button {
+    margin: 0;
+  }
+
   .md-datepicker-controls {
     display: flex;
     justify-content: space-between;
     align-items: center;
+    position: relative;
+    z-index: 2;
   }
 
-  .md-button {
-    margin: 0;
+  .md-current-date {
+    height: 40px;
+    margin-top: -40px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+  }
+
+  .md-calendar-container {
+    width: $month-width * 3;
+    display: flex;
+    transform: translate3d(-$month-width, 0, 0);
+    transition: $swift-ease-out;
+
+    @include layout-xsmall {
+      width: $month-small-width * 3;
+      transform: translate3d(-$month-small-width, 0, 0);
+    }
+  }
+
+  .md-datepicker-month {
+    width: $month-width;
+    position: relative;
+    z-index: 1;
+
+    @include layout-xsmall {
+      width: $month-small-width;
+    }
   }
 
   .md-datepicker-week-days {
@@ -143,6 +198,8 @@
       margin: 0;
     }
 
+
+    .md-empty,
     .md-button {
       $button-dense-height: 32px;
 
@@ -152,10 +209,7 @@
       height: $button-dense-height;
       min-height: $button-dense-height;
       margin: 0 10px;
-      padding: 0;
       flex: 1 1 (100% / 7);
-      transition: $swift-ease-out;
-      font-size: 12px;
       line-height: $button-dense-height;
 
       @include layout-xsmall {
@@ -169,8 +223,14 @@
         margin: 0;
         line-height: $button-height;
       }
+    }
+
+    .md-button {
+      padding: 0;
+      transition: $swift-ease-out;
+      font-size: 12px;
 
-      &:not(.md-empty):hover,
+      &:hover,
       &.md-selected,
       &.md-today {
         font-weight: 700;
@@ -192,13 +252,18 @@
 }
 
 .md-datepicker-year {
-  min-width: 68px;
-  margin: 8px 0;
+  min-width: 60px;
+  margin: 8px 4px;
+  padding: 0;
   flex: 1;
 
   &.md-primary {
     font-weight: 900;
 
+    &.md-raised {
+      box-shadow: none;
+    }
+
     @include layout-xsmall {
       font-size: 22px;
     }
diff --git a/src/components/mdDatePicker/mdDatePicker.theme b/src/components/mdDatePicker/mdDatePicker.theme
@@ -44,7 +44,7 @@
         color: #{'PRIMARY-COLOR'};
       }
 
-      .md-button:not(.md-empty):hover,
+      .md-button:hover,
       .md-selected {
         background-color: #{'PRIMARY-COLOR'};
         color: #{'PRIMARY-CONTRAST'};
diff --git a/src/components/mdDatePicker/mdDatePicker.vue b/src/components/mdDatePicker/mdDatePicker.vue
@@ -2,13 +2,24 @@
   <div class="md-datepicker">
     <md-icon @click.native="openPicker">event</md-icon>
 
+    <md-input
+      type="date"
+      v-model="modelDate"
+      :id="id"
+      :name="name"
+      :required="required"
+      :placeholder="placeholder"
+      :disabled="disabled"
+      @focus.native="openOnFocus"
+      ref="pickerInput" />
+
     <div class="md-datepicker-popup" :class="[themeClass, classes]" :style="styles" ref="pickerElement">
       <div class="md-datepicker-header">
-        <span class="md-datepicker-year-select" @click="currentView = 'year'">{{ currentDate.getFullYear() }}</span>
-        <div class="md-datepicker-date-select" @click="currentView = 'date'">
-          <strong class="md-datepicker-dayname">{{ locale.shortDays[currentDate.getDay()] }},</strong>
-          <strong class="md-datepicker-monthname">{{ locale.shortMonths[currentDate.getMonth()] }}</strong>
-          <strong class="md-datepicker-day">{{ currentDate.getDate() }}</strong>
+        <span class="md-datepicker-year-select" @click="showYearPicker">{{ selectedDate.getFullYear() }}</span>
+        <div class="md-datepicker-date-select" @click="showDatePicker">
+          <strong class="md-datepicker-dayname">{{ locale.shortDays[selectedDate.getDay()] }},</strong>
+          <strong class="md-datepicker-monthname">{{ locale.shortMonths[selectedDate.getMonth()] }}</strong>
+          <strong class="md-datepicker-day">{{ selectedDate.getDate() }}</strong>
         </div>
       </div>
 
@@ -19,25 +30,53 @@
               <md-icon>keyboard_arrow_left</md-icon>
             </md-button>
 
-            <span class="md-current-date">{{ locale.months[currentDate.getMonth()] }} {{ currentDate.getFullYear() }}</span>
-
             <md-button class="md-icon-button">
               <md-icon>keyboard_arrow_right</md-icon>
             </md-button>
           </div>
 
-          <div class="md-datepicker-week-days">
-            <span v-for="day in locale.shorterDays">{{ day }}</span>
-          </div>
+          <div class="md-calendar-container">
+            <div class="md-datepicker-month" v-for="month in createdMonths">
+              <span class="md-current-date">{{ locale.months[month.getMonth()] }} {{ month.getFullYear() }}</span>
+
+              <div class="md-datepicker-week-days">
+                <span v-for="day in locale.shorterDays">{{ day }}</span>
+              </div>
 
-          <div class="md-datepicker-days">
-            <md-button class="md-icon-button md-empty" v-for="day in startOfMonth(currentDate).getDay()" disabled></md-button>
-            <md-button class="md-icon-button" :class="{ 'md-today': isToday(day, currentDate) }" v-for="day in getDaysInMonth(currentDate)">{{ day }}</md-button>
+              <div class="md-datepicker-days">
+                <span class="md-empty" v-for="day in startOfMonth(month).getDay()"></span>
+
+                <md-button
+                  class="md-icon-button"
+                  v-for="day in getDaysInMonth(month)"
+                  :key="day"
+                  :class="{
+                    'md-today': isToday(day),
+                    'md-selected': isSelectedDay(day)
+                  }"
+                  @click.native="selectDate(day)">
+                  {{ day }}
+                </md-button>
+              </div>
+            </div>
           </div>
         </div>
 
         <div class="md-datepicker-years" v-show="currentView === 'year'">
-          <md-button class="md-dense md-datepicker-year" :class="{ 'md-primary': isThisYear(year, currentDate) }" v-for="year in visibleYears()" @click="setYear(year)">{{ year }}</md-button>
+          <md-button
+            class="md-dense md-datepicker-year"
+            v-for="year in visibleYears()"
+            :key="year"
+            :class="[
+              {
+                'md-primary': isThisYear(year),
+                'md-primary md-raised': isSelectedYear(year),
+              },
+              'data-' + year
+            ]"
+            @click.native="setYear(year)">
+            {{ year }}
+          </md-button>
         </div>
 
         <div class="md-datepicker-actions md-dialog-actions">
@@ -48,17 +87,6 @@
     </div>
 
     <md-backdrop class="md-datepicker-backdrop" :class="classes" @close="closePicker" ref="pickerBackdrop" />
-
-    <md-input
-      type="date"
-      v-model="value"
-      :id="id"
-      :name="name"
-      :required="required"
-      :placeholder="placeholder"
-      :disabled="disabled"
-      @focus.native="mdOpenOnFocus || openPicker"
-      ref="pickerInput" />
   </div>
 </template>
 
@@ -69,12 +97,14 @@
   import getClosestVueParent from '../../core/utils/getClosestVueParent';
   import getInViewPosition from '../../core/utils/getInViewPosition';
   import transitionEndEventName from '../../core/utils/transitionEndEventName';
-  import startOfMonth from 'date-fns/start_of_month';
   import formatDate from 'date-fns/format';
+  import startOfMonth from 'date-fns/start_of_month';
+  import addMonths from 'date-fns/add_months';
   import getDaysInMonth from 'date-fns/get_days_in_month';
   import setDate from 'date-fns/set_date';
   import setYear from 'date-fns/set_year';
   import isToday from 'date-fns/is_today';
+  import isSameDay from 'date-fns/is_same_day';
   import isThisYear from 'date-fns/is_this_year';
 
   export default {
@@ -108,8 +138,14 @@
 
           return years;
         },
-        currentView: 'date',
-        currentDate: new Date(this.value)
+        currentDate: new Date(this.value),
+        selectedDate: new Date(this.value),
+        createdMonths: [
+          addMonths(this.value, -1),
+          this.value,
+          addMonths(this.value, 1)
+        ],
+        currentView: 'date'
       };
     },
     computed: {
@@ -126,25 +162,43 @@
           left: this.pickerPosition.left
         };
       },
+      modelDate() {
+        return formatDate(this.selectedDate, this.locale.dateFormat);
+      },
       locale() {
         return this.$material.locale;
       }
     },
     methods: {
-      startOfMonth,
-      getDaysInMonth,
-      isToday(day, fullDate) {
-        return isToday(setDate(fullDate, day));
+      startOfMonth(month) {
+        return startOfMonth(month);
+      },
+      getDaysInMonth(month) {
+        return getDaysInMonth(month);
+      },
+      isToday(day) {
+        return isToday(setDate(new Date(), day));
       },
-      isThisYear(year, fullDate) {
-        return isThisYear(setYear(fullDate, year));
+      isThisYear(year) {
+        return isThisYear(setYear(new Date(), year));
+      },
+      isSelectedDay(day) {
+        return isSameDay(this.selectedDate, setDate(this.selectedDate, day));
+      },
+      isSelectedYear(year) {
+        return isSameDay(this.selectedDate, setYear(this.selectedDate, year));
       },
       setYear(year) {
-        this.setModelValue(setYear(this.currentDate, year));
+        this.setModelValue(setYear(this.selectedDate, year));
       },
       setModelValue(date) {
-        this.currentDate = date;
-        this.$emit('input', formatDate(date, this.locale.dateFormat));
+        this.selectedDate = date;
+        this.$emit('input', this.modelDate);
+      },
+      openOnFocus() {
+        if (this.mdOpenOnFocus) {
+          this.openPicker();
+        }
       },
       calculatePopupPosition() {
         window.requestAnimationFrame(() => {
@@ -179,8 +233,21 @@
         window.removeEventListener('resize', this.calculatePopupPosition);
         this.pickerElement.removeEventListener(transitionEndEventName, cleanUp);
         this.pickerElement.addEventListener(transitionEndEventName, cleanUp);
+        this.showDatePicker();
         this.active = false;
+      },
+      showDatePicker() {
         this.currentView = 'date';
+      },
+      showYearPicker() {
+        this.currentView = 'year';
+
+        this.$nextTick(() => {
+          this.pickerElement.querySelector(`.data-${this.selectedDate.getFullYear()}`).scrollIntoViewIfNeeded(true);
+        });
+      },
+      selectDate(day) {
+        this.selectedDate = setDate(this.selectedDate, day);
       }
     },
     mounted() {
diff --git a/src/components/mdInputContainer/common.js b/src/components/mdInputContainer/common.js

Original file line number	Diff line number	Diff line change
`@@ -44,7 +44,7 @@`
`44`	`44`	`color: #{'PRIMARY-COLOR'};`
`45`	`45`	`}`
`46`	`46`
`47`		`- .md-button:not(.md-empty):hover,`
	`47`	`+ .md-button:hover,`
`48`	`48`	`.md-selected {`
`49`	`49`	`background-color: #{'PRIMARY-COLOR'};`
`50`	`50`	`color: #{'PRIMARY-CONTRAST'};`