move files to subfolders
This commit is contained in:
Sergio Crisostomo
parent
c4e3fe331f
commit
ca8e830cc3
8 changed files with 297 additions and 385 deletions
50
src/components/date-picker/panel/Date/date-panel-mixin.js
Normal file
50
src/components/date-picker/panel/Date/date-panel-mixin.js
Normal file
|
|
@ -0,0 +1,50 @@
|
|||
|
||||
import { oneOf } from '../../../../utils/assist';
|
||||
import {initTimeDate } from '../../util';
|
||||
|
||||
|
||||
export default {
|
||||
props: {
|
||||
confirm: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
showTime: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
format: {
|
||||
type: String,
|
||||
default: 'yyyy-MM-dd'
|
||||
},
|
||||
selectionMode: {
|
||||
type: String,
|
||||
validator (value) {
|
||||
return oneOf(value, ['year', 'month', 'date', 'time']);
|
||||
},
|
||||
default: 'date'
|
||||
},
|
||||
shortcuts: {
|
||||
type: Array,
|
||||
default: () => []
|
||||
},
|
||||
disabledDate: {
|
||||
type: Function,
|
||||
default: () => false
|
||||
},
|
||||
value: {
|
||||
type: Array,
|
||||
default: () => [initTimeDate(), initTimeDate()]
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
isTime(){
|
||||
return this.currentView === 'time';
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
handleToggleTime(){
|
||||
this.currentView = this.currentView === 'time' ? this.selectionMode : 'time';
|
||||
},
|
||||
}
|
||||
};
|
||||
163
src/components/date-picker/panel/Time/time-range.vue
Normal file
163
src/components/date-picker/panel/Time/time-range.vue
Normal file
|
|
@ -0,0 +1,163 @@
|
|||
<template>
|
||||
<div :class="classes" @mousedown.prevent>
|
||||
<div :class="[prefixCls + '-body']">
|
||||
<div :class="[prefixCls + '-content', prefixCls + '-content-left']">
|
||||
<div :class="[timePrefixCls + '-header']">
|
||||
<template v-if="showDate">{{ leftDatePanelLabel }}</template>
|
||||
<template v-else>{{ t('i.datepicker.startTime') }}</template>
|
||||
</div>
|
||||
<time-spinner
|
||||
ref="timeSpinner"
|
||||
:steps="steps"
|
||||
:show-seconds="showSeconds"
|
||||
:hours="dateStart.getHours()"
|
||||
:minutes="dateStart.getMinutes()"
|
||||
:seconds="dateStart.getSeconds()"
|
||||
: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']">
|
||||
<template v-if="showDate">{{ rightDatePanelLabel }}</template>
|
||||
<template v-else>{{ t('i.datepicker.endTime') }}</template>
|
||||
</div>
|
||||
<time-spinner
|
||||
ref="timeSpinnerEnd"
|
||||
:steps="steps"
|
||||
:show-seconds="showSeconds"
|
||||
:hours="dateEnd.getHours()"
|
||||
:minutes="dateEnd.getMinutes()"
|
||||
:seconds="dateEnd.getSeconds()"
|
||||
:disabled-hours="disabledHours"
|
||||
:disabled-minutes="disabledMinutes"
|
||||
:disabled-seconds="disabledSeconds"
|
||||
:hide-disabled-options="hideDisabledOptions"
|
||||
@on-change="handleEndChange"
|
||||
@on-pick-click="handlePickClick"></time-spinner>
|
||||
</div>
|
||||
<Confirm
|
||||
v-if="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 Options from '../../time-mixins';
|
||||
|
||||
|
||||
import Mixin from '../panel-mixin';
|
||||
import Locale from '../../../../mixins/locale';
|
||||
|
||||
import { initTimeDate, formatDateLabels } from '../../util';
|
||||
|
||||
const prefixCls = 'ivu-picker-panel';
|
||||
const timePrefixCls = 'ivu-time-picker';
|
||||
|
||||
const capitalize = (str) => str[0].toUpperCase() + str.slice(1);
|
||||
|
||||
export default {
|
||||
name: 'RangeTimePickerPanel',
|
||||
mixins: [ Mixin, Locale, Options ],
|
||||
components: { TimeSpinner, Confirm },
|
||||
props: {
|
||||
steps: {
|
||||
type: Array,
|
||||
default: () => []
|
||||
},
|
||||
format: {
|
||||
type: String,
|
||||
default: 'HH:mm:ss'
|
||||
},
|
||||
value: {
|
||||
type: Array,
|
||||
required: true
|
||||
},
|
||||
},
|
||||
data () {
|
||||
const [dateStart, dateEnd] = this.value.slice();
|
||||
return {
|
||||
prefixCls: prefixCls,
|
||||
timePrefixCls: timePrefixCls,
|
||||
showDate: false,
|
||||
dateStart: dateStart || initTimeDate(),
|
||||
dateEnd: dateEnd || initTimeDate(),
|
||||
confirm: false
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
classes () {
|
||||
return [
|
||||
`${prefixCls}-body-wrapper`,
|
||||
`${timePrefixCls}-with-range`,
|
||||
{
|
||||
[`${timePrefixCls}-with-seconds`]: this.showSeconds
|
||||
}
|
||||
];
|
||||
},
|
||||
showSeconds () {
|
||||
return (this.format || '').indexOf('ss') !== -1;
|
||||
},
|
||||
leftDatePanelLabel () {
|
||||
return this.panelLabelConfig(this.date);
|
||||
},
|
||||
rightDatePanelLabel () {
|
||||
return this.panelLabelConfig(this.dateEnd);
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
value (dates) {
|
||||
const [dateStart, dateEnd] = dates.slice();
|
||||
this.dateStart = dateStart || initTimeDate();
|
||||
this.dateEnd = dateEnd || initTimeDate();
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
panelLabelConfig (date) {
|
||||
const locale = this.t('i.locale');
|
||||
const datePanelLabel = this.t('i.datepicker.datePanelLabel');
|
||||
const { labels, separator } = formatDateLabels(locale, datePanelLabel, date || initTimeDate());
|
||||
return [labels[0].label, separator, labels[1].label].join('');
|
||||
},
|
||||
handleChange (start, end, emit = true) {
|
||||
|
||||
const dateStart = new Date(this.dateStart);
|
||||
let dateEnd = new Date(this.dateEnd);
|
||||
|
||||
// set dateStart
|
||||
Object.keys(start).forEach(type => {
|
||||
dateStart[`set${capitalize(type)}`](start[type])
|
||||
});
|
||||
|
||||
// set dateEnd
|
||||
Object.keys(end).forEach(type => {
|
||||
dateEnd[`set${capitalize(type)}`](end[type]);
|
||||
});
|
||||
|
||||
// judge endTime > startTime?
|
||||
if (dateEnd < dateStart) dateEnd = dateStart;
|
||||
|
||||
if (emit) this.$emit('on-pick', [dateStart, dateEnd], true);
|
||||
},
|
||||
handleStartChange (date) {
|
||||
this.handleChange(date, {});
|
||||
},
|
||||
handleEndChange (date) {
|
||||
this.handleChange({}, date);
|
||||
},
|
||||
updateScroll () {
|
||||
this.$refs.timeSpinner.updateScroll();
|
||||
this.$refs.timeSpinnerEnd.updateScroll();
|
||||
}
|
||||
},
|
||||
mounted () {
|
||||
if (this.$parent && this.$parent.$options.name === 'DatePicker') this.showDate = true;
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
|
@ -7,9 +7,9 @@
|
|||
ref="timeSpinner"
|
||||
:show-seconds="showSeconds"
|
||||
:steps="steps"
|
||||
:hours="hours"
|
||||
:minutes="minutes"
|
||||
:seconds="seconds"
|
||||
:hours="date.getHours()"
|
||||
:minutes="date.getMinutes()"
|
||||
:seconds="date.getSeconds()"
|
||||
:disabled-hours="disabledHours"
|
||||
:disabled-minutes="disabledMinutes"
|
||||
:disabled-seconds="disabledSeconds"
|
||||
|
|
@ -25,42 +25,45 @@
|
|||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import TimeSpinner from '../base/time-spinner.vue';
|
||||
import Confirm from '../base/confirm.vue';
|
||||
import TimeSpinner from '../../base/time-spinner.vue';
|
||||
import Confirm from '../../base/confirm.vue';
|
||||
import Options from '../../time-mixins';
|
||||
|
||||
import Mixin from './mixin';
|
||||
import Locale from '../../../mixins/locale';
|
||||
|
||||
import { initTimeDate } from '../util';
|
||||
import Mixin from '../panel-mixin';
|
||||
import Locale from '../../../../mixins/locale';
|
||||
|
||||
import { initTimeDate } from '../../util';
|
||||
|
||||
const prefixCls = 'ivu-picker-panel';
|
||||
const timePrefixCls = 'ivu-time-picker';
|
||||
|
||||
const capitalize = (str) => str[0].toUpperCase() + str.slice(1);
|
||||
|
||||
export default {
|
||||
name: 'TimePicker',
|
||||
mixins: [ Mixin, Locale ],
|
||||
name: 'TimePickerPanel',
|
||||
mixins: [ Mixin, Locale, Options ],
|
||||
components: { TimeSpinner, Confirm },
|
||||
props: {
|
||||
steps: {
|
||||
type: Array,
|
||||
default: () => []
|
||||
}
|
||||
},
|
||||
format: {
|
||||
type: String,
|
||||
default: 'HH:mm:ss'
|
||||
},
|
||||
value: {
|
||||
type: Array,
|
||||
required: true
|
||||
},
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
prefixCls: prefixCls,
|
||||
timePrefixCls: timePrefixCls,
|
||||
date: initTimeDate(),
|
||||
value: '',
|
||||
date: this.value[0] || initTimeDate(),
|
||||
showDate: false,
|
||||
format: 'HH:mm:ss',
|
||||
hours: '',
|
||||
minutes: '',
|
||||
seconds: '',
|
||||
disabledHours: [],
|
||||
disabledMinutes: [],
|
||||
disabledSeconds: [],
|
||||
hideDisabledOptions: false,
|
||||
confirm: false
|
||||
};
|
||||
},
|
||||
|
|
@ -68,7 +71,7 @@
|
|||
showSeconds () {
|
||||
return (this.format || '').indexOf('ss') !== -1;
|
||||
},
|
||||
visibleDate () {
|
||||
visibleDate () { // TODO
|
||||
const date = this.date;
|
||||
const month = date.getMonth() + 1;
|
||||
const tYear = this.t('i.datepicker.year');
|
||||
|
|
@ -77,44 +80,22 @@
|
|||
}
|
||||
},
|
||||
watch: {
|
||||
value (newVal) {
|
||||
if (!newVal) return;
|
||||
value (dates) {
|
||||
let newVal = dates[0] || initTimeDate();
|
||||
newVal = new Date(newVal);
|
||||
if (!isNaN(newVal)) {
|
||||
this.date = newVal;
|
||||
this.handleChange({
|
||||
hours: newVal.getHours(),
|
||||
minutes: newVal.getMinutes(),
|
||||
seconds: newVal.getSeconds()
|
||||
}, false);
|
||||
}
|
||||
this.date = newVal;
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
handleClear() {
|
||||
this.date = initTimeDate();
|
||||
this.hours = '';
|
||||
this.minutes = '';
|
||||
this.seconds = '';
|
||||
},
|
||||
handleChange (date, 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 (emit) this.$emit('on-pick', this.date, true);
|
||||
|
||||
const newDate = new Date(this.date);
|
||||
Object.keys(date).forEach(
|
||||
type => newDate[`set${capitalize(type)}`](date[type])
|
||||
);
|
||||
|
||||
if (emit) this.$emit('on-pick', newDate, true);
|
||||
},
|
||||
updateScroll () {
|
||||
this.$refs.timeSpinner.updateScroll();
|
||||
}
|
||||
},
|
||||
mounted () {
|
||||
if (this.$parent && this.$parent.$options.name === 'DatePicker') this.showDate = true;
|
||||
|
|
@ -15,13 +15,32 @@ export default {
|
|||
if (shortcut.onClick) shortcut.onClick(this);
|
||||
},
|
||||
handlePickClear () {
|
||||
this.resetView();
|
||||
this.$emit('on-pick-clear');
|
||||
},
|
||||
handlePickSuccess () {
|
||||
this.resetView();
|
||||
this.$emit('on-pick-success');
|
||||
},
|
||||
handlePickClick () {
|
||||
this.$emit('on-pick-click');
|
||||
}
|
||||
},
|
||||
resetView(){
|
||||
setTimeout(
|
||||
() => this.currentView = this.selectionMode,
|
||||
500 // 500ms so the dropdown can close before changing
|
||||
);
|
||||
},
|
||||
handleClear() {
|
||||
this.dates = this.dates.map(() => null);
|
||||
this.rangeState = {};
|
||||
this.$emit('on-pick', this.dates);
|
||||
this.handleConfirm();
|
||||
// if (this.showTime) this.$refs.timePicker.handleClear();
|
||||
},
|
||||
handleConfirm(visible) {
|
||||
this.$emit('on-pick', this.dates, visible);
|
||||
},
|
||||
|
||||
}
|
||||
};
|
||||
|
|
@ -1,214 +0,0 @@
|
|||
<template>
|
||||
<div :class="classes" @mousedown.prevent>
|
||||
<div :class="[prefixCls + '-body']">
|
||||
<div :class="[prefixCls + '-content', prefixCls + '-content-left']">
|
||||
<div :class="[timePrefixCls + '-header']">
|
||||
<template v-if="showDate">{{ leftDatePanelLabel }}</template>
|
||||
<template v-else>{{ t('i.datepicker.startTime') }}</template>
|
||||
</div>
|
||||
<time-spinner
|
||||
ref="timeSpinner"
|
||||
:steps="steps"
|
||||
: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']">
|
||||
<template v-if="showDate">{{ rightDatePanelLabel }}</template>
|
||||
<template v-else>{{ t('i.datepicker.endTime') }}</template>
|
||||
</div>
|
||||
<time-spinner
|
||||
ref="timeSpinnerEnd"
|
||||
:steps="steps"
|
||||
: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
|
||||
v-if="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 Locale from '../../../mixins/locale';
|
||||
|
||||
import { initTimeDate, toDate, formatDate, formatDateLabels } from '../util';
|
||||
|
||||
const prefixCls = 'ivu-picker-panel';
|
||||
const timePrefixCls = 'ivu-time-picker';
|
||||
|
||||
export default {
|
||||
name: 'TimePicker',
|
||||
mixins: [ Mixin, Locale ],
|
||||
components: { TimeSpinner, Confirm },
|
||||
props: {
|
||||
steps: {
|
||||
type: Array,
|
||||
default: () => []
|
||||
}
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
prefixCls: prefixCls,
|
||||
timePrefixCls: timePrefixCls,
|
||||
format: 'HH:mm:ss',
|
||||
showDate: false,
|
||||
date: initTimeDate(),
|
||||
dateEnd: initTimeDate(),
|
||||
value: '',
|
||||
hours: '',
|
||||
minutes: '',
|
||||
seconds: '',
|
||||
hoursEnd: '',
|
||||
minutesEnd: '',
|
||||
secondsEnd: '',
|
||||
disabledHours: [],
|
||||
disabledMinutes: [],
|
||||
disabledSeconds: [],
|
||||
hideDisabledOptions: false,
|
||||
confirm: false
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
classes () {
|
||||
return [
|
||||
`${prefixCls}-body-wrapper`,
|
||||
`${timePrefixCls}-with-range`,
|
||||
{
|
||||
[`${timePrefixCls}-with-seconds`]: this.showSeconds
|
||||
}
|
||||
];
|
||||
},
|
||||
showSeconds () {
|
||||
return (this.format || '').indexOf('ss') !== -1;
|
||||
},
|
||||
leftDatePanelLabel () {
|
||||
return this.panelLabelConfig(this.date);
|
||||
},
|
||||
rightDatePanelLabel () {
|
||||
return this.panelLabelConfig(this.dateEnd);
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
value (newVal) {
|
||||
if (!newVal) return;
|
||||
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: {
|
||||
panelLabelConfig (date) {
|
||||
const locale = this.t('i.locale');
|
||||
const datePanelLabel = this.t('i.datepicker.datePanelLabel');
|
||||
const { labels, separator } = formatDateLabels(locale, datePanelLabel, date || initTimeDate());
|
||||
return [labels[0].label, separator, labels[1].label].join('');
|
||||
},
|
||||
handleClear() {
|
||||
this.date = initTimeDate();
|
||||
this.dateEnd = initTimeDate();
|
||||
this.hours = '';
|
||||
this.minutes = '';
|
||||
this.seconds = '';
|
||||
this.hoursEnd = '';
|
||||
this.minutesEnd = '';
|
||||
this.secondsEnd = '';
|
||||
},
|
||||
handleChange (date, dateEnd, emit = true) {
|
||||
const oldDateEnd = new Date(this.dateEnd);
|
||||
|
||||
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();
|
||||
}
|
||||
// judge endTime > startTime?
|
||||
if (this.dateEnd < this.date) {
|
||||
this.$nextTick(() => {
|
||||
this.dateEnd = new Date(this.date);
|
||||
this.hoursEnd = this.dateEnd.getHours();
|
||||
this.minutesEnd = this.dateEnd.getMinutes();
|
||||
this.secondsEnd = this.dateEnd.getSeconds();
|
||||
|
||||
const format = 'yyyy-MM-dd HH:mm:ss';
|
||||
if (formatDate(oldDateEnd, format) !== formatDate(this.dateEnd, format)) {
|
||||
if (emit) this.$emit('on-pick', [this.date, this.dateEnd], true);
|
||||
}
|
||||
});
|
||||
} else {
|
||||
if (emit) this.$emit('on-pick', [this.date, this.dateEnd], true);
|
||||
}
|
||||
},
|
||||
handleStartChange (date) {
|
||||
this.handleChange(date, {});
|
||||
},
|
||||
handleEndChange (date) {
|
||||
this.handleChange({}, date);
|
||||
},
|
||||
updateScroll () {
|
||||
this.$refs.timeSpinner.updateScroll();
|
||||
this.$refs.timeSpinnerEnd.updateScroll();
|
||||
}
|
||||
},
|
||||
mounted () {
|
||||
if (this.$parent && this.$parent.$options.name === 'DatePicker') this.showDate = true;
|
||||
}
|
||||
};
|
||||
</script>
|
||||
Loading…
Add table
Add a link
Reference in a new issue