drip-public/iview
6
1
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Merge pull request #2861 from SergioCrisostomo/datepicker-revisited

Browse source 
Datepicker refactor
This commit is contained in:
Aresn 2018-02-09 09:58:13 +08:00 • committed by GitHub
commit 827323fb0a
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
27 changed files with 1586 additions and 1822 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

197
examples/routers/date.vue
View file

@ -1,43 +1,45 @@
<!--<template>--> <!--
<!--<div>--> <template>
<!--{{ value1 }}--> <div>
<!--<Date-picker v-model="value1" type="datetimerange" placeholder="选择日期" style="width: 200px" @on-change="hc"></Date-picker>--> {{ value1 }}
<!--<Button @click="setDate">set date</Button>--> <Date-picker v-model="value1" type="datetimerange" placeholder="选择日期" style="width: 200px" @on-change="hc"></Date-picker>
<!--<Button @click="getDate">get date</Button>--> <Button @click="setDate">set date</Button>
<!--&lt;!&ndash;<Date-picker v-model="value2" type="daterange" placeholder="选择日期" style="width: 200px"></Date-picker>&ndash;&gt;--> <Button @click="getDate">get date</Button>
<!--&lt;!&ndash;<Date-picker transfer type="datetimerange" placeholder="选择日期" style="width: 200px" @on-change="changeDate"></Date-picker>&ndash;&gt;--> &lt;!&ndash;<Date-picker v-model="value2" type="daterange" placeholder="选择日期" style="width: 200px"></Date-picker>&ndash;&gt;
<!--</div>--> &lt;!&ndash;<Date-picker transfer type="datetimerange" placeholder="选择日期" style="width: 200px" @on-change="changeDate"></Date-picker>&ndash;&gt;
<!--</template>--> </div>
<!--<script>--> </template>
<!--export default {--> <script>
<!--data () {--> export default {
<!--return {--> data () {
<!--value1: ['2014-10-10 10:00:01', '2017-10-10 10:00:00'],--> return {
<!--value2: []--> value1: ['2014-10-10 10:00:01', '2017-10-10 10:00:00'],
<!--}--> value2: []
<!--},--> }
<!--methods: {--> },
<!--changeDate(date){--> methods: {
<!--console.log(date);--> changeDate(date){
<!--},--> console.log(date);
<!--setDate () {--> },
<!--this.value1 = ['2016-10-10', '2017-10-10'];--> setDate () {
<!--},--> this.value1 = ['2016-10-10', '2017-10-10'];
<!--getDate () {--> },
<!--const date = new Date(this.value1);--> getDate () {
<!--console.log(date.getMonth()+1)--> const date = new Date(this.value1);
<!--},--> console.log(date.getMonth()+1)
<!--hc (d) {--> },
<!--console.log(d);--> hc (d) {
<!--}--> console.log(d);
<!--}--> }
<!--}--> }
<!--</script>--> }
<!--<style>--> </script>
<!--body{--> <style>
<!--width: 100%;--> body{
<!--}--> width: 100%;
<!--</style>--> }
</style>
-->
<!--<template>--> <!--<template>-->
@ -148,22 +150,58 @@
<!--</script>--> <!--</script>-->
<!--<template>--> <template>
<!--<div>--> <div>
<!--<Date-picker type="datetime" placeholder="选择日期和时间" style="width: 200px"></Date-picker>--> <div style="width: 50%; float: left;">
<!--<br>--> <Date-picker type="date" placeholder="选择日期和时间" style="width: 200px"></Date-picker> | Single date, no date
<!--<Date-picker type="datetime" format="yyyy-MM-dd HH:mm" placeholder="选择日期和时间（不含秒）" style="width: 200px"></Date-picker>--> <br>
<!--<br>--> <Date-picker type="datetime" placeholder="选择日期和时间" style="width: 200px"></Date-picker> | Single datetime, no date
<!--<Date-picker type="datetimerange" placeholder="选择日期和时间" style="width: 300px"></Date-picker>--> <br>
<!--<br>--> <Date-picker type="datetime" v-model="dateString" placeholder="选择日期和时间" style="width: 200px"></Date-picker> | Single datetime, string date
<!--<Date-picker type="datetimerange" format="yyyy-MM-dd HH:mm" placeholder="选择日期和时间（不含秒）" style="width: 300px"></Date-picker>--> <br>
<!--</div>--> <Date-picker type="datetime" v-model="singleDate" placeholder="选择日期和时间" style="width: 200px"></Date-picker> | Single datetime, date object
<!--</template>--> <br>
<!--<script>--> <Date-picker type="datetime" format="yyyy-MM-dd HH:mm" placeholder="选择日期和时间（不含秒）" style="width: 200px"></Date-picker> | Single datetime, format yyyy-MM-dd HH:mm
<!--export default {--> <br>
<Date-picker type="date" multiple style="width: 200px"></Date-picker> | Single date, multiple
<br>
<Date-picker type="date" multiple style="width: 200px" show-week-numbers></Date-picker> | Single date, multiple, show week numbers
<br>
<Date-picker type="date" format="yyyy-MM-dd HH:mm" placeholder="选择日期和时间（不含秒）" style="width: 200px"></Date-picker> | Single date, format MM-dd HH:mm
<br>
<Date-picker type="datetime" :start-date="minDate" v-model="singleDate" placeholder="选择日期和时间" style="width: 200px"></Date-picker> | Single datetime, date object, start date
<br>
<!--}--> </div>
<!--</script>--> <div style="width: 50%; float: right;">
<Date-picker type="datetimerange" :value="dateRange" placeholder="选择日期和时间" style="width: 300px"></Date-picker> | DateTimeRange, date objects
<br>
<Date-picker type="daterange" placeholder="选择日期和时间" style="width: 300px"></Date-picker> | Range, no dates
<br>
<Date-picker type="daterange" split-panels placeholder="选择日期和时间" style="width: 300px"></Date-picker> | Range, no dates, split panels
<br>
<Date-picker type="datetimerange" format="yyyy-MM-dd HH:mm" placeholder="选择日期和时间（不含秒）" style="width: 300px"></Date-picker> | DateTimeRange, format yyyy-MM-dd HH:mm
</div>
<div style="width: 50%; float: right;">
<TimePicker type="timerange" placeholder="Select time" style="width: 168px"></TimePicker>
</div>
</div>
</template>
<script>
export default {
data(){
const now = new Date().getTime();
const oneMonth = 2592e6;
return {
dateString: '2018-01-03 20:52:59',
singleDate: new Date(1978, 4, 10),
dateRange: [new Date(2010, 4, 1), new Date()],
minDate: new Date(2010, 4, 1),
maxDate: new Date(now + oneMonth)
}
}
}
</script>
<!--<template>--> <!--<template>-->
@ -189,33 +227,22 @@
<template> <!--<template>-->
<div> <!--<div>-->
<DatePicker v-model="value" @on-change="handleChange" type="datetimerange" placeholder="Select date" style="width: 400px"></DatePicker> <!--<DatePicker v-model="value" @on-change="handleChange" type="daterange" placeholder="Select date" style="width: 200px"></DatePicker>-->
<DatePicker v-model="value2" type="datetime" @on-change="handleChange" style="width: 200px"></DatePicker> <!--</div>-->
<TimePicker type="time" placeholder="Select time" style="width: 168px"></TimePicker> <!--</template>-->
{{ value }} <!--<script>-->
<br> <!--export default {-->
{{ value2 }} <!--data () {-->
<br><br> <!--return {-->
<DatePicker type="year" v-model="value3" placeholder="Select year" style="width: 200px"></DatePicker> <!--value: []-->
<DatePicker type="month" v-model="value4" placeholder="Select month" style="width: 200px"></DatePicker> <!--}-->
</div> <!--},-->
</template> <!--methods: {-->
<script> <!--handleChange (v) {-->
export default { <!--console.log(v);-->
data () { <!--}-->
return { <!--}-->
value: ['2018-03-05 10:00:00', '2018-05-15 10:01:00'], <!--}-->
value2: '2018-02-05 10:09:00', <!--</script>-->
value3: '1978',
value4: '1978-05'
}
},
methods: {
handleChange (v) {
console.log(v);
}
}
}
</script>

5
package-lock.json generated
View file

@ -7169,6 +7169,11 @@
"integrity": "sha1-8OgK4DmkvWVLXygfyT8EqRSn/M4=", "integrity": "sha1-8OgK4DmkvWVLXygfyT8EqRSn/M4=",
"dev": true "dev": true
}, },
"js-calendar": {
"version": "1.2.3",
"resolved": "https://registry.npmjs.org/js-calendar/-/js-calendar-1.2.3.tgz",
"integrity": "sha512-dAA1/Zbp4+c5E+ARCVTIuKepXsNLzSYfzvOimiYD4S5eeP9QuplSHLcdhfqFSwyM1o1u6ku6RRRCyaZ0YAjiBw=="
},
"js-tokens": { "js-tokens": {
"version": "3.0.2", "version": "3.0.2",
"resolved": "https://registry.npmjs.org/js-tokens/-/js-tokens-3.0.2.tgz", "resolved": "https://registry.npmjs.org/js-tokens/-/js-tokens-3.0.2.tgz",

1
package.json
View file

@ -43,6 +43,7 @@
"async-validator": "^1.8.2", "async-validator": "^1.8.2",
"deepmerge": "^1.5.2", "deepmerge": "^1.5.2",
"element-resize-detector": "^1.1.13", "element-resize-detector": "^1.1.13",
"js-calendar": "^1.2.3",
"lodash.throttle": "^4.1.1", "lodash.throttle": "^4.1.1",
"popper.js": "^0.6.4", "popper.js": "^0.6.4",
"tinycolor2": "^1.4.1" "tinycolor2": "^1.4.1"

246
src/components/date-picker/base/date-table.vue
View file

@ -1,92 +1,54 @@
<template> <template>
<div <div :class="classes">
:class="classes"
@mousemove="handleMouseMove">
<div :class="[prefixCls + '-header']"> <div :class="[prefixCls + '-header']">
<span v-for="day in headerDays" :key="day"> <span v-for="day in headerDays" :key="day">
{{day}} {{day}}
</span> </span>
</div> </div>
<span :class="getCellCls(cell)" v-for="(cell, index) in readCells"><em :index="index" @click="handleClick(cell)">{{ cell.text }}</em></span> <span
:class="getCellCls(cell)"
v-for="(cell, i) in readCells"
:key="String(cell.date) + i"
@click="handleClick(cell)"
@mouseenter="handleMouseMove(cell)"
>
<em>{{ cell.desc }}</em>
</span>
</div> </div>
</template> </template>
<script> <script>
import { getFirstDayOfMonth, getDayCountOfMonth } from '../util'; import { clearHours, isInRange } from '../util';
import { deepCopy } from '../../../utils/assist';
import Locale from '../../../mixins/locale'; import Locale from '../../../mixins/locale';
import jsCalendar from 'js-calendar';
const prefixCls = 'ivu-date-picker-cells'; import mixin from './mixin';
import prefixCls from './prefixCls';
const clearHours = function (time) {
const cloneDate = new Date(time);
cloneDate.setHours(0, 0, 0, 0);
return cloneDate.getTime();
};
export default { export default {
mixins: [ Locale ], mixins: [ Locale, mixin ],
props: { props: {
date: {}, /* more props in mixin */
year: {}, showWeekNumbers: {
month: {}, type: Boolean,
selectionMode: { default: false
default: 'day'
}, },
disabledDate: {},
minDate: {},
maxDate: {},
rangeState: {
default () {
return {
endDate: null,
selecting: false
};
}
},
value: ''
}, },
data () { data () {
const weekStartDay = Number(this.t('i.datepicker.weekStartDay'));
return { return {
prefixCls: prefixCls, prefixCls: prefixCls,
readCells: [] calendar: new jsCalendar.Generator({onlyDays: !this.showWeekNumbers, weekStart: weekStartDay})
}; };
}, },
watch: {
'rangeState.endDate' (newVal) {
this.markRange(newVal);
},
minDate(newVal, oldVal) {
if (newVal && !oldVal) {
this.rangeState.selecting = true;
this.markRange(newVal);
} else if (!newVal) {
this.rangeState.selecting = false;
this.markRange(newVal);
} else {
this.markRange();
}
},
maxDate(newVal, oldVal) {
if (newVal && !oldVal) {
this.rangeState.selecting = false;
this.markRange(newVal);
// this.$emit('on-pick', {
// minDate: this.minDate,
// maxDate: this.maxDate
// });
}
},
cells: {
handler (cells) {
this.readCells = cells;
},
immediate: true
}
},
computed: { computed: {
classes () { classes () {
return [ return [
`${prefixCls}` `${prefixCls}`,
{
[`${prefixCls}-show-week-numbers`]: this.showWeekNumbers
}
]; ];
}, },
headerDays () { headerDays () {
@ -95,143 +57,36 @@
return this.t('i.datepicker.weeks.' + item); return this.t('i.datepicker.weeks.' + item);
}); });
const weekDays = translatedDays.splice(weekStartDay, 7 - weekStartDay).concat(translatedDays.splice(0, weekStartDay)); const weekDays = translatedDays.splice(weekStartDay, 7 - weekStartDay).concat(translatedDays.splice(0, weekStartDay));
return weekDays; return this.showWeekNumbers ? [''].concat(weekDays) : weekDays;
}, },
cells () { readCells () {
const date = new Date(this.year, this.month, 1); const tableYear = this.tableDate.getFullYear();
const weekStartDay = Number(this.t('i.datepicker.weekStartDay')); const tableMonth = this.tableDate.getMonth();
const day = (getFirstDayOfMonth(date) || 7) - weekStartDay; // day of first day
const today = clearHours(new Date()); // timestamp of today const today = clearHours(new Date()); // timestamp of today
const selectDay = clearHours(new Date(this.value)); // timestamp of selected day const selectedDays = this.dates.filter(Boolean).map(clearHours); // timestamp of selected days
const minDay = clearHours(new Date(this.minDate)); const [minDay, maxDay] = this.dates.map(clearHours);
const maxDay = clearHours(new Date(this.maxDate)); const rangeStart = this.rangeState.from && clearHours(this.rangeState.from);
const rangeEnd = this.rangeState.to && clearHours(this.rangeState.to);
const dateCountOfMonth = getDayCountOfMonth(date.getFullYear(), date.getMonth()); const isRange = this.selectionMode === 'range';
const dateCountOfLastMonth = getDayCountOfMonth(date.getFullYear(), (date.getMonth() === 0 ? 11 : date.getMonth() - 1)); const disabledTestFn = typeof this.disabledDate === 'function' && this.disabledDate;
const disabledDate = this.disabledDate; return this.calendar(tableYear, tableMonth, (cell) => {
const time = cell.date && clearHours(cell.date);
let cells = []; const dateIsInCurrentMonth = cell.date && tableMonth === cell.date.getMonth();
const cell_tmpl = { return {
text: '', ...cell,
type: '', type: time === today ? 'today' : cell.type,
date: null, selected: dateIsInCurrentMonth && selectedDays.includes(time),
selected: false, disabled: (cell.date && disabledTestFn) && disabledTestFn(new Date(time)),
disabled: false, range: dateIsInCurrentMonth && isRange && isInRange(time, rangeStart, rangeEnd),
range: false, start: dateIsInCurrentMonth && isRange && time === minDay,
start: false, end: dateIsInCurrentMonth && isRange && time === maxDay
end: false
}; };
if (day !== 7) { }).cells.slice(this.showWeekNumbers ? 8 : 0);
for (let i = 0; i < day; i++) {
const cell = deepCopy(cell_tmpl);
cell.type = 'prev-month';
cell.text = dateCountOfLastMonth - (day - 1) + i;
cell.date = new Date(this.year, this.month - 1, cell.text);
const time = clearHours(cell.date);
cell.disabled = typeof disabledDate === 'function' && disabledDate(new Date(time));
cells.push(cell);
}
}
for (let i = 1; i <= dateCountOfMonth; i++) {
const cell = deepCopy(cell_tmpl);
cell.text = i;
cell.date = new Date(this.year, this.month, cell.text);
const time = clearHours(cell.date);
cell.type = time === today ? 'today' : 'normal';
cell.selected = time === selectDay;
cell.disabled = typeof disabledDate === 'function' && disabledDate(new Date(time));
cell.range = time >= minDay && time <= maxDay;
cell.start = this.minDate && time === minDay;
cell.end = this.maxDate && time === maxDay;
cells.push(cell);
}
const nextMonthCount = 42 - cells.length;
for (let i = 1; i <= nextMonthCount; i++) {
const cell = deepCopy(cell_tmpl);
cell.type = 'next-month';
cell.text = i;
cell.date = new Date(this.year, this.month + 1, cell.text);
const time = clearHours(cell.date);
cell.disabled = typeof disabledDate === 'function' && disabledDate(new Date(time));
cells.push(cell);
}
return cells;
} }
}, },
methods: { methods: {
handleClick (cell) {
if (cell.disabled) return;
const newDate = cell.date;
if (this.selectionMode === 'range') {
if (this.minDate && this.maxDate) {
const minDate = new Date(newDate.getTime());
const maxDate = null;
this.rangeState.selecting = true;
this.markRange(this.minDate);
this.$emit('on-pick', {minDate, maxDate}, false);
} else if (this.minDate && !this.maxDate) {
if (newDate >= this.minDate) {
const maxDate = new Date(newDate.getTime());
this.rangeState.selecting = false;
this.$emit('on-pick', {minDate: this.minDate, maxDate});
} else {
const minDate = new Date(newDate.getTime());
this.$emit('on-pick', {minDate, maxDate: this.maxDate}, false);
}
} else if (!this.minDate) {
const minDate = new Date(newDate.getTime());
this.rangeState.selecting = true;
this.markRange(this.minDate);
this.$emit('on-pick', {minDate, maxDate: this.maxDate}, false);
}
} else {
this.$emit('on-pick', newDate);
}
this.$emit('on-pick-click');
},
handleMouseMove (event) {
if (!this.rangeState.selecting) return;
this.$emit('on-changerange', {
minDate: this.minDate,
maxDate: this.maxDate,
rangeState: this.rangeState
});
const target = event.target;
if (target.tagName === 'EM') {
const cell = this.cells[parseInt(event.target.getAttribute('index'))];
// if (cell.disabled) return; // todo 待确定
this.rangeState.endDate = cell.date;
}
},
markRange (maxDate) {
const minDate = this.minDate;
if (!maxDate) maxDate = this.maxDate;
const minDay = clearHours(new Date(minDate));
const maxDay = clearHours(new Date(maxDate));
this.cells.forEach(cell => {
if (cell.type === 'today' || cell.type === 'normal') {
const time = clearHours(new Date(this.year, this.month, cell.text));
cell.range = time >= minDay && time <= maxDay;
cell.start = minDate && time === minDay;
cell.end = maxDate && time === maxDay;
}
});
},
getCellCls (cell) { getCellCls (cell) {
return [ return [
`${prefixCls}-cell`, `${prefixCls}-cell`,
@ -239,8 +94,9 @@
[`${prefixCls}-cell-selected`]: cell.selected || cell.start || cell.end, [`${prefixCls}-cell-selected`]: cell.selected || cell.start || cell.end,
[`${prefixCls}-cell-disabled`]: cell.disabled, [`${prefixCls}-cell-disabled`]: cell.disabled,
[`${prefixCls}-cell-today`]: cell.type === 'today', [`${prefixCls}-cell-today`]: cell.type === 'today',
[`${prefixCls}-cell-prev-month`]: cell.type === 'prev-month', [`${prefixCls}-cell-prev-month`]: cell.type === 'prevMonth',
[`${prefixCls}-cell-next-month`]: cell.type === 'next-month', [`${prefixCls}-cell-next-month`]: cell.type === 'nextMonth',
[`${prefixCls}-cell-week-label`]: cell.type === 'weekLabel',
[`${prefixCls}-cell-range`]: cell.range && !cell.start && !cell.end [`${prefixCls}-cell-range`]: cell.range && !cell.start && !cell.end
} }
]; ];

53
src/components/date-picker/base/mixin.js Normal file
View file

@ -0,0 +1,53 @@
import {clearHours} from '../util';
export default {
props: {
tableDate: {
type: Date,
required: true
},
disabledDate: {
type: Function
},
selectionMode: {
type: String,
required: true
},
value: {
type: Array,
required: true
},
rangeState: {
type: Object,
default: () => ({
from: null,
to: null,
selecting: false
})
},
},
computed: {
dates(){
const {selectionMode, value, rangeState} = this;
const rangeSelecting = selectionMode === 'range' && rangeState.selecting;
return rangeSelecting ? [rangeState.from] : value;
},
},
methods: {
handleClick (cell) {
if (cell.disabled) return;
const newDate = new Date(clearHours(cell.date));
this.$emit('on-pick', newDate);
this.$emit('on-pick-click');
},
handleMouseMove (cell) {
if (!this.rangeState.selecting) return;
if (cell.disabled) return;
const newDate = cell.date;
this.$emit('on-change-range', newDate);
},
}
};

62
src/components/date-picker/base/month-table.vue
View file

@ -1,25 +1,26 @@
<template> <template>
<div :class="classes" @click="handleClick"> <div :class="classes">
<span :class="getCellCls(cell)" v-for="(cell, index) in cells"><em :index="index">{{ tCell(cell.text) }}</em></span> <span
:class="getCellCls(cell)"
v-for="cell in cells"
@click="handleClick(cell)"
@mouseenter="handleMouseMove(cell)"
>
<em>{{ cell.text }}</em>
</span>
</div> </div>
</template> </template>
<script> <script>
import { clearHours } from '../util';
import { deepCopy } from '../../../utils/assist'; import { deepCopy } from '../../../utils/assist';
import Locale from '../../../mixins/locale'; import Locale from '../../../mixins/locale';
const prefixCls = 'ivu-date-picker-cells'; import mixin from './mixin';
import prefixCls from './prefixCls';
export default { export default {
mixins: [ Locale ], mixins: [ Locale, mixin ],
props: { props: {/* in mixin */},
date: {},
month: {
type: Number
},
disabledDate: {},
selectionMode: {
default: 'month'
}
},
computed: { computed: {
classes() { classes() {
return [ return [
@ -35,15 +36,16 @@
disabled: false disabled: false
}; };
const tableYear = this.tableDate.getFullYear();
const selectedDays = this.dates.filter(Boolean).map(date => clearHours(new Date(date.getFullYear(), date.getMonth(), 1)));
for (let i = 0; i < 12; i++) { for (let i = 0; i < 12; i++) {
const cell = deepCopy(cell_tmpl); const cell = deepCopy(cell_tmpl);
cell.text = i + 1; cell.date = new Date(tableYear, i, 1);
cell.text = this.tCell(i + 1);
const date = new Date(this.date); const time = clearHours(cell.date);
date.setMonth(i); cell.disabled = typeof this.disabledDate === 'function' && this.disabledDate(cell.date) && this.selectionMode === 'month';
cell.disabled = typeof this.disabledDate === 'function' && this.disabledDate(date) && this.selectionMode === 'month'; cell.selected = selectedDays.includes(time);
cell.selected = Number(this.month) === i;
cells.push(cell); cells.push(cell);
} }
@ -56,23 +58,13 @@
`${prefixCls}-cell`, `${prefixCls}-cell`,
{ {
[`${prefixCls}-cell-selected`]: cell.selected, [`${prefixCls}-cell-selected`]: cell.selected,
[`${prefixCls}-cell-disabled`]: cell.disabled [`${prefixCls}-cell-disabled`]: cell.disabled,
[`${prefixCls}-cell-range`]: cell.range && !cell.start && !cell.end
} }
]; ];
}, },
handleClick (event) { tCell (nr) {
const target = event.target; return this.t(`i.datepicker.months.m${nr}`);
if (target.tagName === 'EM') {
const index = parseInt(event.target.getAttribute('index'));
const cell = this.cells[index];
if (cell.disabled) return;
this.$emit('on-pick', index);
}
this.$emit('on-pick-click');
},
tCell (cell) {
return this.t(`i.datepicker.months.m${cell}`);
} }
} }
}; };

2
src/components/date-picker/base/prefixCls.js Normal file
View file

@ -0,0 +1,2 @@
export default 'ivu-date-picker-cells';

7
src/components/date-picker/base/time-spinner.vue
View file

@ -28,15 +28,15 @@
props: { props: {
hours: { hours: {
type: [Number, String], type: [Number, String],
default: 0 default: NaN
}, },
minutes: { minutes: {
type: [Number, String], type: [Number, String],
default: 0 default: NaN
}, },
seconds: { seconds: {
type: [Number, String], type: [Number, String],
default: 0 default: NaN
}, },
showSeconds: { showSeconds: {
type: Boolean, type: Boolean,
@ -194,7 +194,6 @@
} }
}, },
mounted () { mounted () {
this.updateScroll();
this.$nextTick(() => this.compiled = true); this.$nextTick(() => this.compiled = true);
} }
}; };

60
src/components/date-picker/base/year-table.vue
View file

@ -1,21 +1,25 @@
<template> <template>
<div :class="classes" @click="handleClick"> <div :class="classes">
<span :class="getCellCls(cell)" v-for="(cell, index) in cells"><em :index="index">{{ cell.text }}</em></span> <span
:class="getCellCls(cell)"
v-for="cell in cells"
@click="handleClick(cell)"
@mouseenter="handleMouseMove(cell)"
>
<em>{{ cell.date.getFullYear() }}</em>
</span>
</div> </div>
</template> </template>
<script> <script>
import { clearHours } from '../util';
import { deepCopy } from '../../../utils/assist'; import { deepCopy } from '../../../utils/assist';
const prefixCls = 'ivu-date-picker-cells'; import mixin from './mixin';
import prefixCls from './prefixCls';
export default { export default {
props: { mixins: [ mixin ],
date: {},
year: {}, props: {/* in mixin */},
disabledDate: {},
selectionMode: {
default: 'year'
}
},
computed: { computed: {
classes() { classes() {
return [ return [
@ -24,7 +28,7 @@
]; ];
}, },
startYear() { startYear() {
return Math.floor(this.year / 10) * 10; return Math.floor(this.tableDate.getFullYear() / 10) * 10;
}, },
cells () { cells () {
let cells = []; let cells = [];
@ -34,15 +38,14 @@
disabled: false disabled: false
}; };
const selectedDays = this.dates.filter(Boolean).map(date => clearHours(new Date(date.getFullYear(), 0, 1)));
for (let i = 0; i < 10; i++) { for (let i = 0; i < 10; i++) {
const cell = deepCopy(cell_tmpl); const cell = deepCopy(cell_tmpl);
cell.text = this.startYear + i; cell.date = new Date(this.startYear + i, 0, 1);
cell.disabled = typeof this.disabledDate === 'function' && this.disabledDate(cell.date) && this.selectionMode === 'year';
const date = new Date(this.date); const time = clearHours(cell.date);
date.setFullYear(cell.text); cell.selected = selectedDays.includes(time);
cell.disabled = typeof this.disabledDate === 'function' && this.disabledDate(date) && this.selectionMode === 'year';
cell.selected = Number(this.year) === cell.text;
cells.push(cell); cells.push(cell);
} }
@ -55,26 +58,11 @@
`${prefixCls}-cell`, `${prefixCls}-cell`,
{ {
[`${prefixCls}-cell-selected`]: cell.selected, [`${prefixCls}-cell-selected`]: cell.selected,
[`${prefixCls}-cell-disabled`]: cell.disabled [`${prefixCls}-cell-disabled`]: cell.disabled,
[`${prefixCls}-cell-range`]: cell.range && !cell.start && !cell.end
} }
]; ];
}, },
nextTenYear() {
this.$emit('on-pick', Number(this.year) + 10, false);
},
prevTenYear() {
this.$emit('on-pick', Number(this.year) - 10, false);
},
handleClick (event) {
const target = event.target;
if (target.tagName === 'EM') {
const cell = this.cells[parseInt(event.target.getAttribute('index'))];
if (cell.disabled) return;
this.$emit('on-pick', cell.text);
}
this.$emit('on-pick-click');
}
} }
}; };
</script> </script>

0
src/components/date-picker/panel/date-panel-label.vue → src/components/date-picker/panel/Date/date-panel-label.vue
View file

57
src/components/date-picker/panel/Date/date-panel-mixin.js Normal file
View file

@ -0,0 +1,57 @@
import { oneOf } from '../../../../utils/assist';
import {initTimeDate } from '../../util';
export default {
props: {
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()]
},
showWeekNumbers: {
type: Boolean,
default: false
},
startDate: {
type: Date
},
pickerType: {
type: String,
require: true
}
},
computed: {
isTime(){
return this.currentView === 'time';
}
},
methods: {
handleToggleTime(){
this.currentView = this.currentView === 'time' ? 'date' : 'time';
},
}
};

347
src/components/date-picker/panel/Date/date-range.vue Normal file
View file

@ -0,0 +1,347 @@
<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="[prefixCls + '-content', prefixCls + '-content-left']" v-show="!isTime">
<div :class="[datePrefixCls + '-header']" v-show="currentView !== 'time'">
<span
:class="iconBtnCls('prev', '-double')"
@click="prevYear('left')"><Icon type="ios-arrow-left"></Icon></span>
<span
v-if="leftPickerTable === 'date-table'"
:class="iconBtnCls('prev')"
@click="prevMonth('left')"
v-show="currentView === 'date'"><Icon type="ios-arrow-left"></Icon></span>
<date-panel-label
:date-panel-label="leftDatePanelLabel"
:current-view="leftDatePanelView"
:date-prefix-cls="datePrefixCls"></date-panel-label>
<span
v-if="splitPanels || leftPickerTable !== 'date-table'"
:class="iconBtnCls('next', '-double')"
@click="nextYear('left')"><Icon type="ios-arrow-right"></Icon></span>
<span
v-if="splitPanels && leftPickerTable === 'date-table'"
:class="iconBtnCls('next')"
@click="nextMonth('left')"
v-show="currentView === 'date'"><Icon type="ios-arrow-right"></Icon></span>
</div>
<component
:is="leftPickerTable"
ref="leftYearTable"
v-if="currentView !== 'time'"
:table-date="leftPanelDate"
selection-mode="range"
:disabled-date="disabledDate"
:range-state="rangeState"
:show-week-numbers="showWeekNumbers"
:value="preSelecting.left ? [dates[0]] : dates"
@on-change-range="handleChangeRange"
@on-pick="panelPickerHandlers.left"
@on-pick-click="handlePickClick"
></component>
</div>
<div :class="[prefixCls + '-content', prefixCls + '-content-right']" v-show="!isTime">
<div :class="[datePrefixCls + '-header']" v-show="currentView !== 'time'">
<span
v-if="splitPanels || rightPickerTable !== 'date-table'"
:class="iconBtnCls('prev', '-double')"
@click="prevYear('right')"><Icon type="ios-arrow-left"></Icon></span>
<span
v-if="splitPanels && rightPickerTable === 'date-table'"
:class="iconBtnCls('prev')"
@click="prevMonth('right')"
v-show="currentView === 'date'"><Icon type="ios-arrow-left"></Icon></span>
<date-panel-label
:date-panel-label="rightDatePanelLabel"
:current-view="rightDatePanelView"
:date-prefix-cls="datePrefixCls"></date-panel-label>
<span
:class="iconBtnCls('next', '-double')"
@click="nextYear('right')"><Icon type="ios-arrow-right"></Icon></span>
<span
v-if="rightPickerTable === 'date-table'"
:class="iconBtnCls('next')"
@click="nextMonth('right')"
v-show="currentView === 'date'"><Icon type="ios-arrow-right"></Icon></span>
</div>
<component
:is="rightPickerTable"
ref="rightYearTable"
v-if="currentView !== 'time'"
:table-date="rightPanelDate"
selection-mode="range"
:range-state="rangeState"
:disabled-date="disabledDate"
:show-week-numbers="showWeekNumbers"
:value="preSelecting.right ? [dates[dates.length - 1]] : dates"
@on-change-range="handleChangeRange"
@on-pick="panelPickerHandlers.right"
@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="handleRangePick"
@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"
:time-disabled="timeDisabled"
@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-range.vue';
import Confirm from '../../base/confirm.vue';
import { toDate, initTimeDate, formatDateLabels } from '../../util';
import datePanelLabel from './date-panel-label.vue';
import Mixin from '../panel-mixin';
import DateMixin from './date-panel-mixin';
import Locale from '../../../../mixins/locale';
const prefixCls = 'ivu-picker-panel';
const datePrefixCls = 'ivu-date-picker';
const dateSorter = (a, b) => {
if (!a || !b) return 0;
return a.getTime() - b.getTime();
};
export default {
name: 'RangeDatePickerPanel',
mixins: [ Mixin, Locale, DateMixin ],
components: { Icon, DateTable, YearTable, MonthTable, TimePicker, Confirm, datePanelLabel },
props: {
// more props in the mixin
splitPanels: {
type: Boolean,
default: false
},
},
data(){
const [minDate, maxDate] = this.value.map(date => date || initTimeDate());
const leftPanelDate = this.startDate ? this.startDate : minDate;
return {
prefixCls: prefixCls,
datePrefixCls: datePrefixCls,
dates: this.value,
rangeState: {from: this.value[0], to: this.value[1], selecting: minDate && !maxDate},
currentView: this.selectionMode || 'range',
leftPickerTable: `${this.selectionMode}-table`,
rightPickerTable: `${this.selectionMode}-table`,
leftPanelDate: leftPanelDate,
rightPanelDate: new Date(leftPanelDate.getFullYear(), leftPanelDate.getMonth() + 1, leftPanelDate.getDate())
};
},
computed: {
classes(){
return [
`${prefixCls}-body-wrapper`,
`${datePrefixCls}-with-range`,
{
[`${prefixCls}-with-sidebar`]: this.shortcuts.length
}
];
},
leftDatePanelLabel(){
return this.panelLabelConfig('left');
},
rightDatePanelLabel(){
return this.panelLabelConfig('right');
},
leftDatePanelView(){
return this.leftPickerTable.split('-').shift();
},
rightDatePanelView(){
return this.rightPickerTable.split('-').shift();
},
timeDisabled(){
return !(this.dates[0] && this.dates[1]);
},
preSelecting(){
const tableType = `${this.currentView}-table`;
return {
left: this.leftPickerTable !== tableType,
right: this.rightPickerTable !== tableType,
};
},
panelPickerHandlers(){
return {
left: this.preSelecting.left ? this.handlePreSelection.bind(this, 'left') : this.handleRangePick,
right: this.preSelecting.right ? this.handlePreSelection.bind(this, 'right') : this.handleRangePick,
};
}
},
watch: {
value(newVal) {
const minDate = newVal[0] ? toDate(newVal[0]) : null;
const maxDate = newVal[1] ? toDate(newVal[1]) : null;
this.dates = [minDate, maxDate].sort(dateSorter);
this.rangeState = {
from: this.dates[0],
to: this.dates[1],
selecting: false
};
// set panels positioning
const leftPanelDate = this.startDate || this.dates[0] || new Date();
this.leftPanelDate = leftPanelDate;
const rightPanelDate = new Date(leftPanelDate.getFullYear(), leftPanelDate.getMonth() + 1, leftPanelDate.getDate());
this.rightPanelDate = this.splitPanels ? new Date(Math.max(this.dates[1], rightPanelDate)) : rightPanelDate;
},
currentView(currentView){
const leftMonth = this.leftPanelDate.getMonth();
const rightMonth = this.rightPanelDate.getMonth();
const isSameYear = this.leftPanelDate.getFullYear() === this.rightPanelDate.getFullYear();
if (currentView === 'date' && isSameYear && leftMonth === rightMonth){
this.changePanelDate('right', 'Month', 1);
}
if (currentView === 'month' && isSameYear){
this.changePanelDate('right', 'FullYear', 1);
}
if (currentView === 'year' && isSameYear){
this.changePanelDate('right', 'FullYear', 10);
}
},
selectionMode(type){
this.currentView = type || 'range';
}
},
methods: {
reset(){
this.currentView = this.selectionMode;
this.leftPickerTable = `${this.currentView}-table`;
this.rightPickerTable = `${this.currentView}-table`;
},
panelLabelConfig (direction) {
const locale = this.t('i.locale');
const datePanelLabel = this.t('i.datepicker.datePanelLabel');
const handler = type => {
const fn = type == 'month' ? this.showMonthPicker : this.showYearPicker;
return () => fn(direction);
};
const date = this[`${direction}PanelDate`];
const { labels, separator } = formatDateLabels(locale, datePanelLabel, date);
return {
separator: separator,
labels: labels.map(obj => ((obj.handler = handler(obj.type)), obj))
};
},
prevYear (panel) {
const increment = this.currentView === 'year' ? -10 : -1;
this.changePanelDate(panel, 'FullYear', increment);
},
nextYear (panel) {
const increment = this.currentView === 'year' ? 10 : 1;
this.changePanelDate(panel, 'FullYear', increment);
},
prevMonth(panel){
this.changePanelDate(panel, 'Month', -1);
},
nextMonth(panel){
this.changePanelDate(panel, 'Month', 1);
},
changePanelDate(panel, type, increment){
const current = new Date(this[`${panel}PanelDate`]);
current[`set${type}`](current[`get${type}`]() + increment);
this[`${panel}PanelDate`] = current;
if (this.splitPanels){
// change other panel if dates overlap
const otherPanel = panel === 'left' ? 'right' : 'left';
if (panel === 'left' && this.leftPanelDate >= this.rightPanelDate){
this.changePanelDate(otherPanel, type, 1);
}
if (panel === 'right' && this.rightPanelDate <= this.leftPanelDate){
this.changePanelDate(otherPanel, type, -1);
}
} else {
// keep the panels together
const otherPanel = panel === 'left' ? 'right' : 'left';
const otherCurrent = new Date(this[`${otherPanel}PanelDate`]);
otherCurrent[`set${type}`](otherCurrent[`get${type}`]() + increment);
if (current[`get${type}`]() !== otherCurrent[`get${type}`]()){
this[`${otherPanel}PanelDate`] = otherCurrent;
}
}
},
showYearPicker (panel) {
this[`${panel}PickerTable`] = 'year-table';
},
showMonthPicker (panel) {
this[`${panel}PickerTable`] = 'month-table';
},
handlePreSelection(panel, value){
this[`${panel}PanelDate`] = value;
const currentViewType = this[`${panel}PickerTable`];
if (currentViewType === 'year-table') this[`${panel}PickerTable`] = 'month-table';
else this[`${panel}PickerTable`] = `${this.currentView}-table`;
if (!this.splitPanels){
const otherPanel = panel === 'left' ? 'right' : 'left';
const type = currentViewType === 'year-table' ? 'FullYear' : 'Month';
this[`${otherPanel}PanelDate`] = value;
this.changePanelDate(otherPanel, type, 1);
}
},
handleRangePick (val) {
if (this.rangeState.selecting || this.currentView === 'time'){
if (this.currentView === 'time'){
this.dates = val;
} else {
const [minDate, maxDate] = [this.rangeState.from, val].sort(dateSorter);
this.dates = [minDate, maxDate];
this.rangeState = {
from: minDate,
to: maxDate,
selecting: false
};
}
this.handleConfirm(false);
} else {
this.rangeState = {
from: val,
to: null,
selecting: true
};
}
},
handleChangeRange (val) {
this.rangeState.to = val;
},
},
};
</script>

188
src/components/date-picker/panel/Date/date.vue Normal file
View file

@ -0,0 +1,188 @@
<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
v-if="pickerTable === 'date-table'"
: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="pickerTable.split('-').shift()"
:date-prefix-cls="datePrefixCls"></date-panel-label>
<span
:class="iconBtnCls('next', '-double')"
@click="changeYear(+1)"><Icon type="ios-arrow-right"></Icon></span>
<span
v-if="pickerTable === 'date-table'"
: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"
:show-week-numbers="showWeekNumbers"
:value="dates"
:selection-mode="selectionMode"
:disabled-date="disabledDate"
@on-pick="panelPickerHandlers"
@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 {selectionMode, value} = this;
const dates = value.slice().sort();
return {
prefixCls: prefixCls,
datePrefixCls: datePrefixCls,
currentView: selectionMode || 'date',
pickerTable: this.getTableType(selectionMode),
dates: dates,
panelDate: this.startDate || dates[0] || new Date()
};
},
computed: {
classes () {
return [
`${prefixCls}-body-wrapper`,
{
[`${prefixCls}-with-sidebar`]: this.shortcuts.length
}
];
},
panelPickerHandlers(){
return this.pickerTable === `${this.currentView}-table` ? this.handlePick : this.handlePreSelection;
},
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.pickerTable = this.getTableType(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;
this.panelDate = this.startDate || this.dates[0] || new Date();
},
currentView (currentView) {
this.$emit('on-selection-mode-change', currentView);
this.pickertable = this.getTableType(currentView);
},
selectionMode(type){
this.currentView = type;
this.pickerTable = this.getTableType(type);
}
},
methods: {
reset(){
this.currentView = this.selectionMode;
this.pickerTable = this.getTableType(this.currentView);
},
changeYear(dir){
if (this.selectionMode === 'year' || this.pickerTable === 'year-table'){
this.panelDate = new Date(this.panelDate.getFullYear() + dir * 10, 0, 1);
} else {
this.panelDate = siblingMonth(this.panelDate, dir * 12);
}
},
getTableType(currentView){
return currentView.match(/^time/) ? 'time-picker' : `${currentView}-table`;
},
changeMonth(dir){
this.panelDate = siblingMonth(this.panelDate, dir);
},
handlePreSelection(value){
this.panelDate = value;
if (this.pickerTable === 'year-table') this.pickerTable = 'month-table';
else this.pickerTable = this.getTableType(this.currentView);
},
handlePick (value) {
const {selectionMode, panelDate} = this;
if (selectionMode === 'year') value = new Date(value.getFullYear(), 0, 1);
else if (selectionMode === 'month') value = new Date(panelDate.getFullYear(), value.getMonth(), 1);
else value = new Date(value);
this.$emit('on-pick', value);
},
},
};
</script>

162
src/components/date-picker/panel/Time/time-range.vue Normal file
View file

@ -0,0 +1,162 @@
<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="value[0] && dateStart.getHours()"
:minutes="value[0] && dateStart.getMinutes()"
:seconds="value[0] && 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="value[1] && dateEnd.getHours()"
:minutes="value[1] && dateEnd.getMinutes()"
:seconds="value[1] && 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()
};
},
computed: {
classes () {
return [
`${prefixCls}-body-wrapper`,
`${timePrefixCls}-with-range`,
{
[`${timePrefixCls}-with-seconds`]: this.showSeconds
}
];
},
showSeconds () {
return !(this.format || '').match(/mm$/);
},
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>

103
src/components/date-picker/panel/Time/time.vue Normal file
View file

@ -0,0 +1,103 @@
<template>
<div :class="[prefixCls + '-body-wrapper']" @mousedown.prevent>
<div :class="[prefixCls + '-body']">
<div :class="[timePrefixCls + '-header']" v-if="showDate">{{ visibleDate }}</div>
<div :class="[prefixCls + '-content']">
<time-spinner
ref="timeSpinner"
:show-seconds="showSeconds"
:steps="steps"
:hours="value[0] && date.getHours()"
:minutes="value[0] && date.getMinutes()"
:seconds="value[0] && date.getSeconds()"
:disabled-hours="disabledHours"
:disabled-minutes="disabledMinutes"
:disabled-seconds="disabledSeconds"
:hide-disabled-options="hideDisabledOptions"
@on-change="handleChange"
@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 } from '../../util';
const prefixCls = 'ivu-picker-panel';
const timePrefixCls = 'ivu-time-picker';
const capitalize = (str) => str[0].toUpperCase() + str.slice(1);
export default {
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: this.value[0] || initTimeDate(),
showDate: false
};
},
computed: {
showSeconds () {
return !(this.format || '').match(/mm$/);
},
visibleDate () { // TODO
const date = this.date;
const month = date.getMonth() + 1;
const tYear = this.t('i.datepicker.year');
const tMonth = this.t(`i.datepicker.month${month}`);
return `${date.getFullYear()}${tYear} ${tMonth}`;
}
},
watch: {
value (dates) {
let newVal = dates[0] || initTimeDate();
newVal = new Date(newVal);
this.date = newVal;
}
},
methods: {
handleChange (date, emit = 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);
},
},
mounted () {
if (this.$parent && this.$parent.$options.name === 'DatePicker') this.showDate = true;
}
};
</script>

414
src/components/date-picker/panel/date-range.vue
View file

@ -1,414 +0,0 @@
<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="[prefixCls + '-content', prefixCls + '-content-left']" v-show="!isTime">
<div :class="[datePrefixCls + '-header']" v-show="leftCurrentView !== 'time'">
<span
:class="iconBtnCls('prev', '-double')"
@click="prevYear('left')"><Icon type="ios-arrow-left"></Icon></span>
<span
:class="iconBtnCls('prev')"
@click="prevMonth"
v-show="leftCurrentView === 'date'"><Icon type="ios-arrow-left"></Icon></span>
<date-panel-label
:date-panel-label="leftDatePanelLabel"
:current-view="leftCurrentView"
:date-prefix-cls="datePrefixCls"/>
<span
:class="iconBtnCls('next', '-double')"
@click="nextYear('left')"
v-show="leftCurrentView === 'year' || leftCurrentView === 'month'"><Icon type="ios-arrow-right"></Icon></span>
</div>
<date-table
v-show="leftCurrentView === 'date'"
:year="leftYear"
:month="leftMonth"
:date="date"
:min-date="minDate"
:max-date="maxDate"
:range-state="rangeState"
selection-mode="range"
:disabled-date="disabledDate"
@on-changerange="handleChangeRange"
@on-pick="handleRangePick"
@on-pick-click="handlePickClick"></date-table>
<year-table
ref="leftYearTable"
v-show="leftCurrentView === 'year'"
:year="leftTableYear"
:date="leftTableDate"
selection-mode="range"
:disabled-date="disabledDate"
@on-pick="handleLeftYearPick"
@on-pick-click="handlePickClick"></year-table>
<month-table
ref="leftMonthTable"
v-show="leftCurrentView === 'month'"
:month="leftMonth"
:date="leftTableDate"
selection-mode="range"
:disabled-date="disabledDate"
@on-pick="handleLeftMonthPick"
@on-pick-click="handlePickClick"></month-table>
</div>
<div :class="[prefixCls + '-content', prefixCls + '-content-right']" v-show="!isTime">
<div :class="[datePrefixCls + '-header']" v-show="rightCurrentView !== 'time'">
<span
:class="iconBtnCls('prev', '-double')"
@click="prevYear('right')"
v-show="rightCurrentView === 'year' || rightCurrentView === 'month'"><Icon type="ios-arrow-left"></Icon></span>
<date-panel-label
:date-panel-label="rightDatePanelLabel"
:current-view="rightCurrentView"
:date-prefix-cls="datePrefixCls"/>
<span
:class="iconBtnCls('next', '-double')"
@click="nextYear('right')"><Icon type="ios-arrow-right"></Icon></span>
<span
:class="iconBtnCls('next')"
@click="nextMonth"
v-show="rightCurrentView === 'date'"><Icon type="ios-arrow-right"></Icon></span>
</div>
<date-table
v-show="rightCurrentView === 'date'"
:year="rightYear"
:month="rightMonth"
:date="rightDate"
:min-date="minDate"
:max-date="maxDate"
:range-state="rangeState"
selection-mode="range"
:disabled-date="disabledDate"
@on-changerange="handleChangeRange"
@on-pick="handleRangePick"
@on-pick-click="handlePickClick"></date-table>
<year-table
ref="rightYearTable"
v-show="rightCurrentView === 'year'"
:year="rightTableYear"
:date="rightTableDate"
selection-mode="range"
:disabled-date="disabledDate"
@on-pick="handleRightYearPick"
@on-pick-click="handlePickClick"></year-table>
<month-table
ref="rightMonthTable"
v-show="rightCurrentView === 'month'"
:month="rightMonth"
:date="rightTableDate"
selection-mode="range"
:disabled-date="disabledDate"
@on-pick="handleRightMonthPick"
@on-pick-click="handlePickClick"></month-table>
</div>
<div :class="[prefixCls + '-content']" v-show="isTime">
<time-picker
ref="timePicker"
v-show="isTime"
@on-pick="handleTimePick"
@on-pick-click="handlePickClick"></time-picker>
</div>
<Confirm
v-if="confirm"
:show-time="showTime"
:is-time="isTime"
:time-disabled="timeDisabled"
@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-range.vue';
import Confirm from '../base/confirm.vue';
import { toDate, prevMonth, nextMonth, initTimeDate, formatDateLabels } from '../util';
import datePanelLabel from './date-panel-label.vue';
import Mixin from './mixin';
import Locale from '../../../mixins/locale';
const prefixCls = 'ivu-picker-panel';
const datePrefixCls = 'ivu-date-picker';
export default {
name: 'DatePicker',
mixins: [ Mixin, Locale ],
components: { Icon, DateTable, YearTable, MonthTable, TimePicker, Confirm, datePanelLabel },
data () {
return {
prefixCls: prefixCls,
datePrefixCls: datePrefixCls,
shortcuts: [],
date: initTimeDate(),
value: '',
minDate: '',
maxDate: '',
confirm: false,
rangeState: {
endDate: null,
selecting: false
},
showTime: false,
disabledDate: '',
leftCurrentView: 'date',
rightCurrentView: 'date',
selectionMode: 'range',
leftTableYear: null,
rightTableYear: null,
isTime: false,
format: 'yyyy-MM-dd'
};
},
computed: {
classes () {
return [
`${prefixCls}-body-wrapper`,
`${datePrefixCls}-with-range`,
{
[`${prefixCls}-with-sidebar`]: this.shortcuts.length
}
];
},
leftYear () {
return this.date.getFullYear();
},
leftTableDate () {
if (this.leftCurrentView === 'year' || this.leftCurrentView === 'month') {
return new Date(this.leftTableYear);
} else {
return this.date;
}
},
leftMonth () {
return this.date.getMonth();
},
rightYear () {
return this.rightDate.getFullYear();
},
rightTableDate () {
if (this.rightCurrentView === 'year' || this.rightCurrentView === 'month') {
return new Date(this.rightTableYear);
} else {
return this.date;
}
},
rightMonth () {
return this.rightDate.getMonth();
},
rightDate () {
const newDate = new Date(this.date);
const month = newDate.getMonth();
newDate.setDate(1);
if (month === 11) {
newDate.setFullYear(newDate.getFullYear() + 1);
newDate.setMonth(0);
} else {
newDate.setMonth(month + 1);
}
return newDate;
},
leftDatePanelLabel () {
if (!this.leftYear) return null; // not ready yet
return this.panelLabelConfig('left');
},
rightDatePanelLabel () {
if (!this.leftYear) return null; // not ready yet
return this.panelLabelConfig('right');
},
timeDisabled () {
return !(this.minDate && this.maxDate);
}
},
watch: {
value(newVal) {
if (!newVal) {
this.minDate = null;
this.maxDate = null;
} else if (Array.isArray(newVal)) {
this.minDate = newVal[0] ? toDate(newVal[0]) : null;
this.maxDate = newVal[1] ? toDate(newVal[1]) : null;
if (this.minDate) this.date = new Date(this.minDate);
}
if (this.showTime) this.$refs.timePicker.value = newVal;
},
minDate (val) {
if (this.showTime) this.$refs.timePicker.date = val;
},
maxDate (val) {
if (this.showTime) this.$refs.timePicker.dateEnd = val;
},
format (val) {
if (this.showTime) this.$refs.timePicker.format = val;
},
isTime (val) {
if (val) this.$refs.timePicker.updateScroll();
}
},
methods: {
panelLabelConfig (direction) {
const locale = this.t('i.locale');
const datePanelLabel = this.t('i.datepicker.datePanelLabel');
const handler = type => {
const fn = type == 'month' ? this.showMonthPicker : this.showYearPicker;
return () => fn(direction);
};
const date = new Date(this[`${direction}Year`], this[`${direction}Month`]);
const { labels, separator } = formatDateLabels(locale, datePanelLabel, date);
return {
separator: separator,
labels: labels.map(obj => ((obj.handler = handler(obj.type)), obj))
};
},
resetDate () {
this.date = new Date(this.date);
this.leftTableYear = this.date.getFullYear();
this.rightTableYear = this.rightDate.getFullYear();
},
handleClear() {
this.minDate = null;
this.maxDate = null;
this.date = new Date();
this.handleConfirm();
if (this.showTime) this.$refs.timePicker.handleClear();
},
resetView(reset = false) {
this.leftCurrentView = 'date';
this.rightCurrentView = 'date';
this.leftTableYear = this.leftYear;
this.rightTableYear = this.rightYear;
if (reset) this.isTime = false;
},
prevYear (direction) {
if (this[`${direction}CurrentView`] === 'year') {
this.$refs[`${direction}YearTable`].prevTenYear();
} else if (this[`${direction}CurrentView`] === 'month') {
this[`${direction}TableYear`]--;
} else {
const date = this.date;
date.setFullYear(date.getFullYear() - 1);
this.resetDate();
}
},
nextYear (direction) {
if (this[`${direction}CurrentView`] === 'year') {
this.$refs[`${direction}YearTable`].nextTenYear();
} else if (this[`${direction}CurrentView`] === 'month') {
this[`${direction}TableYear`]++;
} else {
const date = this.date;
date.setFullYear(date.getFullYear() + 1);
this.resetDate();
}
},
prevMonth () {
this.date = prevMonth(this.date);
},
nextMonth () {
this.date = nextMonth(this.date);
},
handleLeftYearPick (year, close = true) {
this.handleYearPick(year, close, 'left');
},
handleRightYearPick (year, close = true) {
this.handleYearPick(year, close, 'right');
},
handleYearPick (year, close, direction) {
this[`${direction}TableYear`] = year;
if (!close) return;
this[`${direction}CurrentView`] = 'month';
},
handleLeftMonthPick (month) {
this.handleMonthPick(month, 'left');
},
handleRightMonthPick (month) {
this.handleMonthPick(month, 'right');
},
handleMonthPick (month, direction) {
let year = this[`${direction}TableYear`];
if (direction === 'right') {
if (month === 0) {
month = 11;
year--;
} else {
month--;
}
}
this.date.setYear(year);
this.date.setMonth(month);
this[`${direction}CurrentView`] = 'date';
this.resetDate();
},
showYearPicker (direction) {
this[`${direction}CurrentView`] = 'year';
this[`${direction}TableYear`] = this[`${direction}Year`];
},
showMonthPicker (direction) {
this[`${direction}CurrentView`] = 'month';
},
handleConfirm(visible) {
this.$emit('on-pick', [this.minDate, this.maxDate], visible);
},
handleRangePick (val, close = true) {
if (this.maxDate === val.maxDate && this.minDate === val.minDate) return;
this.minDate = val.minDate;
this.maxDate = val.maxDate;
// todo Remove when Chromium has fixed bug
// https://github.com/iview/iview/issues/2122
this.$nextTick(() => {
this.minDate = val.minDate;
this.maxDate = val.maxDate;
});
/* end of #2122 patch */
if (!close) return;
// if (!this.showTime) {
// this.handleConfirm(false);
// }
this.handleConfirm(false);
},
handleChangeRange (val) {
this.minDate = val.minDate;
this.maxDate = val.maxDate;
this.rangeState = val.rangeState;
},
handleToggleTime () {
this.isTime = !this.isTime;
},
handleTimePick (date) {
this.minDate = date[0];
this.maxDate = date[1];
this.handleConfirm(false);
}
},
mounted () {
if (this.showTime) {
// todo 这里也到不了
this.$refs.timePicker.date = this.minDate;
this.$refs.timePicker.dateEnd = this.maxDate;
this.$refs.timePicker.value = this.value;
this.$refs.timePicker.format = this.format;
this.$refs.timePicker.showDate = true;
}
}
};
</script>

261
src/components/date-picker/panel/date.vue
View file

@ -1,261 +0,0 @@
<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"/>
<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']">
<date-table
v-show="currentView === 'date'"
:year="year"
:month="month"
:date="date"
:value="value"
:selection-mode="selectionMode"
:disabled-date="disabledDate"
@on-pick="handleDatePick"
@on-pick-click="handlePickClick"></date-table>
<year-table
ref="yearTable"
v-show="currentView === 'year'"
:year="year"
:date="date"
:selection-mode="selectionMode"
:disabled-date="disabledDate"
@on-pick="handleYearPick"
@on-pick-click="handlePickClick"></year-table>
<month-table
ref="monthTable"
v-show="currentView === 'month'"
:month="month"
:date="date"
:selection-mode="selectionMode"
:disabled-date="disabledDate"
@on-pick="handleMonthPick"
@on-pick-click="handlePickClick"></month-table>
<time-picker
ref="timePicker"
show-date
v-show="currentView === 'time'"
@on-pick="handleTimePick"
@on-pick-click="handlePickClick"></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.vue';
import Confirm from '../base/confirm.vue';
import datePanelLabel from './date-panel-label.vue';
import Mixin from './mixin';
import Locale from '../../../mixins/locale';
import { initTimeDate, siblingMonth, formatDateLabels } from '../util';
const prefixCls = 'ivu-picker-panel';
const datePrefixCls = 'ivu-date-picker';
export default {
name: 'DatePicker',
mixins: [ Mixin, Locale ],
components: { Icon, DateTable, YearTable, MonthTable, TimePicker, Confirm, datePanelLabel },
data () {
return {
prefixCls: prefixCls,
datePrefixCls: datePrefixCls,
shortcuts: [],
currentView: 'date',
date: initTimeDate(),
value: '',
showTime: false,
selectionMode: 'day',
disabledDate: '',
year: null,
month: null,
confirm: false,
isTime: false,
format: 'yyyy-MM-dd'
};
},
computed: {
classes () {
return [
`${prefixCls}-body-wrapper`,
{
[`${prefixCls}-with-sidebar`]: this.shortcuts.length
}
];
},
datePanelLabel () {
if (!this.year) return null; // not ready yet
const locale = this.t('i.locale');
const datePanelLabel = this.t('i.datepicker.datePanelLabel');
const date = new Date(this.year, this.month);
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))
};
}
},
watch: {
value (newVal) {
if (!newVal) return;
newVal = new Date(newVal);
if (!isNaN(newVal)) {
this.date = newVal;
this.setMonthYear(newVal);
}
if (this.showTime) this.$refs.timePicker.value = newVal;
},
date (val) {
if (this.showTime) this.$refs.timePicker.date = val;
},
format (val) {
if (this.showTime) this.$refs.timePicker.format = val;
},
currentView (val) {
if (val === 'time') this.$refs.timePicker.updateScroll();
}
},
methods: {
resetDate () {
this.date = new Date(this.date);
},
setMonthYear(date){
this.month = date.getMonth();
this.year = date.getFullYear();
},
handleClear () {
this.date = new Date();
this.$emit('on-pick', '');
if (this.showTime) this.$refs.timePicker.handleClear();
},
resetView (reset = false) {
if (this.currentView !== 'time' || reset) {
if (this.selectionMode === 'month') {
this.currentView = 'month';
} else if (this.selectionMode === 'year') {
this.currentView = 'year';
} else {
this.currentView = 'date';
}
}
this.setMonthYear(this.date);
if (reset) this.isTime = false;
},
changeYear(dir){
if (this.currentView === 'year') {
this.$refs.yearTable[dir == 1 ? 'nextTenYear' : 'prevTenYear']();
} else {
this.year+= dir;
this.date = siblingMonth(this.date, dir * 12);
}
},
changeMonth(dir){
this.date = siblingMonth(this.date, dir);
this.setMonthYear(this.date);
},
handleToggleTime () {
if (this.currentView === 'date') {
this.currentView = 'time';
this.isTime = true;
} else if (this.currentView === 'time') {
this.currentView = 'date';
this.isTime = false;
}
},
handleYearPick(year, close = true) {
this.year = year;
if (!close) return;
this.date.setFullYear(year);
if (this.selectionMode === 'year') {
this.$emit('on-pick', new Date(year, 0, 1));
} else {
this.currentView = 'month';
}
this.resetDate();
},
handleMonthPick (month) {
this.month = month;
this.date.setMonth(month);
if (this.selectionMode !== 'month') {
this.currentView = 'date';
this.resetDate();
} else {
this.year && this.date.setFullYear(this.year);
this.resetDate();
const value = new Date(this.date.getFullYear(), month, 1);
this.$emit('on-pick', value);
}
},
handleDatePick (value) {
if (this.selectionMode === 'day') {
this.$emit('on-pick', new Date(value.getTime()));
this.date = new Date(value);
}
},
handleTimePick (date) {
this.handleDatePick(date);
}
},
mounted () {
if (this.selectionMode === 'month') {
this.currentView = 'month';
}
if (this.date && !this.year) {
this.setMonthYear(this.date);
}
if (this.showTime) {
// todo 这里可能有问题，并不能进入到这里，但不影响正常使用
this.$refs.timePicker.date = this.date;
this.$refs.timePicker.value = this.value;
this.$refs.timePicker.format = this.format;
this.$refs.timePicker.showDate = true;
}
}
};
</script>

27
src/components/date-picker/panel/mixin.js
View file

@ -1,27 +0,0 @@
const prefixCls = 'ivu-picker-panel';
const datePrefixCls = 'ivu-date-picker';
export default {
methods: {
iconBtnCls (direction, type = '') {
return [
`${prefixCls}-icon-btn`,
`${datePrefixCls}-${direction}-btn`,
`${datePrefixCls}-${direction}-btn-arrow${type}`,
];
},
handleShortcutClick (shortcut) {
if (shortcut.value) this.$emit('on-pick', shortcut.value());
if (shortcut.onClick) shortcut.onClick(this);
},
handlePickClear () {
this.$emit('on-pick-clear');
},
handlePickSuccess () {
this.$emit('on-pick-success');
},
handlePickClick () {
this.$emit('on-pick-click');
}
}
};

56
src/components/date-picker/panel/panel-mixin.js Normal file
View file

@ -0,0 +1,56 @@
const prefixCls = 'ivu-picker-panel';
const datePrefixCls = 'ivu-date-picker';
export default {
props: {
confirm: {
type: Boolean,
default: false
}
},
methods: {
iconBtnCls (direction, type = '') {
return [
`${prefixCls}-icon-btn`,
`${datePrefixCls}-${direction}-btn`,
`${datePrefixCls}-${direction}-btn-arrow${type}`,
];
},
handleShortcutClick (shortcut) {
if (shortcut.value) this.$emit('on-pick', shortcut.value());
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);
},
onToggleVisibility(open){
const {timeSpinner, timeSpinnerEnd} = this.$refs;
if (open && timeSpinner) timeSpinner.updateScroll();
if (open && timeSpinnerEnd) timeSpinnerEnd.updateScroll();
}
}
};

214
src/components/date-picker/panel/time-range.vue
View file

@ -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>

123
src/components/date-picker/panel/time.vue
View file

@ -1,123 +0,0 @@
<template>
<div :class="[prefixCls + '-body-wrapper']" @mousedown.prevent>
<div :class="[prefixCls + '-body']">
<div :class="[timePrefixCls + '-header']" v-if="showDate">{{ visibleDate }}</div>
<div :class="[prefixCls + '-content']">
<time-spinner
ref="timeSpinner"
:show-seconds="showSeconds"
:steps="steps"
:hours="hours"
:minutes="minutes"
:seconds="seconds"
:disabled-hours="disabledHours"
:disabled-minutes="disabledMinutes"
:disabled-seconds="disabledSeconds"
:hide-disabled-options="hideDisabledOptions"
@on-change="handleChange"
@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 } 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,
date: initTimeDate(),
value: '',
showDate: false,
format: 'HH:mm:ss',
hours: '',
minutes: '',
seconds: '',
disabledHours: [],
disabledMinutes: [],
disabledSeconds: [],
hideDisabledOptions: false,
confirm: false
};
},
computed: {
showSeconds () {
return (this.format || '').indexOf('ss') !== -1;
},
visibleDate () {
const date = this.date;
const month = date.getMonth() + 1;
const tYear = this.t('i.datepicker.year');
const tMonth = this.t(`i.datepicker.month${month}`);
return `${date.getFullYear()}${tYear} ${tMonth}`;
}
},
watch: {
value (newVal) {
if (!newVal) return;
newVal = new Date(newVal);
if (!isNaN(newVal)) {
this.date = newVal;
this.handleChange({
hours: newVal.getHours(),
minutes: newVal.getMinutes(),
seconds: newVal.getSeconds()
}, false);
}
}
},
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);
},
updateScroll () {
this.$refs.timeSpinner.updateScroll();
}
},
mounted () {
if (this.$parent && this.$parent.$options.name === 'DatePicker') this.showDate = true;
}
};
</script>

558
src/components/date-picker/picker.vue
View file

@ -3,6 +3,7 @@
<div ref="reference" :class="[prefixCls + '-rel']"> <div ref="reference" :class="[prefixCls + '-rel']">
<slot> <slot>
<i-input <i-input
:key="forceInputRerender"
:element-id="elementId" :element-id="elementId"
:class="[prefixCls + '-editor']" :class="[prefixCls + '-editor']"
:readonly="!editable || readonly" :readonly="!editable || readonly"
@ -17,7 +18,9 @@
@on-click="handleIconClick" @on-click="handleIconClick"
@mouseenter.native="handleInputMouseenter" @mouseenter.native="handleInputMouseenter"
@mouseleave.native="handleInputMouseleave" @mouseleave.native="handleInputMouseleave"
:icon="iconType"></i-input>
:icon="iconType"
></i-input>
</slot> </slot>
</div> </div>
<transition :name="transition"> <transition :name="transition">
@ -29,122 +32,49 @@
ref="drop" ref="drop"
:data-transfer="transfer" :data-transfer="transfer"
v-transfer-dom> v-transfer-dom>
<div ref="picker"></div> <div>
<component
:is="panel"
ref="pickerPanel"
:visible="visible"
:showTime="type === 'datetime' || type === 'datetimerange'"
:confirm="isConfirm"
:selectionMode="selectionMode"
:steps="steps"
:format="format"
:value="internalValue"
:start-date="startDate"
:split-panels="splitPanels"
:show-week-numbers="showWeekNumbers"
:picker-type="type"
v-bind="ownPickerProps"
@on-pick="onPick"
@on-pick-clear="handleClear"
@on-pick-success="onPickSuccess"
@on-pick-click="disableClickOutSide = true"
@on-selection-mode-change="onSelectionModeChange"
></component>
</div>
</Drop> </Drop>
</transition> </transition>
</div> </div>
</template> </template>
<script> <script>
import iInput from '../../components/input/input.vue'; import iInput from '../../components/input/input.vue';
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 TransferDom from '../../directives/transfer-dom'; import TransferDom from '../../directives/transfer-dom';
import { oneOf } from '../../utils/assist'; import { oneOf } from '../../utils/assist';
import { formatDate, parseDate } from './util'; import { DEFAULT_FORMATS, TYPE_VALUE_RESOLVER_MAP } from './util';
import Emitter from '../../mixins/emitter'; import Emitter from '../../mixins/emitter';
const prefixCls = 'ivu-date-picker'; const prefixCls = 'ivu-date-picker';
const DEFAULT_FORMATS = { const isEmptyArray = val => val.reduce((isEmpty, str) => isEmpty && !str || (typeof str === 'string' && str.trim() === ''), true);
date: 'yyyy-MM-dd',
month: 'yyyy-MM',
year: 'yyyy',
datetime: 'yyyy-MM-dd HH:mm:ss',
time: 'HH:mm:ss',
timerange: 'HH:mm:ss',
daterange: 'yyyy-MM-dd',
datetimerange: 'yyyy-MM-dd HH:mm:ss'
};
const RANGE_SEPARATOR = ' - ';
const DATE_FORMATTER = function(value, format) {
return formatDate(value, format);
};
const DATE_PARSER = function(text, format) {
return parseDate(text, format);
};
const RANGE_FORMATTER = function(value, format) {
if (Array.isArray(value) && value.length === 2) {
const start = value[0];
const end = value[1];
if (start && end) {
return formatDate(start, format) + RANGE_SEPARATOR + formatDate(end, format);
}
}
return '';
};
const RANGE_PARSER = function(text, format) {
const array = text.split(RANGE_SEPARATOR);
if (array.length === 2) {
const range1 = array[0];
const range2 = array[1];
return [parseDate(range1, format), parseDate(range2, format)];
}
return [];
};
const TYPE_VALUE_RESOLVER_MAP = {
default: {
formatter(value) {
if (!value) return '';
return '' + value;
},
parser(text) {
if (text === undefined || text === '') return null;
return text;
}
},
date: {
formatter: DATE_FORMATTER,
parser: DATE_PARSER
},
datetime: {
formatter: DATE_FORMATTER,
parser: DATE_PARSER
},
daterange: {
formatter: RANGE_FORMATTER,
parser: RANGE_PARSER
},
datetimerange: {
formatter: RANGE_FORMATTER,
parser: RANGE_PARSER
},
timerange: {
formatter: RANGE_FORMATTER,
parser: RANGE_PARSER
},
time: {
formatter: DATE_FORMATTER,
parser: DATE_PARSER
},
month: {
formatter: DATE_FORMATTER,
parser: DATE_PARSER
},
year: {
formatter: DATE_FORMATTER,
parser: DATE_PARSER
},
number: {
formatter(value) {
if (!value) return '';
return '' + value;
},
parser(text) {
let result = Number(text);
if (!isNaN(text)) {
return result;
} else {
return null;
}
}
}
};
export default { export default {
name: 'CalendarPicker', name: 'CalendarPicker',
@ -179,6 +109,21 @@
type: Boolean, type: Boolean,
default: null default: null
}, },
multiple: {
type: Boolean,
default: false
},
splitPanels: {
type: Boolean,
default: false
},
showWeekNumbers: {
type: Boolean,
default: false
},
startDate: {
type: Date
},
size: { size: {
validator (value) { validator (value) {
return oneOf(value, ['small', 'large', 'default']); return oneOf(value, ['small', 'large', 'default']);
@ -194,9 +139,6 @@
}, },
default: 'bottom-start' default: 'bottom-start'
}, },
options: {
type: Object
},
transfer: { transfer: {
type: Boolean, type: Boolean,
default: false default: false
@ -206,21 +148,45 @@
}, },
elementId: { elementId: {
type: String type: String
},
steps: {
type: Array,
default: () => []
},
value: {
type: [Date, String, Array]
},
options: {
type: Object,
default: () => ({})
} }
}, },
data(){ data(){
const isRange = this.type.includes('range');
const emptyArray = isRange ? [null, null] : [null];
const initialValue = isEmptyArray((isRange ? this.value : [this.value]) || []) ? emptyArray : this.parseDate(this.value);
return { return {
prefixCls: prefixCls, prefixCls: prefixCls,
showClose: false, showClose: false,
visible: false, visible: false,
picker: null, internalValue: initialValue,
internalValue: '',
disableClickOutSide: false, // fixed when click a date,trigger clickoutside to close picker disableClickOutSide: false, // fixed when click a date,trigger clickoutside to close picker
disableCloseUnderTransfer: false, // transfer 模式下，点击Drop也会触发关闭 disableCloseUnderTransfer: false, // transfer 模式下，点击Drop也会触发关闭,
currentValue: this.value selectionMode: this.onSelectionModeChange(this.type),
forceInputRerender: 1
}; };
}, },
computed: { computed: {
publicValue(){
if (this.multiple){
return this.internalValue.slice();
} else {
const isRange = this.type.includes('range');
const val = this.internalValue.map(date => date instanceof Date ? new Date(date) : (date || ''));
return (isRange || this.multiple) ? val : val[0];
}
},
opened () { opened () {
return this.open === null ? this.visible : this.open; return this.open === null ? this.visible : this.open;
}, },
@ -231,52 +197,22 @@
return icon; return icon;
}, },
transition () { transition () {
if (this.placement === 'bottom-start' || this.placement === 'bottom' || this.placement === 'bottom-end') { const bottomPlaced = this.placement.match(/^bottom/);
return 'slide-up'; return bottomPlaced ? 'slide-up' : 'slide-down';
} else {
return 'slide-down';
}
}, },
selectionMode() { visualValue() {
if (this.type === 'month') { return this.formatDate(this.internalValue);
return 'month';
} else if (this.type === 'year') {
return 'year';
}
return 'day';
}, },
visualValue: { isConfirm(){
get () { return this.confirm || this.type === 'datetime' || this.type === 'datetimerange' || this.multiple;
const value = this.internalValue;
if (!value) return;
const formatter = (
TYPE_VALUE_RESOLVER_MAP[this.type] ||
TYPE_VALUE_RESOLVER_MAP['default']
).formatter;
const format = DEFAULT_FORMATS[this.type];
return formatter(value, this.format || format);
},
set (value) {
if (value) {
const type = this.type;
const parser = (
TYPE_VALUE_RESOLVER_MAP[type] ||
TYPE_VALUE_RESOLVER_MAP['default']
).parser;
const parsedValue = parser(value, this.format || DEFAULT_FORMATS[type]);
if (parsedValue) {
if (this.picker) this.picker.value = parsedValue;
}
return;
}
if (this.picker) this.picker.value = value;
}
} }
}, },
methods: { methods: {
onSelectionModeChange(type){
if (type.match(/^date/)) type = 'date';
this.selectionMode = oneOf(type, ['year', 'month', 'date', 'time']) && type;
return this.selectionMode;
},
// 开启 transfer 时，点击 Drop 即会关闭，这里不让其关闭 // 开启 transfer 时，点击 Drop 即会关闭，这里不让其关闭
handleTransferClick () { handleTransferClick () {
if (this.transfer) this.disableCloseUnderTransfer = true; if (this.transfer) this.disableCloseUnderTransfer = true;
@ -287,100 +223,45 @@
return false; return false;
} }
if (this.open !== null) return; if (this.open !== null) return;
// if (!this.disableClickOutSide) this.visible = false;
this.visible = false; this.visible = false;
this.disableClickOutSide = false; this.disableClickOutSide = false;
}, },
handleFocus () { handleFocus () {
if (this.readonly) return; if (this.readonly) return;
this.visible = true; this.visible = true;
this.$refs.pickerPanel.onToggleVisibility(true);
}, },
handleBlur () { handleBlur () {
this.visible = false; this.visible = false;
this.onSelectionModeChange(this.type);
this.internalValue = this.internalValue.slice(); // trigger panel watchers to reset views
this.reset();
this.$refs.pickerPanel.onToggleVisibility(false);
},
reset(){
this.$refs.pickerPanel.reset && this.$refs.pickerPanel.reset();
}, },
handleInputChange (event) { handleInputChange (event) {
const isArrayValue = this.type.includes('range') || this.multiple;
const oldValue = this.visualValue; const oldValue = this.visualValue;
const value = event.target.value; const newValue = event.target.value;
const newDate = this.parseDate(newValue);
const disabledDateFn =
this.options &&
typeof this.options.disabledDate === 'function' &&
this.options.disabledDate;
const valueToTest = isArrayValue ? newDate : newDate[0];
const isDisabled = disabledDateFn && disabledDateFn(valueToTest);
const isValidDate = newDate.reduce((valid, date) => valid && date instanceof Date, true);
let correctValue = ''; if (newValue !== oldValue && !isDisabled && isValidDate) {
let correctDate = ''; this.emitChange();
const type = this.type; this.internalValue = newDate;
const format = this.format || DEFAULT_FORMATS[type];
if (type === 'daterange' || type === 'timerange' || type === 'datetimerange') {
const parser = (
TYPE_VALUE_RESOLVER_MAP[type] ||
TYPE_VALUE_RESOLVER_MAP['default']
).parser;
const formatter = (
TYPE_VALUE_RESOLVER_MAP[type] ||
TYPE_VALUE_RESOLVER_MAP['default']
).formatter;
const parsedValue = parser(value, format);
if (parsedValue[0] instanceof Date && parsedValue[1] instanceof Date) {
if (parsedValue[0].getTime() > parsedValue[1].getTime()) {
correctValue = oldValue;
} else { } else {
correctValue = formatter(parsedValue, format); this.forceInputRerender++;
} }
// todo 判断disabledDate
} else {
correctValue = oldValue;
}
correctDate = parser(correctValue, format);
} else if (type === 'time') {
const parsedDate = parseDate(value, format);
if (parsedDate instanceof Date) {
if (this.disabledHours.length || this.disabledMinutes.length || this.disabledSeconds.length) {
const hours = parsedDate.getHours();
const minutes = parsedDate.getMinutes();
const seconds = parsedDate.getSeconds();
if ((this.disabledHours.length && this.disabledHours.indexOf(hours) > -1) ||
(this.disabledMinutes.length && this.disabledMinutes.indexOf(minutes) > -1) ||
(this.disabledSeconds.length && this.disabledSeconds.indexOf(seconds) > -1)) {
correctValue = oldValue;
} else {
correctValue = formatDate(parsedDate, format);
}
} else {
correctValue = formatDate(parsedDate, format);
}
} else {
correctValue = oldValue;
}
correctDate = parseDate(correctValue, format);
} else {
const parsedDate = parseDate(value, format);
if (parsedDate instanceof Date) {
const options = this.options || false;
if (options && options.disabledDate && typeof options.disabledDate === 'function' && options.disabledDate(new Date(parsedDate))) {
correctValue = oldValue;
} else {
correctValue = formatDate(parsedDate, format);
}
} else if (!parsedDate) {
correctValue = '';
} else {
correctValue = oldValue;
}
correctDate = parseDate(correctValue, format);
}
this.visualValue = correctValue;
event.target.value = correctValue;
this.internalValue = correctDate;
this.currentValue = correctDate;
if (correctValue !== oldValue) this.emitChange(correctDate);
}, },
handleInputMouseenter () { handleInputMouseenter () {
if (this.readonly || this.disabled) return; if (this.readonly || this.disabled) return;
@ -400,149 +281,124 @@
}, },
handleClear () { handleClear () {
this.visible = false; this.visible = false;
this.internalValue = ''; this.internalValue = this.internalValue.map(() => null);
this.currentValue = '';
this.$emit('on-clear'); this.$emit('on-clear');
this.dispatch('FormItem', 'on-form-change', ''); this.dispatch('FormItem', 'on-form-change', '');
// #2215，当初始设置了 value，直接点 clear，这时 this.picker 还没有加载 this.emitChange();
if (!this.picker) { this.reset();
this.emitChange('');
} setTimeout(
() => this.onSelectionModeChange(this.type),
500 // delay to improve dropdown close visual effect
);
}, },
showPicker () { emitChange () {
if (!this.picker) { this.$emit('on-change', this.visualValue, this.publicValue);
let isConfirm = this.confirm;
const type = this.type;
this.picker = this.Panel.$mount(this.$refs.picker);
if (type === 'datetime' || type === 'datetimerange') {
isConfirm = true;
this.picker.showTime = true;
}
this.picker.value = this.internalValue;
this.picker.confirm = isConfirm;
this.picker.selectionMode = this.selectionMode;
if (this.format) this.picker.format = this.format;
// TimePicker
if (this.disabledHours) this.picker.disabledHours = this.disabledHours;
if (this.disabledMinutes) this.picker.disabledMinutes = this.disabledMinutes;
if (this.disabledSeconds) this.picker.disabledSeconds = this.disabledSeconds;
if (this.hideDisabledOptions) this.picker.hideDisabledOptions = this.hideDisabledOptions;
const options = this.options;
for (const option in options) {
this.picker[option] = options[option];
}
this.picker.$on('on-pick', (date, visible = false) => {
if (!isConfirm) this.visible = visible;
this.currentValue = date;
this.picker.value = date;
this.picker.resetView && this.picker.resetView();
this.emitChange(date);
});
this.picker.$on('on-pick-clear', () => {
this.handleClear();
});
this.picker.$on('on-pick-success', () => {
this.visible = false;
this.$emit('on-ok');
});
this.picker.$on('on-pick-click', () => this.disableClickOutSide = true);
}
if (this.internalValue instanceof Date) {
this.picker.date = new Date(this.internalValue.getTime());
} else {
this.picker.value = this.internalValue;
}
this.picker.resetView && this.picker.resetView();
},
emitChange (date) {
const newDate = this.formattingDate(date);
this.$emit('on-change', newDate);
this.$nextTick(() => { this.$nextTick(() => {
this.dispatch('FormItem', 'on-form-change', newDate); this.dispatch('FormItem', 'on-form-change', this.publicValue);
}); });
}, },
formattingDate (date) { parseDate(val) {
const type = this.type; const isRange = this.type.includes('range');
const format = this.format || DEFAULT_FORMATS[type];
const formatter = (
TYPE_VALUE_RESOLVER_MAP[type] ||
TYPE_VALUE_RESOLVER_MAP['default']
).formatter;
let newDate = formatter(date, format);
if (type === 'daterange' || type === 'timerange' || type === 'datetimerange') {
newDate = [newDate.split(RANGE_SEPARATOR)[0], newDate.split(RANGE_SEPARATOR)[1]];
}
return newDate;
}
},
watch: {
visible (val) {
if (val) {
this.showPicker();
this.$refs.drop.update();
if (this.open === null) this.$emit('on-open-change', true);
} else {
if (this.picker) this.picker.resetView && this.picker.resetView(true);
this.$refs.drop.destroy();
if (this.open === null) this.$emit('on-open-change', false);
// blur the input
const input = this.$el.querySelector('input');
if (input) input.blur();
}
},
internalValue(val) {
if (!val && this.picker && typeof this.picker.handleClear === 'function') {
this.picker.handleClear();
}
// this.$emit('input', val);
},
value (val) {
this.currentValue = val;
},
currentValue: {
immediate: true,
handler (val) {
const type = this.type; const type = this.type;
const parser = ( const parser = (
TYPE_VALUE_RESOLVER_MAP[type] || TYPE_VALUE_RESOLVER_MAP[type] ||
TYPE_VALUE_RESOLVER_MAP['default'] TYPE_VALUE_RESOLVER_MAP['default']
).parser; ).parser;
const format = this.format || DEFAULT_FORMATS[type];
const multipleParser = TYPE_VALUE_RESOLVER_MAP['multiple'].parser;
if (val && type === 'time' && !(val instanceof Date)) { if (val && type === 'time' && !(val instanceof Date)) {
val = parser(val, this.format || DEFAULT_FORMATS[type]); val = parser(val, format);
} else if (val && type.match(/range$/) && Array.isArray(val) && val.filter(Boolean).length === 2 && !(val[0] instanceof Date) && !(val[1] instanceof Date)) { } else if (this.multiple && val) {
val = val.join(RANGE_SEPARATOR); val = multipleParser(val, format);
val = parser(val, this.format || DEFAULT_FORMATS[type]); } else if (isRange) {
if (!val){
val = [null, null];
} else {
if (typeof val === 'string') {
val = parser(val, format);
} else if (type === 'timerange') {
val = parser(val, format);
} else {
val = val.map(date => new Date(date)); // try to parse
val = val.map(date => isNaN(date.getTime()) ? null : date); // check if parse passed
}
}
} else if (typeof val === 'string' && type.indexOf('time') !== 0){ } else if (typeof val === 'string' && type.indexOf('time') !== 0){
val = parser(val, this.format || DEFAULT_FORMATS[type]) || val; val = parser(val, format) || null;
} }
this.internalValue = val; return (isRange || this.multiple) ? (val || []) : [val];
this.$emit('input', val); },
formatDate(value){
const format = DEFAULT_FORMATS[this.type];
if (this.multiple) {
const formatter = TYPE_VALUE_RESOLVER_MAP.multiple.formatter;
return formatter(value, this.format || format);
} else {
const {formatter} = (
TYPE_VALUE_RESOLVER_MAP[this.type] ||
TYPE_VALUE_RESOLVER_MAP['default']
);
return formatter(value, this.format || format);
} }
}, },
onPick(dates, visible = false) {
if (this.multiple){
const pickedTimeStamp = dates.getTime();
const indexOfPickedDate = this.internalValue.findIndex(date => date && date.getTime() === pickedTimeStamp);
const allDates = [...this.internalValue, dates].filter(Boolean);
const timeStamps = allDates.map(date => date.getTime()).filter((ts, i, arr) => arr.indexOf(ts) === i && i !== indexOfPickedDate); // filter away duplicates
this.internalValue = timeStamps.map(ts => new Date(ts));
} else {
this.internalValue = Array.isArray(dates) ? dates : [dates];
}
if (!this.isConfirm) this.onSelectionModeChange(this.type); // reset the selectionMode
if (!this.isConfirm) this.visible = visible;
this.emitChange();
},
onPickSuccess(){
this.visible = false;
this.$emit('on-ok');
this.reset();
},
},
watch: {
visible (state) {
if (state === false){
this.$refs.drop.destroy();
const input = this.$el.querySelector('input');
if (input) input.blur();
}
this.$refs.drop.update();
this.$emit('on-open-change', state);
},
value(val) {
this.internalValue = this.parseDate(val);
},
open (val) { open (val) {
if (val === true) { this.visible = val === true;
this.visible = val; },
this.$emit('on-open-change', true); type(type){
} else if (val === false) { this.onSelectionModeChange(type);
this.$emit('on-open-change', false); },
} publicValue(now, before){
} const newValue = JSON.stringify(now);
const oldValue = JSON.stringify(before);
const shouldEmitInput = newValue !== oldValue || typeof now !== typeof before;
if (shouldEmitInput) this.$emit('input', now); // to update v-model
}, },
beforeDestroy () {
if (this.picker) {
this.picker.$destroy();
}
}, },
mounted () { mounted () {
const initialValue = this.value;
const parsedValue = this.publicValue;
if (typeof initialValue !== typeof parsedValue || JSON.stringify(initialValue) !== JSON.stringify(parsedValue)){
this.$emit('input', this.publicValue); // to update v-model
}
if (this.open !== null) this.visible = this.open; if (this.open !== null) this.visible = this.open;
} }
}; };

42
src/components/date-picker/picker/date-picker.js
View file

@ -1,14 +1,6 @@
import Vue from 'vue';
import Picker from '../picker.vue'; import Picker from '../picker.vue';
import DatePanel from '../panel/date.vue'; import DatePickerPanel from '../panel/Date/date.vue';
import DateRangePanel from '../panel/date-range.vue'; import RangeDatePickerPanel from '../panel/Date/date-range.vue';
const getPanel = function (type) {
if (type === 'daterange' || type === 'datetimerange') {
return DateRangePanel;
}
return DatePanel;
};
import { oneOf } from '../../../utils/assist'; import { oneOf } from '../../../utils/assist';
@ -21,29 +13,15 @@ export default {
}, },
default: 'date' default: 'date'
}, },
value: {}
}, },
watch: { components: { DatePickerPanel, RangeDatePickerPanel },
type(value){ computed: {
const typeMap = { panel(){
year: 'year', const isRange = this.type === 'daterange' || this.type === 'datetimerange';
month: 'month', return isRange ? 'RangeDatePickerPanel' : 'DatePickerPanel';
date: 'day' },
}; ownPickerProps(){
const validType = oneOf(value, Object.keys(typeMap)); return this.options;
if (validType) this.Panel.selectionMode = typeMap[value];
} }
}, },
created () {
if (!this.currentValue) {
if (this.type === 'daterange' || this.type === 'datetimerange') {
this.currentValue = ['',''];
} else {
this.currentValue = '';
}
}
const panel = getPanel(this.type);
this.Panel = new Vue(panel);
}
}; };

45
src/components/date-picker/picker/time-picker.js
View file

@ -1,20 +1,13 @@
import Vue from 'vue';
import Picker from '../picker.vue'; import Picker from '../picker.vue';
import TimePanel from '../panel/time.vue'; import TimePickerPanel from '../panel/Time/time.vue';
import TimeRangePanel from '../panel/time-range.vue'; import RangeTimePickerPanel from '../panel/Time/time-range.vue';
import Options from '../time-mixins'; import Options from '../time-mixins';
const getPanel = function (type) {
if (type === 'timerange') {
return TimeRangePanel;
}
return TimePanel;
};
import { oneOf } from '../../../utils/assist'; import { oneOf } from '../../../utils/assist';
export default { export default {
mixins: [Picker, Options], mixins: [Picker, Options],
components: { TimePickerPanel, RangeTimePickerPanel },
props: { props: {
type: { type: {
validator (value) { validator (value) {
@ -22,25 +15,19 @@ export default {
}, },
default: 'time' default: 'time'
}, },
steps: {
type: Array,
default: () => []
}, },
value: {} computed: {
panel(){
const isRange = this.type === 'timerange';
return isRange ? 'RangeTimePickerPanel' : 'TimePickerPanel';
},
ownPickerProps(){
return {
disabledHours: this.disabledHours,
disabledMinutes: this.disabledMinutes,
disabledSeconds: this.disabledSeconds,
hideDisabledOptions: this.hideDisabledOptions
};
}
}, },
created () {
if (!this.currentValue) {
if (this.type === 'timerange') {
this.currentValue = ['',''];
} else {
this.currentValue = '';
}
}
const Panel = Vue.extend(getPanel(this.type));
this.Panel = new Panel({
propsData: {
steps: this.steps
}
});
}
}; };

121
src/components/date-picker/util.js
View file

@ -14,6 +14,18 @@ export const toDate = function(date) {
return _date; return _date;
}; };
export const clearHours = function (time) {
const cloneDate = new Date(time);
cloneDate.setHours(0, 0, 0, 0);
return cloneDate.getTime();
};
export const isInRange = (time, a, b) => {
if (!a || !b) return false;
const [start, end] = [a, b].sort();
return time >= start && time <= end;
};
export const formatDate = function(date, format) { export const formatDate = function(date, format) {
date = toDate(date); date = toDate(date);
if (!date) return ''; if (!date) return '';
@ -122,3 +134,112 @@ export const formatDateLabels = (function() {
}; };
}; };
})(); })();
// Parsers and Formaters
export const DEFAULT_FORMATS = {
date: 'yyyy-MM-dd',
month: 'yyyy-MM',
year: 'yyyy',
datetime: 'yyyy-MM-dd HH:mm:ss',
time: 'HH:mm:ss',
timerange: 'HH:mm:ss',
daterange: 'yyyy-MM-dd',
datetimerange: 'yyyy-MM-dd HH:mm:ss'
};
const RANGE_SEPARATOR = ' - ';
const DATE_FORMATTER = function(value, format) {
return formatDate(value, format);
};
const DATE_PARSER = function(text, format) {
return parseDate(text, format);
};
const RANGE_FORMATTER = function(value, format) {
if (Array.isArray(value) && value.length === 2) {
const start = value[0];
const end = value[1];
if (start && end) {
return formatDate(start, format) + RANGE_SEPARATOR + formatDate(end, format);
}
}
return '';
};
const RANGE_PARSER = function(text, format) {
const array = Array.isArray(text) ? text : text.split(RANGE_SEPARATOR);
if (array.length === 2) {
const range1 = array[0];
const range2 = array[1];
return [parseDate(range1, format), parseDate(range2, format)];
}
return [];
};
export const TYPE_VALUE_RESOLVER_MAP = {
default: {
formatter(value) {
if (!value) return '';
return '' + value;
},
parser(text) {
if (text === undefined || text === '') return null;
return text;
}
},
date: {
formatter: DATE_FORMATTER,
parser: DATE_PARSER
},
datetime: {
formatter: DATE_FORMATTER,
parser: DATE_PARSER
},
daterange: {
formatter: RANGE_FORMATTER,
parser: RANGE_PARSER
},
datetimerange: {
formatter: RANGE_FORMATTER,
parser: RANGE_PARSER
},
timerange: {
formatter: RANGE_FORMATTER,
parser: RANGE_PARSER
},
time: {
formatter: DATE_FORMATTER,
parser: DATE_PARSER
},
month: {
formatter: DATE_FORMATTER,
parser: DATE_PARSER
},
year: {
formatter: DATE_FORMATTER,
parser: DATE_PARSER
},
multiple: {
formatter: (value, format) => {
return value.filter(Boolean).map(date => formatDate(date, format)).join(',');
},
parser: (text, format) => text.split(',').map(string => parseDate(string.trim(), format))
},
number: {
formatter(value) {
if (!value) return '';
return '' + value;
},
parser(text) {
let result = Number(text);
if (!isNaN(text)) {
return result;
} else {
return null;
}
}
}
};

16
src/styles/components/date-picker.less
View file

@ -2,6 +2,7 @@
@picker-prefix-cls: ~"@{css-prefix}picker"; @picker-prefix-cls: ~"@{css-prefix}picker";
@date-picker-cells-width: 196px; @date-picker-cells-width: 196px;
@date-picker-cells-width-with-weeknumbers: 226px;
.@{date-picker-prefix-cls} { .@{date-picker-prefix-cls} {
//position: relative; //position: relative;
@ -64,15 +65,17 @@
} }
} }
} }
span&-disabled,span&-disabled:hover{ span&-week-label,span&-week-label:hover,span&-disabled,span&-disabled:hover{
cursor: @cursor-disabled; cursor: @cursor-disabled;
background: @btn-disable-bg;
color: @btn-disable-color; color: @btn-disable-color;
em{ em{
color: inherit; color: inherit;
background: inherit; background: inherit;
} }
} }
span&-disabled,span&-disabled:hover{
background: @btn-disable-bg;
}
&-today{ &-today{
em { em {
position: relative; position: relative;
@ -132,6 +135,10 @@
} }
} }
&-cells-show-week-numbers {
width: @date-picker-cells-width-with-weeknumbers;
}
&-cells-year,&-cells-month{ &-cells-year,&-cells-month{
margin-top: 14px; margin-top: 14px;
span{ span{
@ -190,7 +197,12 @@
float: left; float: left;
} }
} }
.@{picker-prefix-cls}-cells-show-week-numbers {
min-width: (@date-picker-cells-width-with-weeknumbers + 20) * 2;
} }
}
&-transfer{ &-transfer{
z-index: @zindex-transfer; z-index: @zindex-transfer;
max-height: none; max-height: none;

35
test/unit/specs/date-picker.spec.js
View file

@ -11,7 +11,7 @@ describe('DatePicker.vue', () => {
<Date-Picker></Date-Picker> <Date-Picker></Date-Picker>
`); `);
const picker = vm.$children[0]; const picker = vm.$children[0];
picker.showPicker(); picker.$el.querySelector('input.ivu-input').focus();
vm.$nextTick(() => { vm.$nextTick(() => {
const calendarBody = vm.$el.querySelector('.ivu-picker-panel-body .ivu-date-picker-cells:first-of-type'); const calendarBody = vm.$el.querySelector('.ivu-picker-panel-body .ivu-date-picker-cells:first-of-type');
const calendarCells = [...calendarBody.querySelectorAll('.ivu-date-picker-cells-cell')].filter(el => { const calendarCells = [...calendarBody.querySelectorAll('.ivu-date-picker-cells-cell')].filter(el => {
@ -32,7 +32,7 @@ describe('DatePicker.vue', () => {
`); `);
const picker = vm.$children[0]; const picker = vm.$children[0];
expect(picker.$children.length).to.equal(2); expect(picker.$children.length).to.equal(2);
expect(Array.isArray(picker.currentValue)).to.equal(true); expect(Array.isArray(picker.internalValue)).to.equal(true);
done(); done();
}); });
@ -61,10 +61,17 @@ describe('DatePicker.vue', () => {
dayFive.setHours(0, 0, 0, 0); dayFive.setHours(0, 0, 0, 0);
// check pickers internal value // check pickers internal value
const [startInternalValue, endInternalValue] = picker.currentValue; // Date Objects const [startInternalValue, endInternalValue] = picker.internalValue; // Date Objects
expect(Math.abs(dayOne - startInternalValue)).to.equal(0); expect(Math.abs(dayOne - startInternalValue)).to.equal(0);
expect(Math.abs(dayFive - endInternalValue)).to.equal(0); expect(Math.abs(dayFive - endInternalValue)).to.equal(0);
/*
const [startInternalValue, endInternalValue] = picker.internalValue; // Date Objects
expect(dateToString(dayOne)).to.equal(dateToString(startInternalValue));
expect(dateToString(dayFive)).to.equal(dateToString(endInternalValue));
*/
// check pickers display value // check pickers display value
const [startDisplayValue, endDisplayValue] = displayField.value.split(' - ').map(stringToDate); // Date Objects const [startDisplayValue, endDisplayValue] = displayField.value.split(' - ').map(stringToDate); // Date Objects
expect(Math.abs(dayOne - startDisplayValue)).to.equal(0); expect(Math.abs(dayOne - startDisplayValue)).to.equal(0);
@ -77,6 +84,7 @@ describe('DatePicker.vue', () => {
}); });
it('should change type progamatically', done => { it('should change type progamatically', done => {
// https://jsfiddle.net/hq7cLz83/
vm = createVue({ vm = createVue({
template: '<Date-picker :type="dateType"></Date-picker>', template: '<Date-picker :type="dateType"></Date-picker>',
data() { data() {
@ -94,9 +102,9 @@ describe('DatePicker.vue', () => {
const monthPanel = panel.querySelector('.ivu-date-picker-cells-month'); const monthPanel = panel.querySelector('.ivu-date-picker-cells-month');
const yearPanel = panel.querySelector('.ivu-date-picker-cells-year'); const yearPanel = panel.querySelector('.ivu-date-picker-cells-year');
expect(dayPanel.style.display).to.equal('none'); expect(dayPanel).to.equal(null);
expect(monthPanel.style.display).to.equal(''); expect(monthPanel.style.display).to.equal('');
expect(yearPanel.style.display).to.equal('none'); expect(yearPanel).to.equal(null);
expect(picker.type).to.equal('month'); expect(picker.type).to.equal('month');
expect(picker.selectionMode).to.equal('month'); expect(picker.selectionMode).to.equal('month');
@ -104,6 +112,11 @@ describe('DatePicker.vue', () => {
vm.dateType = 'year'; vm.dateType = 'year';
promissedTick(picker) promissedTick(picker)
.then(() => { .then(() => {
const yearPanel = panel.querySelector('.ivu-date-picker-cells-year');
const monthPanel = panel.querySelector('.ivu-date-picker-cells-month');
expect(yearPanel.style.display).to.equal('');
expect(monthPanel).to.equal(null);
expect(picker.type).to.equal('year'); expect(picker.type).to.equal('year');
expect(picker.selectionMode).to.equal('year'); expect(picker.selectionMode).to.equal('year');
@ -112,10 +125,10 @@ describe('DatePicker.vue', () => {
}) })
.then(() => { .then(() => {
expect(picker.type).to.equal('date'); expect(picker.type).to.equal('date');
expect(picker.selectionMode).to.equal('day'); expect(picker.selectionMode).to.equal('date');
done(); done();
}); }).catch(err => console.log(err));
}); });
}); });
@ -170,7 +183,7 @@ describe('DatePicker.vue', () => {
clickableCells[firstDayInMonthIndex + 4].firstElementChild.click(); clickableCells[firstDayInMonthIndex + 4].firstElementChild.click();
vm.$nextTick(() => { vm.$nextTick(() => {
// cache first values // cache first values
const [startInternalValue, endInternalValue] = picker.currentValue; // Date Objects const [startInternalValue, endInternalValue] = picker.internalValue; // Date Objects
const [startDisplayValue, endDisplayValue] = displayField.value.split(' - ').map(stringToDate); // Date Objects const [startDisplayValue, endDisplayValue] = displayField.value.split(' - ').map(stringToDate); // Date Objects
// clear picker // clear picker
@ -183,7 +196,7 @@ describe('DatePicker.vue', () => {
vm.$nextTick(() => { vm.$nextTick(() => {
expect(picker.visible).to.equal(true); expect(picker.visible).to.equal(true);
expect(JSON.stringify(picker.currentValue)).to.equal('[null,null]'); expect(JSON.stringify(picker.internalValue)).to.equal('[null,null]');
expect(displayField.value).to.equal(''); expect(displayField.value).to.equal('');
clickableCells[firstDayInMonthIndex].firstElementChild.click(); clickableCells[firstDayInMonthIndex].firstElementChild.click();
@ -191,8 +204,8 @@ describe('DatePicker.vue', () => {
clickableCells[firstDayInMonthIndex + 4].firstElementChild.click(); clickableCells[firstDayInMonthIndex + 4].firstElementChild.click();
vm.$nextTick(() => { vm.$nextTick(() => {
// recheck internal values // recheck internal values
expect(Math.abs(picker.currentValue[0] - startInternalValue)).to.equal(0); expect(Math.abs(picker.internalValue[0] - startInternalValue)).to.equal(0);
expect(Math.abs(picker.currentValue[1] - endInternalValue)).to.equal(0); expect(Math.abs(picker.internalValue[1] - endInternalValue)).to.equal(0);
// recheck display value // recheck display value
const [_startDisplayValue, _endDisplayValue] = displayField.value.split(' - ').map(stringToDate); // Date Objects const [_startDisplayValue, _endDisplayValue] = displayField.value.split(' - ').map(stringToDate); // Date Objects
expect(Math.abs(_startDisplayValue - startDisplayValue)).to.equal(0); expect(Math.abs(_startDisplayValue - startDisplayValue)).to.equal(0);