mazey-element-ui 2.0.1 → 2.15.16

package/packages/date-picker/src/panel/date-range.vue

@@ -13,7 +13,8 @@
           <button
             type="button"
             class="el-picker-panel__shortcut"
-            v-for="shortcut in shortcuts"
+            v-for="(shortcut, key) in shortcuts"
+            :key="key"
             @click="handleShortcutClick(shortcut)">{{shortcut.text}}</button>
         </div>
         <div class="el-picker-panel__body">
@@ -27,18 +28,19 @@
                   :placeholder="t('el.datepicker.startDate')"
                   class="el-date-range-picker__editor"
                   :value="minVisibleDate"
-                  @input.native="handleDateInput($event, 'min')"
-                  @change.native="handleDateChange($event, 'min')" />
+                  @input="val => handleDateInput(val, 'min')"
+                  @change="val => handleDateChange(val, 'min')" />
               </span>
-              <span class="el-date-range-picker__time-picker-wrap" v-clickoutside="() => minTimePickerVisible = false">
+              <span class="el-date-range-picker__time-picker-wrap" v-clickoutside="handleMinTimeClose">
                 <el-input
                   size="small"
+                  class="el-date-range-picker__editor"
                   :disabled="rangeState.selecting"
                   :placeholder="t('el.datepicker.startTime')"
-                  class="el-date-range-picker__editor"
                   :value="minVisibleTime"
                   @focus="minTimePickerVisible = true"
-                  @change.native="handleTimeChange($event, 'min')" />
+                  @input="val => handleTimeInput(val, 'min')"
+                  @change="val => handleTimeChange(val, 'min')" />
                 <time-picker
                   ref="minTimePicker"
                   @pick="handleMinTimePick"
@@ -53,25 +55,25 @@
               <span class="el-date-range-picker__time-picker-wrap">
                 <el-input
                   size="small"
+                  class="el-date-range-picker__editor"
                   :disabled="rangeState.selecting"
                   :placeholder="t('el.datepicker.endDate')"
-                  class="el-date-range-picker__editor"
                   :value="maxVisibleDate"
                   :readonly="!minDate"
-                  @input.native="handleDateInput($event, 'max')"
-                  @change.native="handleDateChange($event, 'max')" />
+                  @input="val => handleDateInput(val, 'max')"
+                  @change="val => handleDateChange(val, 'max')" />
               </span>
-              <span class="el-date-range-picker__time-picker-wrap" v-clickoutside="() => maxTimePickerVisible = false">
+              <span class="el-date-range-picker__time-picker-wrap" v-clickoutside="handleMaxTimeClose">
                 <el-input
                   size="small"
+                  class="el-date-range-picker__editor"
                   :disabled="rangeState.selecting"
-                  ref="maxInput"
                   :placeholder="t('el.datepicker.endTime')"
-                  class="el-date-range-picker__editor"
                   :value="maxVisibleTime"
-                  @focus="minDate && (maxTimePickerVisible = true)"
                   :readonly="!minDate"
-                  @change.native="handleTimeChange($event, 'max')" />
+                  @focus="minDate && (maxTimePickerVisible = true)"
+                  @input="val => handleTimeInput(val, 'max')"
+                  @change="val => handleTimeChange(val, 'max')" />
                 <time-picker
                   ref="maxTimePicker"
                   @pick="handleMaxTimePick"
@@ -116,6 +118,7 @@
               :max-date="maxDate"
               :range-state="rangeState"
               :disabled-date="disabledDate"
+              :cell-class-name="cellClassName"
               @changerange="handleChangeRange"
               :first-day-of-week="firstDayOfWeek"
               @pick="handleRangePick">
@@ -155,6 +158,7 @@
               :max-date="maxDate"
               :range-state="rangeState"
               :disabled-date="disabledDate"
+              :cell-class-name="cellClassName"
               @changerange="handleChangeRange"
               :first-day-of-week="firstDayOfWeek"
               @pick="handleRangePick">
@@ -175,7 +179,7 @@
           size="mini"
           class="el-picker-panel__link-btn"
           :disabled="btnDisabled"
-          @click="handleConfirm()">
+          @click="handleConfirm(false)">
           {{ t('el.datepicker.confirm') }}
         </el-button>
       </div>
@@ -190,32 +194,29 @@
     isDate,
     modifyDate,
     modifyTime,
-    modifyWithDefaultTime,
+    modifyWithTimeString,
     prevYear,
     nextYear,
     prevMonth,
     nextMonth,
+    nextDate,
     extractDateFormat,
     extractTimeFormat
-  } from '../util';
-  import Clickoutside from 'element-ui/src/utils/clickoutside';
-  import Locale from 'element-ui/src/mixins/locale';
+  } from 'mazey-element-ui/src/utils/date-util';
+  import Clickoutside from 'mazey-element-ui/src/utils/clickoutside';
+  import Locale from 'mazey-element-ui/src/mixins/locale';
   import TimePicker from './time';
   import DateTable from '../basic/date-table';
-  import ElInput from 'element-ui/packages/input';
-  import ElButton from 'element-ui/packages/button';
-
-  const advanceDate = (date, amount) => {
-    return new Date(new Date(date).getTime() + amount);
-  };
+  import ElInput from 'mazey-element-ui/packages/input';
+  import ElButton from 'mazey-element-ui/packages/button';
 
   const calcDefaultValue = (defaultValue) => {
     if (Array.isArray(defaultValue)) {
       return [new Date(defaultValue[0]), new Date(defaultValue[1])];
     } else if (defaultValue) {
-      return [new Date(defaultValue), advanceDate(defaultValue, 24 * 60 * 60 * 1000)];
+      return [new Date(defaultValue), nextDate(new Date(defaultValue), 1)];
     } else {
-      return [new Date(), advanceDate(Date.now(), 24 * 60 * 60 * 1000)];
+      return [new Date(), nextDate(new Date(), 1)];
     }
   };
 
@@ -226,7 +227,7 @@
 
     computed: {
       btnDisabled() {
-        return !(this.minDate && this.maxDate && !this.selecting);
+        return !(this.minDate && this.maxDate && !this.selecting && this.isValidValue([this.minDate, this.maxDate]));
       },
 
       leftLabel() {
@@ -262,19 +263,27 @@
       },
 
       minVisibleDate() {
-        return this.minDate ? formatDate(this.minDate, this.dateFormat) : '';
+        if (this.dateUserInput.min !== null) return this.dateUserInput.min;
+        if (this.minDate) return formatDate(this.minDate, this.dateFormat);
+        return '';
       },
 
       maxVisibleDate() {
-        return (this.maxDate || this.minDate) ? formatDate(this.maxDate || this.minDate, this.dateFormat) : '';
+        if (this.dateUserInput.max !== null) return this.dateUserInput.max;
+        if (this.maxDate || this.minDate) return formatDate(this.maxDate || this.minDate, this.dateFormat);
+        return '';
       },
 
       minVisibleTime() {
-        return this.minDate ? formatDate(this.minDate, this.timeFormat) : '';
+        if (this.timeUserInput.min !== null) return this.timeUserInput.min;
+        if (this.minDate) return formatDate(this.minDate, this.timeFormat);
+        return '';
       },
 
       maxVisibleTime() {
-        return (this.maxDate || this.minDate) ? formatDate(this.maxDate || this.minDate, this.timeFormat) : '';
+        if (this.timeUserInput.max !== null) return this.timeUserInput.max;
+        if (this.maxDate || this.minDate) return formatDate(this.maxDate || this.minDate, this.timeFormat);
+        return '';
       },
 
       timeFormat() {
@@ -324,17 +333,28 @@
         shortcuts: '',
         visible: '',
         disabledDate: '',
+        cellClassName: '',
         firstDayOfWeek: 7,
         minTimePickerVisible: false,
         maxTimePickerVisible: false,
         format: '',
         arrowControl: false,
-        unlinkPanels: false
+        unlinkPanels: false,
+        dateUserInput: {
+          min: null,
+          max: null
+        },
+        timeUserInput: {
+          min: null,
+          max: null
+        }
       };
     },
 
     watch: {
       minDate(val) {
+        this.dateUserInput.min = null;
+        this.timeUserInput.min = null;
         this.$nextTick(() => {
           if (this.$refs.maxTimePicker && this.maxDate && this.maxDate < this.minDate) {
             const format = 'HH:mm:ss';
@@ -353,6 +373,8 @@
       },
 
       maxDate(val) {
+        this.dateUserInput.max = null;
+        this.timeUserInput.max = null;
         if (val && this.$refs.maxTimePicker) {
           this.$refs.maxTimePicker.date = val;
           this.$refs.maxTimePicker.value = val;
@@ -386,8 +408,6 @@
         } else if (Array.isArray(newVal)) {
           this.minDate = isDate(newVal[0]) ? new Date(newVal[0]) : null;
           this.maxDate = isDate(newVal[1]) ? new Date(newVal[1]) : null;
-          // NOTE: currently, maxDate = minDate + 1 month
-          //       should allow them to be set individually in the future
           if (this.minDate) {
             this.leftDate = this.minDate;
             if (this.unlinkPanels && this.maxDate) {
@@ -434,8 +454,8 @@
         this.rangeState = val.rangeState;
       },
 
-      handleDateInput(event, type) {
-        const value = event.target.value;
+      handleDateInput(value, type) {
+        this.dateUserInput[type] = value;
         if (value.length !== this.dateFormat.length) return;
         const parsedValue = parseDate(value, this.dateFormat);
 
@@ -445,19 +465,22 @@
             return;
           }
           if (type === 'min') {
-            this.minDate = new Date(parsedValue);
+            this.minDate = modifyDate(this.minDate || new Date(), parsedValue.getFullYear(), parsedValue.getMonth(), parsedValue.getDate());
             this.leftDate = new Date(parsedValue);
-            this.rightDate = nextMonth(this.leftDate);
+            if (!this.unlinkPanels) {
+              this.rightDate = nextMonth(this.leftDate);
+            }
           } else {
-            this.maxDate = new Date(parsedValue);
-            this.leftDate = prevMonth(parsedValue);
+            this.maxDate = modifyDate(this.maxDate || new Date(), parsedValue.getFullYear(), parsedValue.getMonth(), parsedValue.getDate());
             this.rightDate = new Date(parsedValue);
+            if (!this.unlinkPanels) {
+              this.leftDate = prevMonth(parsedValue);
+            }
           }
         }
       },
 
-      handleDateChange(event, type) {
-        const value = event.target.value;
+      handleDateChange(value, type) {
         const parsedValue = parseDate(value, this.dateFormat);
         if (parsedValue) {
           if (type === 'min') {
@@ -474,8 +497,23 @@
         }
       },
 
-      handleTimeChange(event, type) {
-        const value = event.target.value;
+      handleTimeInput(value, type) {
+        this.timeUserInput[type] = value;
+        if (value.length !== this.timeFormat.length) return;
+        const parsedValue = parseDate(value, this.timeFormat);
+
+        if (parsedValue) {
+          if (type === 'min') {
+            this.minDate = modifyTime(this.minDate, parsedValue.getHours(), parsedValue.getMinutes(), parsedValue.getSeconds());
+            this.$nextTick(_ => this.$refs.minTimePicker.adjustSpinners());
+          } else {
+            this.maxDate = modifyTime(this.maxDate, parsedValue.getHours(), parsedValue.getMinutes(), parsedValue.getSeconds());
+            this.$nextTick(_ => this.$refs.maxTimePicker.adjustSpinners());
+          }
+        }
+      },
+
+      handleTimeChange(value, type) {
         const parsedValue = parseDate(value, this.timeFormat);
         if (parsedValue) {
           if (type === 'min') {
@@ -498,8 +536,8 @@
 
       handleRangePick(val, close = true) {
         const defaultTime = this.defaultTime || [];
-        const minDate = modifyWithDefaultTime(val.minDate, defaultTime[0]);
-        const maxDate = modifyWithDefaultTime(val.maxDate, defaultTime[1]);
+        const minDate = modifyWithTimeString(val.minDate, defaultTime[0]);
+        const maxDate = modifyWithTimeString(val.maxDate, defaultTime[1]);
 
         if (this.maxDate === maxDate && this.minDate === minDate) {
           return;
@@ -538,6 +576,10 @@
         }
       },
 
+      handleMinTimeClose() {
+        this.minTimePickerVisible = false;
+      },
+
       handleMaxTimePick(value, visible, first) {
         if (this.maxDate && value) {
           this.maxDate = modifyTime(this.maxDate, value.getHours(), value.getMinutes(), value.getSeconds());
@@ -552,6 +594,10 @@
         }
       },
 
+      handleMaxTimeClose() {
+        this.maxTimePickerVisible = false;
+      },
+
       // leftPrev*, rightNext* need to take care of `unlinkPanels`
       leftPrevYear() {
         this.leftDate = prevYear(this.leftDate);
@@ -603,7 +649,9 @@
       },
 
       handleConfirm(visible = false) {
-        this.$emit('pick', [this.minDate, this.maxDate], visible);
+        if (this.isValidValue([this.minDate, this.maxDate])) {
+          this.$emit('pick', [this.minDate, this.maxDate], visible);
+        }
       },
 
       isValidValue(value) {
@@ -615,6 +663,15 @@
             ? !this.disabledDate(value[0]) && !this.disabledDate(value[1])
             : true
         );
+      },
+
+      resetView() {
+        // NOTE: this is a hack to reset {min, max}Date on picker open.
+        // TODO: correct way of doing so is to refactor {min, max}Date to be dependent on value and internal selection state
+        //       an alternative would be resetView whenever picker becomes visible, should also investigate date-panel's resetView
+        if (this.minDate && this.maxDate == null) this.rangeState.selecting = false;
+        this.minDate = this.value && isDate(this.value[0]) ? new Date(this.value[0]) : null;
+        this.maxDate = this.value && isDate(this.value[0]) ? new Date(this.value[1]) : null;
       }
     },
 

package/packages/date-picker/src/panel/date.vue

@@ -13,7 +13,8 @@
           <button
             type="button"
             class="el-picker-panel__shortcut"
-            v-for="shortcut in shortcuts"
+            v-for="(shortcut, key) in shortcuts"
+            :key="key"
             @click="handleShortcutClick(shortcut)">{{ shortcut.text }}</button>
         </div>
         <div class="el-picker-panel__body">
@@ -26,7 +27,7 @@
                 @input="val => userInputDate = val"
                 @change="handleVisibleDateChange" />
             </span>
-            <span class="el-date-picker__editor-wrap" v-clickoutside="() => timePickerVisible = false">
+            <span class="el-date-picker__editor-wrap" v-clickoutside="handleTimePickClose">
               <el-input
                 ref="input"
                 @focus="timePickerVisible = true"
@@ -90,19 +91,19 @@
             <date-table
               v-show="currentView === 'date'"
               @pick="handleDatePick"
-              @select="handleDateSelect"
               :selection-mode="selectionMode"
               :first-day-of-week="firstDayOfWeek"
-              :value="new Date(value)"
+              :value="value"
               :default-value="defaultValue ? new Date(defaultValue) : null"
               :date="date"
-              :disabled-date="disabledDate"
-              :selected-date="selectedDate">
+              :cell-class-name="cellClassName"
+              :disabled-date="disabledDate">
             </date-table>
             <year-table
               v-show="currentView === 'year'"
               @pick="handleYearPick"
-              :value="new Date(value)"
+              :selection-mode="selectionMode"
+              :value="value"
               :default-value="defaultValue ? new Date(defaultValue) : null"
               :date="date"
               :disabled-date="disabledDate">
@@ -110,7 +111,8 @@
             <month-table
               v-show="currentView === 'month'"
               @pick="handleMonthPick"
-              :value="new Date(value)"
+              :selection-mode="selectionMode"
+              :value="value"
               :default-value="defaultValue ? new Date(defaultValue) : null"
               :date="date"
               :disabled-date="disabledDate">
@@ -121,13 +123,13 @@
 
       <div
         class="el-picker-panel__footer"
-        v-show="footerVisible && currentView === 'date'">
+        v-show="footerVisible && (currentView === 'date' || currentView === 'month' || currentView === 'year')">
         <el-button
           size="mini"
           type="text"
           class="el-picker-panel__link-btn"
           @click="changeToNow"
-          v-show="selectionMode !== 'dates'">
+          v-show="selectionMode !== 'dates' && selectionMode !== 'months' && selectionMode !== 'years'">
           {{ t('el.datepicker.now') }}
         </el-button>
         <el-button
@@ -150,7 +152,7 @@
     isDate,
     modifyDate,
     modifyTime,
-    modifyWithDefaultTime,
+    modifyWithTimeString,
     clearMilliseconds,
     clearTime,
     prevYear,
@@ -159,12 +161,13 @@
     nextMonth,
     changeYearMonthAndClampDate,
     extractDateFormat,
-    extractTimeFormat
-  } from '../util';
-  import Clickoutside from 'element-ui/src/utils/clickoutside';
-  import Locale from 'element-ui/src/mixins/locale';
-  import ElInput from 'element-ui/packages/input';
-  import ElButton from 'element-ui/packages/button';
+    extractTimeFormat,
+    timeWithinRange
+  } from 'mazey-element-ui/src/utils/date-util';
+  import Clickoutside from 'mazey-element-ui/src/utils/clickoutside';
+  import Locale from 'mazey-element-ui/src/mixins/locale';
+  import ElInput from 'mazey-element-ui/packages/input';
+  import ElButton from 'mazey-element-ui/packages/button';
   import TimePicker from './time';
   import YearTable from '../basic/year-table';
   import MonthTable from '../basic/month-table';
@@ -189,10 +192,12 @@
 
       value(val) {
         if (this.selectionMode === 'dates' && this.value) return;
+        if (this.selectionMode === 'months' && this.value) return;
+        if (this.selectionMode === 'years' && this.value) return;
         if (isDate(val)) {
           this.date = new Date(val);
         } else {
-          this.date = this.defaultValue ? new Date(this.defaultValue) : new Date();
+          this.date = this.getDefaultValue();
         }
       },
 
@@ -214,6 +219,10 @@
           }
         } else if (newVal === 'dates') {
           this.currentView = 'date';
+        } else if (newVal === 'years') {
+          this.currentView = 'year';
+        } else if (newVal === 'months') {
+          this.currentView = 'month';
         }
       }
     },
@@ -223,17 +232,20 @@
         const format = timeFormat => {this.$refs.timepicker.format = timeFormat;};
         const value = value => {this.$refs.timepicker.value = value;};
         const date = date => {this.$refs.timepicker.date = date;};
+        const selectableRange = selectableRange => {this.$refs.timepicker.selectableRange = selectableRange;};
 
         this.$watch('value', value);
         this.$watch('date', date);
+        this.$watch('selectableRange', selectableRange);
 
         format(this.timeFormat);
         value(this.value);
         date(this.date);
+        selectableRange(this.selectableRange);
       },
 
       handleClear() {
-        this.date = this.defaultValue ? new Date(this.defaultValue) : new Date();
+        this.date = this.getDefaultValue();
         this.$emit('pick', null);
       },
 
@@ -303,7 +315,9 @@
 
       handleTimePick(value, visible, first) {
         if (isDate(value)) {
-          const newDate = this.value ? modifyTime(this.date, value.getHours(), value.getMinutes(), value.getSeconds()) : modifyWithDefaultTime(value, this.defaultTime);
+          const newDate = this.value
+            ? modifyTime(this.value, value.getHours(), value.getMinutes(), value.getSeconds())
+            : modifyWithTimeString(this.getDefaultValue(), this.defaultTime);
           this.date = newDate;
           this.emit(this.date, true);
         } else {
@@ -314,10 +328,16 @@
         }
       },
 
+      handleTimePickClose() {
+        this.timePickerVisible = false;
+      },
+
       handleMonthPick(month) {
         if (this.selectionMode === 'month') {
           this.date = modifyDate(this.date, this.year, month, 1);
           this.emit(this.date);
+        } else if (this.selectionMode === 'months') {
+          this.emit(month, true);
         } else {
           this.date = changeYearMonthAndClampDate(this.date, this.year, month);
           // TODO: should emit intermediate value ??
@@ -326,18 +346,21 @@
         }
       },
 
-      handleDateSelect(value) {
-        if (this.selectionMode === 'dates') {
-          this.selectedDate = value;
-        }
-      },
-
       handleDatePick(value) {
         if (this.selectionMode === 'day') {
-          this.date = this.value ? modifyDate(this.date, value.getFullYear(), value.getMonth(), value.getDate()) : modifyWithDefaultTime(value, this.defaultTime);
+          let newDate = this.value
+            ? modifyDate(this.value, value.getFullYear(), value.getMonth(), value.getDate())
+            : modifyWithTimeString(value, this.defaultTime);
+          // change default time while out of selectableRange
+          if (!this.checkDateWithinRange(newDate)) {
+            newDate = modifyDate(this.selectableRange[0][0], value.getFullYear(), value.getMonth(), value.getDate());
+          }
+          this.date = newDate;
           this.emit(this.date, this.showTime);
         } else if (this.selectionMode === 'week') {
           this.emit(value.date);
+        } else if (this.selectionMode === 'dates') {
+          this.emit(value, true); // set false to keep panel open
         }
       },
 
@@ -345,6 +368,8 @@
         if (this.selectionMode === 'year') {
           this.date = modifyDate(this.date, year, 0, 1);
           this.emit(this.date);
+        } else if (this.selectionMode === 'years') {
+          this.emit(year, true);
         } else {
           this.date = changeYearMonthAndClampDate(this.date, year, this.month);
           // TODO: should emit intermediate value ??
@@ -356,25 +381,30 @@
       changeToNow() {
         // NOTE: not a permanent solution
         //       consider disable "now" button in the future
-        if (!this.disabledDate || !this.disabledDate(new Date())) {
+        if ((!this.disabledDate || !this.disabledDate(new Date())) && this.checkDateWithinRange(new Date())) {
           this.date = new Date();
           this.emit(this.date);
         }
       },
 
       confirm() {
-        if (this.selectionMode === 'dates') {
-          this.emit(this.selectedDate);
+        if (this.selectionMode === 'dates' || this.selectionMode === 'months' || this.selectionMode === 'years') {
+          this.emit(this.value);
         } else {
-          const date = this.value ? this.date : modifyWithDefaultTime(this.date, this.defaultTime);
-          this.emit(date);
+          // value were emitted in handle{Date,Time}Pick, nothing to update here
+          // deal with the scenario where: user opens the picker, then confirm without doing anything
+          const value = this.value
+            ? this.value
+            : modifyWithTimeString(this.getDefaultValue(), this.defaultTime);
+          this.date = new Date(value); // refresh date
+          this.emit(value);
         }
       },
 
       resetView() {
-        if (this.selectionMode === 'month') {
+        if (this.selectionMode === 'month' || this.selectionMode === 'months') {
           this.currentView = 'month';
-        } else if (this.selectionMode === 'year') {
+        } else if (this.selectionMode === 'year' || this.selectionMode === 'years') {
           this.currentView = 'year';
         } else {
           this.currentView = 'date';
@@ -438,7 +468,7 @@
 
       handleVisibleTimeChange(value) {
         const time = parseDate(value, this.timeFormat);
-        if (time) {
+        if (time && this.checkDateWithinRange(time)) {
           this.date = modifyDate(time, this.year, this.month, this.monthDate);
           this.userInputTime = null;
           this.$refs.timepicker.value = this.date;
@@ -465,7 +495,19 @@
           typeof this.disabledDate === 'function'
             ? !this.disabledDate(value)
             : true
-        );
+        ) && this.checkDateWithinRange(value);
+      },
+
+      getDefaultValue() {
+        // if default-value is set, return it
+        // otherwise, return now (the moment this method gets called)
+        return this.defaultValue ? new Date(this.defaultValue) : new Date();
+      },
+
+      checkDateWithinRange(date) {
+        return this.selectableRange.length > 0
+          ? timeWithinRange(date, this.selectableRange, this.format || 'HH:mm:ss')
+          : true;
       }
     },
 
@@ -478,7 +520,7 @@
         popperClass: '',
         date: new Date(),
         value: '',
-        defaultValue: null,
+        defaultValue: null, // use getDefaultValue() for time computation
         defaultTime: null,
         showTime: false,
         selectionMode: 'day',
@@ -486,7 +528,8 @@
         visible: false,
         currentView: 'date',
         disabledDate: '',
-        selectedDate: [],
+        cellClassName: '',
+        selectableRange: [],
         firstDayOfWeek: 7,
         showWeekNumber: false,
         timePickerVisible: false,
@@ -515,7 +558,7 @@
       },
 
       footerVisible() {
-        return this.showTime || this.selectionMode === 'dates';
+        return this.showTime || this.selectionMode === 'dates' || this.selectionMode === 'months' || this.selectionMode === 'years';
       },
 
       visibleTime() {