update TimePicker
update TimePicker
This commit is contained in:
parent
915055614b
commit
2dbbd7dea6
5 changed files with 44 additions and 9 deletions
|
@ -27,15 +27,15 @@
|
||||||
mixins: [Options],
|
mixins: [Options],
|
||||||
props: {
|
props: {
|
||||||
hours: {
|
hours: {
|
||||||
type: Number,
|
type: [Number, String],
|
||||||
default: 0
|
default: 0
|
||||||
},
|
},
|
||||||
minutes: {
|
minutes: {
|
||||||
type: Number,
|
type: [Number, String],
|
||||||
default: 0
|
default: 0
|
||||||
},
|
},
|
||||||
seconds: {
|
seconds: {
|
||||||
type: Number,
|
type: [Number, String],
|
||||||
default: 0
|
default: 0
|
||||||
},
|
},
|
||||||
showSeconds: {
|
showSeconds: {
|
||||||
|
|
|
@ -26,6 +26,8 @@
|
||||||
|
|
||||||
import Mixin from './mixin';
|
import Mixin from './mixin';
|
||||||
|
|
||||||
|
import { initTimeDate } from '../util';
|
||||||
|
|
||||||
const prefixCls = 'ivu-picker-panel';
|
const prefixCls = 'ivu-picker-panel';
|
||||||
const timePrefixCls = 'ivu-time-picker';
|
const timePrefixCls = 'ivu-time-picker';
|
||||||
|
|
||||||
|
@ -37,11 +39,11 @@
|
||||||
prefixCls: prefixCls,
|
prefixCls: prefixCls,
|
||||||
timePrefixCls: timePrefixCls,
|
timePrefixCls: timePrefixCls,
|
||||||
format: 'HH:mm:ss',
|
format: 'HH:mm:ss',
|
||||||
date: new Date(),
|
date: initTimeDate(),
|
||||||
value: '',
|
value: '',
|
||||||
hours: 0,
|
hours: '',
|
||||||
minutes: 0,
|
minutes: '',
|
||||||
seconds: 0,
|
seconds: '',
|
||||||
disabledHours: [],
|
disabledHours: [],
|
||||||
disabledMinutes: [],
|
disabledMinutes: [],
|
||||||
disabledSeconds: [],
|
disabledSeconds: [],
|
||||||
|
@ -68,6 +70,13 @@
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
methods: {
|
methods: {
|
||||||
|
handleClear() {
|
||||||
|
this.date = initTimeDate();
|
||||||
|
this.hours = '';
|
||||||
|
this.minutes = '';
|
||||||
|
this.seconds = '';
|
||||||
|
this.$emit('on-pick', '');
|
||||||
|
},
|
||||||
handleChange (date, emit = true) {
|
handleChange (date, emit = true) {
|
||||||
if (date.hours !== undefined) {
|
if (date.hours !== undefined) {
|
||||||
this.date.setHours(date.hours);
|
this.date.setHours(date.hours);
|
||||||
|
|
|
@ -30,7 +30,7 @@
|
||||||
import Drop from '../../components/select/dropdown.vue';
|
import Drop from '../../components/select/dropdown.vue';
|
||||||
import clickoutside from '../../directives/clickoutside';
|
import clickoutside from '../../directives/clickoutside';
|
||||||
import { oneOf } from '../../utils/assist';
|
import { oneOf } from '../../utils/assist';
|
||||||
import { formatDate, parseDate } from './util';
|
import { formatDate, parseDate, initTimeDate } from './util';
|
||||||
|
|
||||||
const prefixCls = 'ivu-date-picker';
|
const prefixCls = 'ivu-date-picker';
|
||||||
|
|
||||||
|
@ -413,6 +413,15 @@
|
||||||
value: {
|
value: {
|
||||||
immediate: true,
|
immediate: true,
|
||||||
handler (val) {
|
handler (val) {
|
||||||
|
const type = this.type;
|
||||||
|
if (type === 'time') {
|
||||||
|
const parser = (
|
||||||
|
TYPE_VALUE_RESOLVER_MAP[type] ||
|
||||||
|
TYPE_VALUE_RESOLVER_MAP['default']
|
||||||
|
).parser;
|
||||||
|
|
||||||
|
val = parser(val, this.format || DEFAULT_FORMATS[type]);
|
||||||
|
}
|
||||||
this.internalValue = val;
|
this.internalValue = val;
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
|
|
@ -75,3 +75,11 @@ export const nextMonth = function(src) {
|
||||||
|
|
||||||
return new Date(src.getTime());
|
return new Date(src.getTime());
|
||||||
};
|
};
|
||||||
|
|
||||||
|
export const initTimeDate = function (time) {
|
||||||
|
const date = new Date();
|
||||||
|
date.setHours(0);
|
||||||
|
date.setMinutes(0);
|
||||||
|
date.setSeconds(0);
|
||||||
|
return date;
|
||||||
|
};
|
|
@ -12,12 +12,14 @@
|
||||||
<date-picker type="daterange" placement="bottom-end" placeholder="选择日期" style="width: 200px"></date-picker>
|
<date-picker type="daterange" placement="bottom-end" placeholder="选择日期" style="width: 200px"></date-picker>
|
||||||
</i-col>
|
</i-col>
|
||||||
<i-col span="12">
|
<i-col span="12">
|
||||||
|
<span>123,{{value}},456</span>
|
||||||
<time-picker
|
<time-picker
|
||||||
:value="value"
|
:value="value"
|
||||||
placeholder="选择时间"
|
placeholder="选择时间"
|
||||||
format="HH:mm:ss"
|
format="HH:mm:ss"
|
||||||
:hide-disabled-options="false"
|
:hide-disabled-options="false"
|
||||||
:disabled-hours="[1,2,5,10,11]"
|
:disabled-hours="[1,2,5,10,11]"
|
||||||
|
@on-change="c"
|
||||||
style="width: 168px"></time-picker>
|
style="width: 168px"></time-picker>
|
||||||
</i-col>
|
</i-col>
|
||||||
</row>
|
</row>
|
||||||
|
@ -26,7 +28,14 @@
|
||||||
export default {
|
export default {
|
||||||
data () {
|
data () {
|
||||||
return {
|
return {
|
||||||
value: '2016-12-12 03:03:03'
|
// value: '2016-12-12 03:03:03'
|
||||||
|
value: '15:12:01'
|
||||||
|
}
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
c (s) {
|
||||||
|
console.log(s)
|
||||||
|
this.value = s;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
Loading…
Add table
Add a link
Reference in a new issue