update DateTimePicker

update DateTimePicker

update DateTimePicker
梁灏
1 parent acde7262
Showing 4 changed files with 39 additions and 26 deletions Show diff stats
src/components/date-picker/panel/date.vue
src/components/date-picker/panel/time.vue
src/components/date-picker/picker.vue
test/routers/date.vue
@@ -60,8 +60,8 @@
                     @on-pick="handleMonthPick"
                     @on-pick-click="handlePickClick"></month-table>
                 <time-picker
-                    v-show="currentView === 'time'"
                     v-ref:time-picker
+                    v-show="currentView === 'time'"
                     :date="date"
                     :value="value"
                     :format="format"
@@ -142,6 +142,13 @@
                     this.year = newVal.getFullYear();
                     this.month = newVal.getMonth();
                 }
+                if (this.showTime) this.$refs.timePicker.value = newVal;
+            },
+            date (val) {
+                if (this.showTime) this.$refs.timePicker.date = val;
+            },
+            format (val) {
+                if (this.showTime) this.$refs.timePicker.format = val;
             },
             currentView (val) {
                 if (val === 'time') this.$refs.timePicker.updateScroll();
@@ -268,6 +275,12 @@
                 this.year = this.date.getFullYear();
                 this.month = this.date.getMonth();
             }
+            if (this.showTime) {
+                this.$refs.timePicker.date = this.date;
+                this.$refs.timePicker.value = this.value;
+                this.$refs.timePicker.format = this.format;
+                this.$refs.timePicker.showDate = true;
+            }
         }
     };
 </script>
@@ -37,29 +37,32 @@
     export default {
         mixins: [Mixin],
         components: { TimeSpinner, Confirm },
-        props: {
-            date: {
-                default () {
-                    return initTimeDate();
-                }
-            },
-            value: {
-                default: ''
-            },
-            showDate: {
-                type: Boolean,
-                default: false
-            },
-            format: {
-                type: String,
-                default: 'HH:mm:ss'
-            }
-        },
+//        props: {
+//            date: {
+//                default () {
+//                    return initTimeDate();
+//                }
+//            },
+//            value: {
+//                default: ''
+//            },
+//            showDate: {
+//                type: Boolean,
+//                default: false
+//            },
+//            format: {
+//                type: String,
+//                default: 'HH:mm:ss'
+//            }
+//        },
         data () {
             return {
                 prefixCls: prefixCls,
                 timePrefixCls: timePrefixCls,
-//                format: 'HH:mm:ss',
+                date: initTimeDate(),
+                value: '',
+                showDate: false,
+                format: 'HH:mm:ss',
                 hours: '',
                 minutes: '',
                 seconds: '',
@@ -398,13 +398,10 @@
                         this.handleClear();
                     });
                     this.picker.$on('on-pick-success', () => {
-//                        this.emitChange(this.value);
                         this.visible = false;
                         this.$emit('on-ok');
                     });
                     this.picker.$on('on-pick-click', () => this.disableClickOutSide = true);
-
-                    // todo $on('on-time-range')
                 }
                 if (this.internalValue instanceof Date) {
                     this.picker.date = new Date(this.internalValue.getTime());
@@ -5,9 +5,9 @@
 </style>
 <template>
     <row>
-        <!--<i-col span="12">-->
-            <!--<date-picker type="date" placeholder="选择日期" style="width: 200px" @on-ok="ok" confirm @on-clear="clear"></date-picker>-->
-        <!--</i-col>-->
+        <i-col span="12">
+            <Time-picker :value="value" type="time" placeholder="选择时间" style="width: 168px"></Time-picker>
+        </i-col>
         <!--<i-col span="12">-->
             <!--<date-picker :value="value3" type="daterange" placement="bottom-start" placeholder="选择日期" style="width: 200px"></date-picker>-->
         <!--</i-col>-->