update DateTimePicker

update DateTimePicker

update DateTimePicker
梁灏
1 parent 2dc27713
Showing 4 changed files with 34 additions and 12 deletions Show diff stats
src/components/date-picker/panel/date-range.vue
src/components/date-picker/panel/date.vue
src/components/date-picker/panel/time-range.vue
src/components/date-picker/panel/time.vue
@@ -117,7 +117,8 @@
                 <time-picker
                     v-ref:time-picker
                     v-show="isTime"
-                    @on-pick="handleTimePick"></time-picker>
+                    @on-pick="handleTimePick"
+                    @on-pick-click="handlePickClick"></time-picker>
             </div>
             <Confirm
                 v-if="confirm"
@@ -145,6 +146,7 @@
     const datePrefixCls = 'ivu-date-picker';
     export default {
+        name: 'DatePicker',
         mixins: [Mixin],
         components: { Icon, DateTable, YearTable, MonthTable, TimePicker, Confirm },
         data () {
@@ -287,12 +289,14 @@
                 this.handleConfirm();
                 if (this.showTime) this.$refs.timePicker.handleClear();
             },
-            resetView() {
+            resetView(reset = false) {
                 this.leftCurrentView = 'date';
                 this.rightCurrentView = 'date';
                 this.leftTableYear = this.leftYear;
                 this.rightTableYear = this.rightYear;
+
+                if (reset) this.isTime = false;
             },
             prevYear (direction) {
                 if (this[`${direction}CurrentView`] === 'year') {
@@ -394,6 +398,7 @@
         },
         compiled () {
             if (this.showTime) {
+                // todo 这里也到不了
                 this.$refs.timePicker.date = this.minDate;
                 this.$refs.timePicker.dateEnd = this.maxDate;
                 this.$refs.timePicker.value = this.value;
@@ -63,7 +63,8 @@
                     v-ref:time-picker
                     show-date
                     v-show="currentView === 'time'"
-                    @on-pick="handleTimePick"></time-picker>
+                    @on-pick="handleTimePick"
+                    @on-pick-click="handlePickClick"></time-picker>
             </div>
             <Confirm
                 v-if="confirm"
@@ -91,6 +92,7 @@
     const datePrefixCls = 'ivu-date-picker';
     export default {
+        name: 'DatePicker',
         mixins: [Mixin],
         components: { Icon, DateTable, YearTable, MonthTable, TimePicker, Confirm },
         data () {
@@ -2,7 +2,10 @@
     <div :class="classes">
         <div :class="[prefixCls + '-body']">
             <div :class="[prefixCls + '-content', prefixCls + '-content-left']">
-                <div :class="[timePrefixCls + '-header']">开始时间</div>
+                <div :class="[timePrefixCls + '-header']">
+                    <template v-if="showDate">{{ visibleDate }}</template>
+                    <template v-else>开始时间</template>
+                </div>
                 <time-spinner
                     v-ref:time-spinner
                     :show-seconds="showSeconds"
@@ -17,7 +20,10 @@
                     @on-pick-click="handlePickClick"></time-spinner>
             </div>
             <div :class="[prefixCls + '-content', prefixCls + '-content-right']">
-                <div :class="[timePrefixCls + '-header']">结束时间</div>
+                <div :class="[timePrefixCls + '-header']">
+                    <template v-if="showDate">{{ visibleDateEnd }}</template>
+                    <template v-else>结束时间</template>
+                </div>
                 <time-spinner
                     v-ref:time-spinner-end
                     :show-seconds="showSeconds"
@@ -57,6 +63,7 @@
                 prefixCls: prefixCls,
                 timePrefixCls: timePrefixCls,
                 format: 'HH:mm:ss',
+                showDate: false,
                 date: initTimeDate(),
                 dateEnd: initTimeDate(),
                 value: '',
@@ -85,6 +92,14 @@
             },
             showSeconds () {
                 return (this.format || '').indexOf('ss') !== -1;
+            },
+            visibleDate () {
+                const date = this.date || initTimeDate();
+                return `${date.getFullYear()}年 ${date.getMonth() + 1}月`;
+            },
+            visibleDateEnd () {
+                const date = this.dateEnd || initTimeDate();
+                return `${date.getFullYear()}年 ${date.getMonth() + 1}月`;
             }
         },
         watch: {
@@ -177,6 +192,9 @@
                 this.$refs.timeSpinner.updateScroll();
                 this.$refs.timeSpinnerEnd.updateScroll();
             }
+        },
+        compiled () {
+            if (this.$parent && this.$parent.$options.name === 'DatePicker') this.showDate = true;
         }
     };
 </script>
 \ No newline at end of file
@@ -37,19 +37,13 @@
     export default {
         mixins: [Mixin],
         components: { TimeSpinner, Confirm },
-        props: {
-            showDate: {
-                type: Boolean,
-                default: false
-            }
-        },
         data () {
             return {
                 prefixCls: prefixCls,
                 timePrefixCls: timePrefixCls,
                 date: initTimeDate(),
                 value: '',
-//                showDate: false,
+                showDate: false,
                 format: 'HH:mm:ss',
                 hours: '',
                 minutes: '',
@@ -109,6 +103,9 @@
             updateScroll () {
                 this.$refs.timeSpinner.updateScroll();
             }
+        },
+        compiled () {
+            if (this.$parent && this.$parent.$options.name === 'DatePicker') this.showDate = true;
         }
     };
 </script>
 \ No newline at end of file