move date.vue to subfolder
This commit is contained in:
Sergio Crisostomo
parent
11867c87a7
commit
e32b86e97f
2 changed files with 162 additions and 261 deletions
162
src/components/date-picker/panel/Date/date.vue
Normal file
162
src/components/date-picker/panel/Date/date.vue
Normal file
|
|
@ -0,0 +1,162 @@
|
|||
<template>
|
||||
<div :class="classes" @mousedown.prevent>
|
||||
<div :class="[prefixCls + '-sidebar']" v-if="shortcuts.length">
|
||||
<div
|
||||
:class="[prefixCls + '-shortcut']"
|
||||
v-for="shortcut in shortcuts"
|
||||
@click="handleShortcutClick(shortcut)">{{ shortcut.text }}</div>
|
||||
</div>
|
||||
<div :class="[prefixCls + '-body']">
|
||||
<div :class="[datePrefixCls + '-header']" v-show="currentView !== 'time'">
|
||||
<span
|
||||
:class="iconBtnCls('prev', '-double')"
|
||||
@click="changeYear(-1)"><Icon type="ios-arrow-left"></Icon></span>
|
||||
<span
|
||||
:class="iconBtnCls('prev')"
|
||||
@click="changeMonth(-1)"
|
||||
v-show="currentView === 'date'"><Icon type="ios-arrow-left"></Icon></span>
|
||||
<date-panel-label
|
||||
:date-panel-label="datePanelLabel"
|
||||
:current-view="currentView"
|
||||
:date-prefix-cls="datePrefixCls"></date-panel-label>
|
||||
<span
|
||||
:class="iconBtnCls('next', '-double')"
|
||||
@click="changeYear(+1)"><Icon type="ios-arrow-right"></Icon></span>
|
||||
<span
|
||||
:class="iconBtnCls('next')"
|
||||
@click="changeMonth(+1)"
|
||||
v-show="currentView === 'date'"><Icon type="ios-arrow-right"></Icon></span>
|
||||
</div>
|
||||
<div :class="[prefixCls + '-content']">
|
||||
<component
|
||||
:is="pickerTable"
|
||||
ref="pickerTable"
|
||||
v-if="currentView !== 'time'"
|
||||
:table-date="panelDate"
|
||||
:value="dates"
|
||||
:selection-mode="selectionMode"
|
||||
:disabled-date="disabledDate"
|
||||
@on-pick="handlePick"
|
||||
@on-pick-click="handlePickClick"
|
||||
></component>
|
||||
</div>
|
||||
<div :class="[prefixCls + '-content']" v-show="isTime">
|
||||
<time-picker
|
||||
ref="timePicker"
|
||||
v-if="currentView === 'time'"
|
||||
:value="dates"
|
||||
:format="format"
|
||||
:time-disabled="timeDisabled"
|
||||
@on-pick="handlePick"
|
||||
@on-pick-click="handlePickClick"
|
||||
@on-pick-clear="handlePickClear"
|
||||
@on-pick-success="handlePickSuccess"
|
||||
@on-pick-toggle-time="handleToggleTime"
|
||||
></time-picker>
|
||||
</div>
|
||||
<Confirm
|
||||
v-if="confirm"
|
||||
:show-time="showTime"
|
||||
:is-time="isTime"
|
||||
@on-pick-toggle-time="handleToggleTime"
|
||||
@on-pick-clear="handlePickClear"
|
||||
@on-pick-success="handlePickSuccess"
|
||||
></Confirm>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import Icon from '../../../icon/icon.vue';
|
||||
import DateTable from '../../base/date-table.vue';
|
||||
import YearTable from '../../base/year-table.vue';
|
||||
import MonthTable from '../../base/month-table.vue';
|
||||
import TimePicker from '../Time/time.vue';
|
||||
import Confirm from '../../base/confirm.vue';
|
||||
import datePanelLabel from './date-panel-label.vue';
|
||||
|
||||
import Mixin from '../panel-mixin';
|
||||
import DateMixin from './date-panel-mixin';
|
||||
import Locale from '../../../../mixins/locale';
|
||||
|
||||
import { siblingMonth, formatDateLabels } from '../../util';
|
||||
|
||||
const prefixCls = 'ivu-picker-panel';
|
||||
const datePrefixCls = 'ivu-date-picker';
|
||||
|
||||
export default {
|
||||
name: 'DatePickerPanel',
|
||||
mixins: [ Mixin, Locale, DateMixin ],
|
||||
components: { Icon, DateTable, YearTable, MonthTable, TimePicker, Confirm, datePanelLabel },
|
||||
props: {
|
||||
// in the mixin
|
||||
},
|
||||
data () {
|
||||
const dates = this.value.slice().sort();
|
||||
return {
|
||||
prefixCls: prefixCls,
|
||||
datePrefixCls: datePrefixCls,
|
||||
currentView: this.selectionMode || 'date',
|
||||
dates: dates,
|
||||
panelDate: dates[0] || new Date()
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
classes () {
|
||||
return [
|
||||
`${prefixCls}-body-wrapper`,
|
||||
{
|
||||
[`${prefixCls}-with-sidebar`]: this.shortcuts.length
|
||||
}
|
||||
];
|
||||
},
|
||||
pickerTable(){
|
||||
return this.currentView.match(/^time/) ? 'time-picker' : `${this.currentView}-table`;
|
||||
},
|
||||
datePanelLabel () {
|
||||
const locale = this.t('i.locale');
|
||||
const datePanelLabel = this.t('i.datepicker.datePanelLabel');
|
||||
const date = this.panelDate;
|
||||
const { labels, separator } = formatDateLabels(locale, datePanelLabel, date);
|
||||
|
||||
const handler = type => {
|
||||
return () => (this.currentView = type);
|
||||
};
|
||||
|
||||
return {
|
||||
separator: separator,
|
||||
labels: labels.map(obj => ((obj.handler = handler(obj.type)), obj))
|
||||
};
|
||||
},
|
||||
timeDisabled(){
|
||||
return !this.dates[0];
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
value (newVal) {
|
||||
this.dates = newVal;
|
||||
},
|
||||
selectionMode(){
|
||||
this.currentView = this.selectionMode;
|
||||
},
|
||||
currentView (val) {
|
||||
this.$emit('on-selection-mode-change', val);
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
changeYear(dir){
|
||||
this.panelDate = siblingMonth(this.panelDate, dir * 12);
|
||||
},
|
||||
changeMonth(dir){
|
||||
this.panelDate = siblingMonth(this.panelDate, dir);
|
||||
},
|
||||
handlePick (value) {
|
||||
const {selectionMode} = this;
|
||||
if (selectionMode === 'year') value = new Date(value, 0, 1);
|
||||
else if (selectionMode === 'month') value = new Date(this.panelDate.getFullYear(), value, 1);
|
||||
else value = new Date(value);
|
||||
|
||||
this.$emit('on-pick', value);
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
Loading…
Add table
Add a link
Reference in a new issue