DateTimePicker: enable default-time attribute in date picker (#10321)

examples/docs/en-US/datetime-picker.md

@@ -53,10 +53,11 @@
         },
         value1: '',
         value2: '',
-        value3: new Date(),
+        value3: '',
-        value4: '',
+        value4: new Date(),
         value5: '',
-        value6: ''
+        value6: '',
+        value7: ''
       };
     }
   };
@@ -117,6 +118,15 @@ DateTimePicker is derived from DatePicker and TimePicker. For a more detailed ex
       :picker-options="pickerOptions1">
     </el-date-picker>
   </div>
+  <div class="block">
+    <span class="demonstration">With default time</span>
+    <el-date-picker
+      v-model="value3"
+      type="datetime"
+      placeholder="Select date and time"
+      default-time="12:00:00">
+    </el-date-picker>
+  </div>
 </template>
 
 <script>
@@ -146,7 +156,8 @@ DateTimePicker is derived from DatePicker and TimePicker. For a more detailed ex
           }]
         },
         value1: '',
-        value2: ''
+        value2: '',
+        value3: ''
       };
     }
   };
@@ -163,7 +174,7 @@ DateTimePicker is derived from DatePicker and TimePicker. For a more detailed ex
   <div class="block">
     <span class="demonstration">Default</span>
     <el-date-picker
-      v-model="value3"
+      v-model="value4"
       type="datetimerange"
       range-separator="To"
       start-placeholder="Start date"
@@ -173,7 +184,7 @@ DateTimePicker is derived from DatePicker and TimePicker. For a more detailed ex
   <div class="block">
     <span class="demonstration">With shortcuts</span>
     <el-date-picker
-      v-model="value4"
+      v-model="value5"
       type="datetimerange"
       :picker-options="pickerOptions2"
       range-separator="To"
@@ -215,8 +226,8 @@ DateTimePicker is derived from DatePicker and TimePicker. For a more detailed ex
             }
           }]
         },
-        value3: [new Date(2000, 10, 10, 10, 10), new Date(2000, 10, 11, 10, 10)],
+        value4: [new Date(2000, 10, 10, 10, 10), new Date(2000, 10, 11, 10, 10)],
-        value4: ''
+        value5: ''
       };
     }
   };
@@ -232,7 +243,7 @@ DateTimePicker is derived from DatePicker and TimePicker. For a more detailed ex
   <div class="block">
     <span class="demonstration">Start date time 12:00:00</span>
     <el-date-picker
-      v-model="value5"
+      v-model="value6"
       type="datetimerange"
       start-placeholder="Start Date"
       end-placeholder="End Date"
@@ -242,7 +253,7 @@ DateTimePicker is derived from DatePicker and TimePicker. For a more detailed ex
   <div class="block">
     <span class="demonstration">Start date time 12:00:00, end date time 08:00:00</span>
     <el-date-picker
-      v-model="value6"
+      v-model="value7"
       type="datetimerange"
       align="right"
       start-placeholder="Start Date"
@@ -256,8 +267,8 @@ DateTimePicker is derived from DatePicker and TimePicker. For a more detailed ex
   export default {
     data() {
       return {
-        value5: '',
+        value6: '',
-        value6: ''
+        value7: ''
       };
     }
   };

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

@@ -190,6 +190,7 @@
     isDate,
     modifyDate,
     modifyTime,
+    modifyWithDefaultTime,
     prevYear,
     nextYear,
     prevMonth,
@@ -218,19 +219,6 @@
     }
   };
 
-  const modifyWithGivenTime = (date, time) => {
-    if (date == null || time == null) {
-      return date;
-    }
-    time = parseDate(time, 'HH:mm:ss');
-    return modifyTime(
-      date,
-      time.getHours(),
-      time.getMinutes(),
-      time.getSeconds()
-    );
-  };
-
   export default {
     mixins: [Locale],
 
@@ -510,8 +498,8 @@
 
       handleRangePick(val, close = true) {
         const defaultTime = this.defaultTime || [];
-        const minDate = modifyWithGivenTime(val.minDate, defaultTime[0]);
+        const minDate = modifyWithDefaultTime(val.minDate, defaultTime[0]);
-        const maxDate = modifyWithGivenTime(val.maxDate, defaultTime[1]);
+        const maxDate = modifyWithDefaultTime(val.maxDate, defaultTime[1]);
 
         if (this.maxDate === maxDate && this.minDate === minDate) {
           return;

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

@@ -147,6 +147,7 @@
     isDate,
     modifyDate,
     modifyTime,
+    modifyWithDefaultTime,
     clearMilliseconds,
     clearTime,
     prevYear,
@@ -293,7 +294,7 @@
 
       handleTimePick(value, visible, first) {
         if (isDate(value)) {
-          const newDate = modifyTime(this.date, value.getHours(), value.getMinutes(), value.getSeconds());
+          const newDate = this.value ? modifyTime(this.date, value.getHours(), value.getMinutes(), value.getSeconds()) : modifyWithDefaultTime(value, this.defaultTime);
           this.date = newDate;
           this.emit(this.date, true);
         } else {
@@ -318,7 +319,7 @@
 
       handleDatePick(value) {
         if (this.selectionMode === 'day') {
-          this.date = modifyDate(this.date, value.getFullYear(), value.getMonth(), value.getDate());
+          this.date = this.value ? modifyDate(this.date, value.getFullYear(), value.getMonth(), value.getDate()) : modifyWithDefaultTime(value, this.defaultTime);
           this.emit(this.date, this.showTime);
         } else if (this.selectionMode === 'week') {
           this.emit(value.date);
@@ -347,7 +348,8 @@
       },
 
       confirm() {
-        this.emit(this.date);
+        const date = this.value ? this.date : modifyWithDefaultTime(this.date, this.defaultTime);
+        this.emit(date);
       },
 
       resetView() {
@@ -458,6 +460,7 @@
         date: new Date(),
         value: '',
         defaultValue: null,
+        defaultTime: null,
         showTime: false,
         selectionMode: 'day',
         shortcuts: '',

packages/date-picker/src/util/index.js

@@ -142,6 +142,14 @@ export const modifyTime = function(date, h, m, s) {
   return new Date(date.getFullYear(), date.getMonth(), date.getDate(), h, m, s, date.getMilliseconds());
 };
 
+export const modifyWithDefaultTime = (date, time) => {
+  if (date == null || !time) {
+    return date;
+  }
+  time = parseDate(time, 'HH:mm:ss');
+  return modifyTime(date, time.getHours(), time.getMinutes(), time.getSeconds());
+};
+
 export const clearTime = function(date) {
   return new Date(date.getFullYear(), date.getMonth(), date.getDate());
 };

test/unit/specs/date-picker.spec.js

@@ -261,6 +261,34 @@ describe('DatePicker', () => {
     }, DELAY);
   });
 
+  it('select datetime with defaultTime', done => {
+    vm = createVue({
+      template: `
+        <el-date-picker ref="compo" type="datetime" v-model="value" default-time="12:00:00"></el-date-picker>
+      `,
+      data() {
+        return {
+          value: ''
+        };
+      }
+    }, true);
+
+    const input = vm.$el.querySelector('input');
+    input.blur();
+    input.focus();
+    setTimeout(_ => {
+      const picker = vm.$refs.compo.picker;
+      picker.$el.querySelector('td.available + td.today').click();
+      setTimeout(_ => {
+        const date = vm.$refs.compo.picker.date;
+        expect(date.getHours()).to.equal(12);
+        expect(date.getMinutes()).to.equal(0);
+        expect(date.getSeconds()).to.equal(0);
+        done();
+      }, DELAY);
+    }, DELAY);
+  });
+
   describe('input event', () => {
     // mimic standard <select>'s behavior
     // emit input if and only if value changes