Commit 36931442588617d7feb7dce0ef431df6332f505f
1 parent
acde7262
update DateTimePicker
update DateTimePicker
Showing
4 changed files
with
39 additions
and
26 deletions
Show diff stats
src/components/date-picker/panel/date.vue
| @@ -60,8 +60,8 @@ | @@ -60,8 +60,8 @@ | ||
| 60 | @on-pick="handleMonthPick" | 60 | @on-pick="handleMonthPick" |
| 61 | @on-pick-click="handlePickClick"></month-table> | 61 | @on-pick-click="handlePickClick"></month-table> |
| 62 | <time-picker | 62 | <time-picker |
| 63 | - v-show="currentView === 'time'" | ||
| 64 | v-ref:time-picker | 63 | v-ref:time-picker |
| 64 | + v-show="currentView === 'time'" | ||
| 65 | :date="date" | 65 | :date="date" |
| 66 | :value="value" | 66 | :value="value" |
| 67 | :format="format" | 67 | :format="format" |
| @@ -142,6 +142,13 @@ | @@ -142,6 +142,13 @@ | ||
| 142 | this.year = newVal.getFullYear(); | 142 | this.year = newVal.getFullYear(); |
| 143 | this.month = newVal.getMonth(); | 143 | this.month = newVal.getMonth(); |
| 144 | } | 144 | } |
| 145 | + if (this.showTime) this.$refs.timePicker.value = newVal; | ||
| 146 | + }, | ||
| 147 | + date (val) { | ||
| 148 | + if (this.showTime) this.$refs.timePicker.date = val; | ||
| 149 | + }, | ||
| 150 | + format (val) { | ||
| 151 | + if (this.showTime) this.$refs.timePicker.format = val; | ||
| 145 | }, | 152 | }, |
| 146 | currentView (val) { | 153 | currentView (val) { |
| 147 | if (val === 'time') this.$refs.timePicker.updateScroll(); | 154 | if (val === 'time') this.$refs.timePicker.updateScroll(); |
| @@ -268,6 +275,12 @@ | @@ -268,6 +275,12 @@ | ||
| 268 | this.year = this.date.getFullYear(); | 275 | this.year = this.date.getFullYear(); |
| 269 | this.month = this.date.getMonth(); | 276 | this.month = this.date.getMonth(); |
| 270 | } | 277 | } |
| 278 | + if (this.showTime) { | ||
| 279 | + this.$refs.timePicker.date = this.date; | ||
| 280 | + this.$refs.timePicker.value = this.value; | ||
| 281 | + this.$refs.timePicker.format = this.format; | ||
| 282 | + this.$refs.timePicker.showDate = true; | ||
| 283 | + } | ||
| 271 | } | 284 | } |
| 272 | }; | 285 | }; |
| 273 | </script> | 286 | </script> |
src/components/date-picker/panel/time.vue
| @@ -37,29 +37,32 @@ | @@ -37,29 +37,32 @@ | ||
| 37 | export default { | 37 | export default { |
| 38 | mixins: [Mixin], | 38 | mixins: [Mixin], |
| 39 | components: { TimeSpinner, Confirm }, | 39 | components: { TimeSpinner, Confirm }, |
| 40 | - props: { | ||
| 41 | - date: { | ||
| 42 | - default () { | ||
| 43 | - return initTimeDate(); | ||
| 44 | - } | ||
| 45 | - }, | ||
| 46 | - value: { | ||
| 47 | - default: '' | ||
| 48 | - }, | ||
| 49 | - showDate: { | ||
| 50 | - type: Boolean, | ||
| 51 | - default: false | ||
| 52 | - }, | ||
| 53 | - format: { | ||
| 54 | - type: String, | ||
| 55 | - default: 'HH:mm:ss' | ||
| 56 | - } | ||
| 57 | - }, | 40 | +// props: { |
| 41 | +// date: { | ||
| 42 | +// default () { | ||
| 43 | +// return initTimeDate(); | ||
| 44 | +// } | ||
| 45 | +// }, | ||
| 46 | +// value: { | ||
| 47 | +// default: '' | ||
| 48 | +// }, | ||
| 49 | +// showDate: { | ||
| 50 | +// type: Boolean, | ||
| 51 | +// default: false | ||
| 52 | +// }, | ||
| 53 | +// format: { | ||
| 54 | +// type: String, | ||
| 55 | +// default: 'HH:mm:ss' | ||
| 56 | +// } | ||
| 57 | +// }, | ||
| 58 | data () { | 58 | data () { |
| 59 | return { | 59 | return { |
| 60 | prefixCls: prefixCls, | 60 | prefixCls: prefixCls, |
| 61 | timePrefixCls: timePrefixCls, | 61 | timePrefixCls: timePrefixCls, |
| 62 | -// format: 'HH:mm:ss', | 62 | + date: initTimeDate(), |
| 63 | + value: '', | ||
| 64 | + showDate: false, | ||
| 65 | + format: 'HH:mm:ss', | ||
| 63 | hours: '', | 66 | hours: '', |
| 64 | minutes: '', | 67 | minutes: '', |
| 65 | seconds: '', | 68 | seconds: '', |
src/components/date-picker/picker.vue
| @@ -398,13 +398,10 @@ | @@ -398,13 +398,10 @@ | ||
| 398 | this.handleClear(); | 398 | this.handleClear(); |
| 399 | }); | 399 | }); |
| 400 | this.picker.$on('on-pick-success', () => { | 400 | this.picker.$on('on-pick-success', () => { |
| 401 | -// this.emitChange(this.value); | ||
| 402 | this.visible = false; | 401 | this.visible = false; |
| 403 | this.$emit('on-ok'); | 402 | this.$emit('on-ok'); |
| 404 | }); | 403 | }); |
| 405 | this.picker.$on('on-pick-click', () => this.disableClickOutSide = true); | 404 | this.picker.$on('on-pick-click', () => this.disableClickOutSide = true); |
| 406 | - | ||
| 407 | - // todo $on('on-time-range') | ||
| 408 | } | 405 | } |
| 409 | if (this.internalValue instanceof Date) { | 406 | if (this.internalValue instanceof Date) { |
| 410 | this.picker.date = new Date(this.internalValue.getTime()); | 407 | this.picker.date = new Date(this.internalValue.getTime()); |
test/routers/date.vue
| @@ -5,9 +5,9 @@ | @@ -5,9 +5,9 @@ | ||
| 5 | </style> | 5 | </style> |
| 6 | <template> | 6 | <template> |
| 7 | <row> | 7 | <row> |
| 8 | - <!--<i-col span="12">--> | ||
| 9 | - <!--<date-picker type="date" placeholder="选择日期" style="width: 200px" @on-ok="ok" confirm @on-clear="clear"></date-picker>--> | ||
| 10 | - <!--</i-col>--> | 8 | + <i-col span="12"> |
| 9 | + <Time-picker :value="value" type="time" placeholder="选择时间" style="width: 168px"></Time-picker> | ||
| 10 | + </i-col> | ||
| 11 | <!--<i-col span="12">--> | 11 | <!--<i-col span="12">--> |
| 12 | <!--<date-picker :value="value3" type="daterange" placement="bottom-start" placeholder="选择日期" style="width: 200px"></date-picker>--> | 12 | <!--<date-picker :value="value3" type="daterange" placement="bottom-start" placeholder="选择日期" style="width: 200px"></date-picker>--> |
| 13 | <!--</i-col>--> | 13 | <!--</i-col>--> |