*-picker: refactor (#7367)

* Revert "Picker only emit user change (#6214)"

This reverts commit 1912c473ef.

* picker/util: add helper methods

range: n => Array
modify{Date, Time}: Date => Date
clear{Time, Milliseconds}: Date => Date
limitTimeRange: Date => Date
timeWithinRange: Date, [Date] => Boolean

* time-spinner: refactory

* time-panel: refactory

* picker refactory

* date-panel, *-table: refactory

* time-select: refactory

* test: update time-picker

* test: update date-picker

* time-range: refactory

* date-range: refactory

* test: update time-select

* test: update form date-picker/time-picker

* docs: update date-picker

packages/date-picker/src/basic/month-table.vue

@@ -49,45 +49,43 @@
 
 <script type="text/babel">
   import Locale from 'element-ui/src/mixins/locale';
+  import { isDate, range, getDayCountOfMonth } from '../util';
   import { hasClass } from 'element-ui/src/utils/dom';
 
+  const datesInMonth = (year, month) => {
+    const numOfDays = getDayCountOfMonth(year, month);
+    const firstDay = new Date(year, month, 1);
+    const ONE_DAY = 8.64e7;
+    return range(numOfDays).map(n => new Date(firstDay.getTime() + n * ONE_DAY));
+  };
+
   export default {
     props: {
       disabledDate: {},
-      date: {},
-      month: {
-        type: Number
-      }
+      value: {},
+      defaultValue: {
+        validator(val) {
+          // null or valid Date Object
+          return val === null || (val instanceof Date && isDate(val));
+        }
+      },
+      date: {}
     },
     mixins: [Locale],
     methods: {
       getCellStyle(month) {
         const style = {};
+        const year = this.date.getFullYear();
+        const today = new Date();
 
-        var year = this.date.getFullYear();
-        var date = new Date(0);
-        date.setFullYear(year);
-        date.setMonth(month, 1);
-        date.setHours(0);
-        var nextMonth = new Date(date);
-        nextMonth.setMonth(month + 1);
-
-        var flag = false;
-        if (typeof this.disabledDate === 'function') {
-
-          while (date < nextMonth) {
-            if (this.disabledDate(date)) {
-              date = new Date(date.getTime() + 8.64e7);
-              flag = true;
-            } else {
-              flag = false;
-              break;
-            }
-          }
-        }
-
-        style.disabled = flag;
-        style.current = this.month === month;
+        style.disabled = typeof this.disabledDate === 'function'
+          ? datesInMonth(year, month).every(this.disabledDate)
+          : false;
+        style.current = this.value.getFullYear() === year && this.value.getMonth() === month;
+        style.today = today.getFullYear() === year && today.getMonth() === month;
+        style.default = this.defaultValue &&
+          this.defaultValue.getFullYear() === year &&
+          this.defaultValue.getMonth() === month;
 
         return style;
       },