update DateTimePicker

update DateTimePicker

src/components/date-picker/base/confirm.vue

@@ -1,6 +1,6 @@
 <template>
     <div :class="[prefixCls + '-confirm']">
-        <span v-if="showTime" @click="handleToggleTime">
+        <span :class="timeClasses" v-if="showTime" @click="handleToggleTime">
             <template v-if="isTime">选择日期</template>
             <template v-else>选择时间</template>
         </span>
@@ -17,13 +17,21 @@
         components: { iButton },
         props: {
             showTime: false,
-            isTime: false
+            isTime: false,
+            timeDisabled: false
         },
         data () {
             return {
                 prefixCls: prefixCls
             };
         },
+        computed: {
+            timeClasses () {
+                return {
+                    [`${prefixCls}-confirm-time-disabled`]: this.timeDisabled
+                };
+            }
+        },
         methods: {
             handleClear () {
                 this.$emit('on-pick-clear');
@@ -32,6 +40,7 @@
                 this.$emit('on-pick-success');
             },
             handleToggleTime () {
+                if (this.timeDisabled) return;
                 this.$emit('on-pick-toggle-time');
             }
         }

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

@@ -7,7 +7,7 @@
                 @click="handleShortcutClick(shortcut)">{{ shortcut.text }}</div>
         </div>
         <div :class="[prefixCls + '-body']">
-            <div :class="[prefixCls + '-content', prefixCls + '-content-left']">
+            <div :class="[prefixCls + '-content', prefixCls + '-content-left']" v-show="!isTime">
                 <div :class="[datePrefixCls + '-header']" v-show="leftCurrentView !== 'time'">
                     <span
                         :class="iconBtnCls('prev', '-double')"
@@ -60,7 +60,7 @@
                     @on-pick="handleLeftMonthPick"
                     @on-pick-click="handlePickClick"></month-table>
             </div>
-            <div :class="[prefixCls + '-content', prefixCls + '-content-right']">
+            <div :class="[prefixCls + '-content', prefixCls + '-content-right']" v-show="!isTime">
                 <div :class="[datePrefixCls + '-header']" v-show="rightCurrentView !== 'time'">
                      <span
                          :class="iconBtnCls('prev', '-double')"
@@ -113,8 +113,18 @@
                     @on-pick="handleRightMonthPick"
                     @on-pick-click="handlePickClick"></month-table>
             </div>
+            <div :class="[prefixCls + '-content']" v-show="isTime">
+                <time-picker
+                    v-ref:time-picker
+                    v-show="isTime"
+                    @on-pick="handleTimePick"></time-picker>
+            </div>
             <Confirm
                 v-if="confirm"
+                :show-time="showTime"
+                :is-time="isTime"
+                :time-disabled="timeDisabled"
+                @on-pick-toggle-time="handleToggleTime"
                 @on-pick-clear="handlePickClear"
                 @on-pick-success="handlePickSuccess"></Confirm>
         </div>
@@ -125,6 +135,7 @@
     import DateTable from '../base/date-table.vue';
     import YearTable from '../base/year-table.vue';
     import MonthTable from '../base/month-table.vue';
+    import TimePicker from './time-range.vue';
     import Confirm from '../base/confirm.vue';
     import { toDate, prevMonth, nextMonth, initTimeDate } from '../util';
 
@@ -135,7 +146,7 @@
 
     export default {
         mixins: [Mixin],
-        components: { Icon, DateTable, YearTable, MonthTable, Confirm },
+        components: { Icon, DateTable, YearTable, MonthTable, TimePicker, Confirm },
         data () {
             return {
                 prefixCls: prefixCls,
@@ -156,7 +167,9 @@
                 rightCurrentView: 'date',
                 selectionMode: 'range',
                 leftTableYear: null,
-                rightTableYear: null
+                rightTableYear: null,
+                isTime: false,
+                format: 'yyyy-MM-dd'
             };
         },
         computed: {
@@ -231,6 +244,9 @@
                     newDate.setMonth(month + 1);
                 }
                 return newDate;
+            },
+            timeDisabled () {
+                return !(this.minDate && this.maxDate);
             }
         },
         watch: {
@@ -243,6 +259,19 @@
                     this.maxDate = newVal[1] ? toDate(newVal[1]) : null;
                     if (this.minDate) this.date = new Date(this.minDate);
                 }
+                if (this.showTime) this.$refs.timePicker.value = newVal;
+            },
+            minDate (val) {
+                if (this.showTime) this.$refs.timePicker.date = val;
+            },
+            maxDate (val) {
+                if (this.showTime) this.$refs.timePicker.dateEnd = val;
+            },
+            format (val) {
+                if (this.showTime) this.$refs.timePicker.format = val;
+            },
+            isTime (val) {
+                if (val) this.$refs.timePicker.updateScroll();
             }
         },
         methods: {
@@ -256,6 +285,7 @@
                 this.maxDate = null;
                 this.date = new Date();
                 this.handleConfirm();
+                if (this.showTime) this.$refs.timePicker.handleClear();
             },
             resetView() {
                 this.leftCurrentView = 'date';
@@ -343,14 +373,32 @@
                 this.maxDate = val.maxDate;
 
                 if (!close) return;
-                if (!this.showTime) {
+//                if (!this.showTime) {
+//                    this.handleConfirm(false);
+//                }
                 this.handleConfirm(false);
-                }
             },
             handleChangeRange (val) {
                 this.minDate = val.minDate;
                 this.maxDate = val.maxDate;
                 this.rangeState = val.rangeState;
+            },
+            handleToggleTime () {
+                this.isTime = !this.isTime;
+            },
+            handleTimePick (date) {
+                this.minDate = date[0];
+                this.maxDate = date[1];
+                this.handleConfirm(false);
+            }
+        },
+        compiled () {
+            if (this.showTime) {
+                this.$refs.timePicker.date = this.minDate;
+                this.$refs.timePicker.dateEnd = this.maxDate;
+                this.$refs.timePicker.value = this.value;
+                this.$refs.timePicker.format = this.format;
+                this.$refs.timePicker.showDate = true;
             }
         }
     };

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

@@ -61,11 +61,8 @@
                     @on-pick-click="handlePickClick"></month-table>
                 <time-picker
                     v-ref:time-picker
-                    v-show="currentView === 'time'"
-                    :date="date"
-                    :value="value"
-                    :format="format"
                     show-date
+                    v-show="currentView === 'time'"
                     @on-pick="handleTimePick"></time-picker>
             </div>
             <Confirm
@@ -276,6 +273,7 @@
                 this.month = this.date.getMonth();
             }
             if (this.showTime) {
+                // todo 这里可能有问题，并不能进入到这里，但不影响正常使用
                 this.$refs.timePicker.date = this.date;
                 this.$refs.timePicker.value = this.value;
                 this.$refs.timePicker.format = this.format;

src/components/date-picker/panel/time-range.vue

@@ -4,6 +4,7 @@
             <div :class="[prefixCls + '-content', prefixCls + '-content-left']">
                 <div :class="[timePrefixCls + '-header']">开始时间</div>
                 <time-spinner
+                    v-ref:time-spinner
                     :show-seconds="showSeconds"
                     :hours="hours"
                     :minutes="minutes"
@@ -18,6 +19,7 @@
             <div :class="[prefixCls + '-content', prefixCls + '-content-right']">
                 <div :class="[timePrefixCls + '-header']">结束时间</div>
                 <time-spinner
+                    v-ref:time-spinner-end
                     :show-seconds="showSeconds"
                     :hours="hoursEnd"
                     :minutes="minutesEnd"
@@ -170,6 +172,10 @@
             },
             handleEndChange (date) {
                 this.handleChange({}, date);
+            },
+            updateScroll () {
+                this.$refs.timeSpinner.updateScroll();
+                this.$refs.timeSpinnerEnd.updateScroll();
             }
         }
     };

src/components/date-picker/panel/time.vue

@@ -37,31 +37,19 @@
     export default {
         mixins: [Mixin],
         components: { TimeSpinner, Confirm },
-//        props: {
+        props: {
-//            date: {
+            showDate: {
-//                default () {
+                type: Boolean,
-//                    return initTimeDate();
+                default: false
-//                }
+            }
-//            },
+        },
-//            value: {
-//                default: ''
-//            },
-//            showDate: {
-//                type: Boolean,
-//                default: false
-//            },
-//            format: {
-//                type: String,
-//                default: 'HH:mm:ss'
-//            }
-//        },
         data () {
             return {
                 prefixCls: prefixCls,
                 timePrefixCls: timePrefixCls,
                 date: initTimeDate(),
                 value: '',
-                showDate: false,
+//                showDate: false,
                 format: 'HH:mm:ss',
                 hours: '',
                 minutes: '',

src/styles/components/date-picker.less

@@ -258,5 +258,9 @@
                 color: @link-active-color;
             }
         }
+        & > span&-time-disabled{
+            color: @btn-disable-color;
+            cursor: @cursor-disabled;
+        }
     }
 }

src/styles/components/time-picker.less

@@ -93,7 +93,8 @@
                     top: 31px;
                     bottom: 0;
                     right: -2px;
-                    background: @border-color-split
+                    background: @border-color-split;
+                    z-index: 1;
                 }
 
                 &-right{

test/routers/date.vue

@@ -6,6 +6,7 @@
 <template>
     <row>
         <i-col span="12">
+            <Date-picker format="yyyy-MM-dd HH:mm:ss" type="datetime" placeholder="选择日期时间" style="width: 300px" @on-change="c"></Date-picker>
             <Time-picker :value="value" type="time" placeholder="选择时间" style="width: 168px"></Time-picker>
         </i-col>
         <!--<i-col span="12">-->
@@ -24,7 +25,7 @@
                 <!--style="width: 168px"></time-picker>-->
         <!--</i-col>-->
         <i-col span="12">
-            <Date-picker :value="value1" format="yyyy-MM-dd HH:mm:ss" type="datetime" placeholder="选择日期时间" style="width: 200px" @on-change="c"></Date-picker>
+            <Date-picker format="yyyy-MM-dd HH:mm:ss" type="datetimerange" placeholder="选择日期时间" style="width: 300px" @on-change="c"></Date-picker>
             <!--<time-picker-->
                 <!--:value="value2"-->
                 <!--type="timerange"-->
@@ -44,11 +45,12 @@
         data () {
             return {
 //                value: '2016-12-12 03:03:03',
-                value1: '2015-12-12 09:41',
+                value1: '2015-12-12 09:41:00',
                 value: '03:12:01',
                 value2: ['08:40:00', '09:40:00'],
 //                value2: [new Date(), new Date()],
-                value3: ['2016-12-01', '2016-12-25']
+                value3: ['2016-12-01', '2016-12-25'],
+                val4: ['2016-12-01 09:41:12', '2016-12-25 12:23:32']
             }
         },
         methods: {