update TimePicker
update TimePicker
This commit is contained in:
梁灏
parent
0fd1369660
commit
456877a165
6 changed files with 268 additions and 19 deletions
BIN
assets/iview.png
BIN
assets/iview.png
Binary file not shown.
|
Before Width: | Height: | Size: 164 KiB After Width: | Height: | Size: 165 KiB |
158
src/components/date-picker/panel/time-range.vue
Normal file
158
src/components/date-picker/panel/time-range.vue
Normal file
|
|
@ -0,0 +1,158 @@
|
|||
<template>
|
||||
<div :class="classes">
|
||||
<div :class="[prefixCls + '-body']">
|
||||
<div :class="[prefixCls + '-content', prefixCls + '-content-left']">
|
||||
<div :class="[timePrefixCls + '-header']">开始时间</div>
|
||||
<time-spinner
|
||||
:show-seconds="showSeconds"
|
||||
:hours="hours"
|
||||
:minutes="minutes"
|
||||
:seconds="seconds"
|
||||
:disabled-hours="disabledHours"
|
||||
:disabled-minutes="disabledMinutes"
|
||||
:disabled-seconds="disabledSeconds"
|
||||
:hide-disabled-options="hideDisabledOptions"
|
||||
@on-change="handleStartChange"
|
||||
@on-pick-click="handlePickClick"></time-spinner>
|
||||
</div>
|
||||
<div :class="[prefixCls + '-content', prefixCls + '-content-right']">
|
||||
<div :class="[timePrefixCls + '-header']">结束时间</div>
|
||||
<time-spinner
|
||||
:show-seconds="showSeconds"
|
||||
:hours="hoursEnd"
|
||||
:minutes="minutesEnd"
|
||||
:seconds="secondsEnd"
|
||||
:disabled-hours="disabledHours"
|
||||
:disabled-minutes="disabledMinutes"
|
||||
:disabled-seconds="disabledSeconds"
|
||||
:hide-disabled-options="hideDisabledOptions"
|
||||
@on-change="handleEndChange"
|
||||
@on-pick-click="handlePickClick"></time-spinner>
|
||||
</div>
|
||||
<Confirm
|
||||
@on-pick-clear="handlePickClear"
|
||||
@on-pick-success="handlePickSuccess"></Confirm>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import TimeSpinner from '../base/time-spinner.vue';
|
||||
import Confirm from '../base/confirm.vue';
|
||||
|
||||
import Mixin from './mixin';
|
||||
|
||||
import { initTimeDate, toDate } from '../util';
|
||||
|
||||
const prefixCls = 'ivu-picker-panel';
|
||||
const timePrefixCls = 'ivu-time-picker';
|
||||
|
||||
export default {
|
||||
mixins: [Mixin],
|
||||
components: { TimeSpinner, Confirm },
|
||||
data () {
|
||||
return {
|
||||
prefixCls: prefixCls,
|
||||
timePrefixCls: timePrefixCls,
|
||||
format: 'HH:mm:ss',
|
||||
date: initTimeDate(),
|
||||
dateEnd: initTimeDate(),
|
||||
value: '',
|
||||
hours: '',
|
||||
minutes: '',
|
||||
seconds: '',
|
||||
hoursEnd: '',
|
||||
minutesEnd: '',
|
||||
secondsEnd: '',
|
||||
disabledHours: [],
|
||||
disabledMinutes: [],
|
||||
disabledSeconds: [],
|
||||
hideDisabledOptions: false
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
classes () {
|
||||
return [
|
||||
`${prefixCls}-body-wrapper`,
|
||||
`${timePrefixCls}-with-range`,
|
||||
{
|
||||
[`${timePrefixCls}-with-seconds`]: this.showSeconds
|
||||
}
|
||||
];
|
||||
},
|
||||
showSeconds () {
|
||||
return (this.format || '').indexOf('ss') !== -1;
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
value (newVal) {
|
||||
if (!newVal) {
|
||||
return;
|
||||
} else if (Array.isArray(newVal)) {
|
||||
const valStart = newVal[0] ? toDate(newVal[0]) : false;
|
||||
const valEnd = newVal[1] ? toDate(newVal[1]) : false;
|
||||
|
||||
if (valStart && valEnd) {
|
||||
this.handleChange(
|
||||
{
|
||||
hours: valStart.getHours(),
|
||||
minutes: valStart.getMinutes(),
|
||||
seconds: valStart.getSeconds()
|
||||
},
|
||||
{
|
||||
hours: valEnd.getHours(),
|
||||
minutes: valEnd.getMinutes(),
|
||||
seconds: valEnd.getSeconds()
|
||||
},
|
||||
false
|
||||
)
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
handleClear() {
|
||||
this.date = initTimeDate();
|
||||
this.dateEnd = initTimeDate();
|
||||
this.hours = '';
|
||||
this.minutes = '';
|
||||
this.seconds = '';
|
||||
this.hoursEnd = '';
|
||||
this.minutesEnd = '';
|
||||
this.secondsEnd = '';
|
||||
},
|
||||
handleChange (date, dateEnd, emit = true) {
|
||||
if (date.hours !== undefined) {
|
||||
this.date.setHours(date.hours);
|
||||
this.hours = this.date.getHours();
|
||||
}
|
||||
if (date.minutes !== undefined) {
|
||||
this.date.setMinutes(date.minutes);
|
||||
this.minutes = this.date.getMinutes();
|
||||
}
|
||||
if (date.seconds !== undefined) {
|
||||
this.date.setSeconds(date.seconds);
|
||||
this.seconds = this.date.getSeconds();
|
||||
}
|
||||
if (dateEnd.hours !== undefined) {
|
||||
this.dateEnd.setHours(dateEnd.hours);
|
||||
this.hoursEnd = this.dateEnd.getHours();
|
||||
}
|
||||
if (dateEnd.minutes !== undefined) {
|
||||
this.dateEnd.setMinutes(dateEnd.minutes);
|
||||
this.minutesEnd = this.dateEnd.getMinutes();
|
||||
}
|
||||
if (dateEnd.seconds !== undefined) {
|
||||
this.dateEnd.setSeconds(dateEnd.seconds);
|
||||
this.secondsEnd = this.dateEnd.getSeconds();
|
||||
}
|
||||
if (emit) this.$emit('on-pick', [this.date, this.dateEnd], true);
|
||||
},
|
||||
handleStartChange (date) {
|
||||
this.handleChange(date, {});
|
||||
},
|
||||
handleEndChange (date) {
|
||||
this.handleChange({}, date);
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
|
@ -201,7 +201,7 @@
|
|||
},
|
||||
iconType () {
|
||||
let icon = 'ios-calendar-outline';
|
||||
if (this.type === 'time') icon = 'ios-clock-outline';
|
||||
if (this.type === 'time' || this.type === 'timerange') icon = 'ios-clock-outline';
|
||||
if (this.showClose) icon = 'ios-close';
|
||||
return icon;
|
||||
},
|
||||
|
|
@ -408,14 +408,16 @@
|
|||
this.picker.resetView && this.picker.resetView();
|
||||
},
|
||||
emitChange (date) {
|
||||
const format = this.format || DEFAULT_FORMATS[this.type];
|
||||
const type = this.type;
|
||||
const format = this.format || DEFAULT_FORMATS[type];
|
||||
const formatter = (
|
||||
TYPE_VALUE_RESOLVER_MAP[this.type] ||
|
||||
TYPE_VALUE_RESOLVER_MAP[type] ||
|
||||
TYPE_VALUE_RESOLVER_MAP['default']
|
||||
).formatter;
|
||||
|
||||
let newDate = formatter(date, format);
|
||||
if (this.type === 'daterange') {
|
||||
if (type === 'daterange' || type === 'timerange') {
|
||||
console.log(newDate);
|
||||
newDate = [newDate.split(RANGE_SEPARATOR)[0], newDate.split(RANGE_SEPARATOR)[1]];
|
||||
}
|
||||
|
||||
|
|
@ -443,12 +445,12 @@
|
|||
immediate: true,
|
||||
handler (val) {
|
||||
const type = this.type;
|
||||
if (type === 'time') {
|
||||
if (type === 'time' || type === 'timerange') {
|
||||
const parser = (
|
||||
TYPE_VALUE_RESOLVER_MAP[type] ||
|
||||
TYPE_VALUE_RESOLVER_MAP['default']
|
||||
).parser;
|
||||
|
||||
if (type === 'timerange') val = val.join(RANGE_SEPARATOR);
|
||||
val = parser(val, this.format || DEFAULT_FORMATS[type]);
|
||||
}
|
||||
this.internalValue = val;
|
||||
|
|
|
|||
|
|
@ -1,18 +1,36 @@
|
|||
import Picker from '../picker.vue';
|
||||
import TimePanel from '../panel/time.vue';
|
||||
import TimeRangePanel from '../panel/time-range.vue';
|
||||
import Options from '../time-mixins';
|
||||
|
||||
const getPanel = function (type) {
|
||||
if (type === 'timerange') {
|
||||
return TimeRangePanel;
|
||||
}
|
||||
return TimePanel;
|
||||
};
|
||||
|
||||
import { oneOf } from '../../../utils/assist';
|
||||
|
||||
export default {
|
||||
mixins: [Picker, Options],
|
||||
props: {
|
||||
type: {
|
||||
validator (value) {
|
||||
return oneOf(value, ['time', 'timerange']);
|
||||
},
|
||||
default: 'time'
|
||||
},
|
||||
value: {}
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
type: 'time'
|
||||
};
|
||||
},
|
||||
created () {
|
||||
this.panel = TimePanel;
|
||||
if (!this.value) {
|
||||
if (this.type === 'timerange') {
|
||||
this.value = ['',''];
|
||||
} else {
|
||||
this.value = '';
|
||||
}
|
||||
}
|
||||
this.panel = getPanel(this.type);
|
||||
}
|
||||
};
|
||||
|
|
@ -1,9 +1,12 @@
|
|||
@time-picker-prefix-cls: ~"@{css-prefix}time-picker";
|
||||
@time-picker-cells-width: 112px;
|
||||
@time-picker-cells-width-with-seconds: @time-picker-cells-width + 56px;
|
||||
|
||||
.@{time-picker-prefix-cls} {
|
||||
&-cells{
|
||||
min-width: 112px;
|
||||
min-width: @time-picker-cells-width;
|
||||
&-with-seconds{
|
||||
min-width: 168px;
|
||||
min-width: @time-picker-cells-width-with-seconds;
|
||||
}
|
||||
|
||||
&-list{
|
||||
|
|
@ -61,4 +64,59 @@
|
|||
}
|
||||
}
|
||||
}
|
||||
|
||||
&-header{
|
||||
height: 32px;
|
||||
line-height: 32px;
|
||||
text-align: center;
|
||||
border-bottom: 1px solid @border-color-split;
|
||||
}
|
||||
|
||||
&-with-range{
|
||||
.@{picker-prefix-cls}-panel{
|
||||
&-body{
|
||||
min-width: @time-picker-cells-width * 2 + 4px;
|
||||
}
|
||||
&-content{
|
||||
float: left;
|
||||
position: relative;
|
||||
|
||||
&:after{
|
||||
content: '';
|
||||
display: block;
|
||||
width: 2px;
|
||||
position: absolute;
|
||||
top: 31px;
|
||||
bottom: 0;
|
||||
right: -2px;
|
||||
background: @border-color-split
|
||||
}
|
||||
|
||||
&-right{
|
||||
float: right;
|
||||
&:after{
|
||||
right: auto;
|
||||
left: -2px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.@{time-picker-prefix-cls}-cells{
|
||||
&-list{
|
||||
&:first-child{
|
||||
border-radius: 0;
|
||||
}
|
||||
&:last-child{
|
||||
border-radius: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
&-with-range&-with-seconds{
|
||||
.@{picker-prefix-cls}-panel{
|
||||
&-body{
|
||||
min-width: @time-picker-cells-width-with-seconds * 2 + 4px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -6,19 +6,29 @@
|
|||
<template>
|
||||
<row>
|
||||
<i-col span="12">
|
||||
<date-picker type="date" placeholder="选择日期" style="width: 200px" @on-ok="ok" confirm @on-clear="clear"></date-picker>
|
||||
<!--<date-picker type="date" placeholder="选择日期" style="width: 200px" @on-ok="ok" confirm @on-clear="clear"></date-picker>-->
|
||||
</i-col>
|
||||
<i-col span="12">
|
||||
<date-picker type="daterange" placement="bottom-end" placeholder="选择日期" style="width: 200px"></date-picker>
|
||||
<date-picker :value="value3" type="daterange" placement="bottom-start" placeholder="选择日期" style="width: 200px"></date-picker>
|
||||
</i-col>
|
||||
<i-col span="12">
|
||||
<span>123,{{value}},456</span>
|
||||
<time-picker
|
||||
:value="value"
|
||||
placeholder="选择时间"
|
||||
format="HH:mm:ss"
|
||||
:hide-disabled-options="false"
|
||||
:disabled-hours="[1,2,5,10,11]"
|
||||
:disabled-hours="[1,2,10,11]"
|
||||
@on-change="c"
|
||||
@on-ok="ok"
|
||||
@on-clear="clear"
|
||||
style="width: 168px"></time-picker>
|
||||
</i-col>
|
||||
<i-col span="12">
|
||||
<time-picker
|
||||
:value="value2"
|
||||
type="timerange"
|
||||
placeholder="选择时间"
|
||||
:hide-disabled-options="false"
|
||||
@on-change="c"
|
||||
@on-ok="ok"
|
||||
@on-clear="clear"
|
||||
|
|
@ -31,7 +41,10 @@
|
|||
data () {
|
||||
return {
|
||||
// value: '2016-12-12 03:03:03'
|
||||
value: '15:12:01'
|
||||
value: '15:12:01',
|
||||
value2: ['08:40:00', '09:40:00'],
|
||||
// value2: [new Date(), new Date()],
|
||||
value3: ['2016-12-01', '2016-12-25']
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue