diff --git a/docs/examples-docs/datetime-picker.md b/docs/examples-docs/datetime-picker.md index c3fde9400..c3fc706bd 100644 --- a/docs/examples-docs/datetime-picker.md +++ b/docs/examples-docs/datetime-picker.md @@ -4,7 +4,8 @@ export default { return { minHour: 10, maxHour: 20, - minDate: new Date() + minDate: new Date(), + currentDate: null }; }, @@ -31,8 +32,10 @@ export default { :::demo 基础用法 ```html - -1; } }, + format: { + type: String, + default: 'yyyy.mm.dd hh时 mm分' + }, visibleItemCount: { type: Number, default: 5 @@ -56,31 +61,45 @@ export default { }, data() { + let value = this.value; + if (!value) { + if (this.type.indexOf('date') > -1) { + value = this.minDate; + } else { + const minHour = this.minHour; + value = `${minHour > 10 ? minHour : '0' + minHour}:00`; + } + } else { + value = this.correctValue(value); + } + return { - innerValue: this.val + innerValue: value }; }, watch: { value(val) { - this.innerValue = val; + val = this.correctValue(val); + const isEqual = this.type === 'time' ? val === this.innerValue : val.valueOf() === this.innerValue.valueOf(); + if (!isEqual) this.innerValue = val; }, innerValue(val) { console.log(val + '!!!'); + this.updateColumnValue(val); this.$emit('input', val); } }, computed: { ranges() { - console.log(this.innerValue + '!!'); - // return this.innerValue + '!!'; if (this.type === 'time') { return [ [this.minHour, this.maxHour], [0, 59] ]; } + const { maxYear, maxDate, maxMonth, maxHour, maxMinute } = this.getBoundary('max', this.innerValue); const { minYear, minDate, minMonth, minHour, minMinute } = this.getBoundary('min', this.innerValue); @@ -96,7 +115,7 @@ export default { return result; }, columns() { - return this.ranges.map(range => { + const results = this.ranges.map(range => { const values = this.times(range[1] - range[0] + 1, index => { const value = range[0] + index; return value < 10 ? `0${value}` : `${value}`; @@ -106,10 +125,31 @@ export default { values }; }); + return results; } }, methods: { + correctValue(value) { + // 仅时间 + if (this.type === 'time') { + const [hour, minute] = value.split(':'); + let correctedHour = Math.max(hour, this.minHour); + correctedHour = Math.min(correctedHour, this.maxHour); + + return `${correctedHour}:${minute}`; + } + + // 含有日期的情况 + const { maxYear, maxDate, maxMonth, maxHour, maxMinute } = this.getBoundary('max', value); + const { minYear, minDate, minMonth, minHour, minMinute } = this.getBoundary('min', value); + const minDay = new Date(minYear, minMonth - 1, minDate, minHour, minMinute); + const maxDay = new Date(maxYear, maxMonth - 1, maxDate, maxHour, maxMinute); + value = Math.max(value, minDay); + value = Math.min(value, maxDay); + + return new Date(value); + }, times(n, iteratee) { let index = -1; const result = Array(n); @@ -137,11 +177,11 @@ export default { if (value.getFullYear() === year) { month = boundary.getMonth() + 1; if (value.getMonth() + 1 === month) { - date = value.getDate(); + date = boundary.getDate(); if (value.getDate() === date) { - hour = value.getHours(); + hour = boundary.getHours(); if (value.getHours() === hour) { - minute = value.getMinutes(); + minute = boundary.getMinutes(); } } } @@ -180,8 +220,9 @@ export default { handlePickerConfirm(values) { this.$emit('confirm', this.innerValue); }, - handlePickerChange(picker, values, index) { - console.log(this.innerValue); + handlePickerChange(picker) { + const values = picker.$children.filter(child => child.currentValue !== undefined).map(child => child.currentValue); + console.log(values); let value; if (this.type === 'time') { @@ -200,21 +241,50 @@ export default { } value = new Date(year, month - 1, date, hour, minute); } + value = this.correctValue(value); this.innerValue = value; console.log(value, this.innerValue); - // this.$emit('input', value); - } - }, - - created() { - this.innerValue = this.value; - if (!this.innerValue) { - if (this.type.indexOf('date') > -1) { - this.innerValue = this.minDate; + }, + updateColumnValue(value) { + let values = []; + if (this.type === 'time') { + const currentValue = value.split(':'); + values = [ + currentValue[0], + currentValue[1] + ]; } else { - const minHour = this.minHour; - this.innerValue = `${minHour > 10 ? minHour : '0' + minHour}:00`; + values = [ + `${value.getFullYear()}`, + `0${value.getMonth() + 1}`.slice(-2), + `0${value.getDate()}`.slice(-2) + ]; + if (this.type === 'datetime') { + values.push( + `0${value.getHours()}`.slice(-2), + `0${value.getMinutes()}`.slice(-2) + ); + } } + this.$nextTick(() => { + this.setColumnByValues(values); + }); + }, + setColumnByValues(values) { + const setColumnValue = this.$refs.picker.setColumnValue; + if (this.type === 'time') { + setColumnValue(0, values[0]); + setColumnValue(1, values[1]); + } else { + setColumnValue(0, values[0]); + setColumnValue(1, values[1]); + setColumnValue(2, values[2]); + if (this.type === 'datetime') { + setColumnValue(3, values[3]); + setColumnValue(4, values[4]); + } + } + [].forEach.call(this.$refs.picker.$children, child => child.doOnValueChange()); } } }; diff --git a/packages/picker/src/picker-column.vue b/packages/picker/src/picker-column.vue index 636ca96c2..fcaf64290 100644 --- a/packages/picker/src/picker-column.vue +++ b/packages/picker/src/picker-column.vue @@ -65,23 +65,19 @@ export default { }, watch: { - value(val) { - this.currentValue = val; - }, values(val) { this.currentValues = val; }, - currentValues(val) { if (this.valueIndex === -1) { this.currentValue = (val || [])[0]; } }, - currentValue(val) { this.doOnValueChange(); - this.$emit('change', this); + this.$emit('input', val); + this.$emit('columnChange', this); } }, @@ -236,8 +232,6 @@ export default { const value = this.currentValue; const wrapper = this.$refs.wrapper; - this.$emit('input', this.currentValue); - translateUtil.translateElement(wrapper, null, this.value2Translate(value)); } } diff --git a/packages/picker/src/picker.vue b/packages/picker/src/picker.vue index 2ea6e487f..c4e475380 100644 --- a/packages/picker/src/picker.vue +++ b/packages/picker/src/picker.vue @@ -15,7 +15,7 @@ :itemHeight="itemHeight" :visible-item-count="visibleItemCount" :value-key="valueKey" - @change="columnValueChange(index)"> + @columnChange="columnValueChange(index)">