Press n or j to go to the next uncovered block, b, p or k for the previous block.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 | 7x 7x 7x | <template> <div :class="$style.root" :border="border"> <date-range v-if="picker === 'date' || picker === 'week'" :picker="picker" :value="value" :disabled-date="disabledDate" @pick="emitInput" v-bind="$attrs" v-on="$listeners"></date-range> <other-range v-else :picker="picker" :value="value" :disabled-date="disabledDate" @pick="emitInput" v-bind="$attrs" v-on="$listeners"></other-range> </div> </template> <script> import DateRange from './panel/date-range'; import OtherRange from './panel/other-range'; import { getDateTimestamp, getMonthTimestamp, getQuarterTimestamp, getYearTimestamp } from './util'; export default { name: 'u-calendar-range', components: { DateRange, OtherRange, }, props: { picker: { type: String, default: 'date' }, startDate: { type: [String, Number, Date] }, endDate: { type: [String, Number, Date] }, readonly: { type: Boolean, default: false }, disabled: { type: Boolean, default: false }, minDate: [String, Date, Number], maxDate: [String, Date, Number], border: { type: Boolean, default: true }, }, computed: { value() { return [this.startDate, this.endDate]; }, disabledDate() { const timestampFnMap = { date: getDateTimestamp, week: getDateTimestamp, month: getMonthTimestamp, quarter: getQuarterTimestamp, year: getYearTimestamp, }; const timestampFn = timestampFnMap[this.picker] || (() => false); return (date) => { const time = new Date(date).getTime(); if (this.disabled || (this.minDate && time < timestampFn(this.minDate)) || (this.maxDate && date > timestampFn(this.maxDate))) { return true; } return false; }; }, }, methods: { emitInput(val) { this.$emit('input', val); }, }, }; </script> <style module> .root { width: var(--calendar-range-width); user-select: none; background: var(--calendar-background); box-sizing: border-box; } .root[border] { border: 1px solid var(--calendar-border-color); border-radius: var(--calendar-border-radius); } </style> |