src/components/date-picker/base/date-table.vue

<template>
    <div :class="classes">
        <div :class="[prefixCls + '-header']">
            <span v-for="day in headerDays" :key="day">
                {{day}}
            </span>
        </div>
        <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>
</template>
<script>
    import { clearHours, isInRange } from '../util';
    import Locale from '../../../mixins/locale';
    import jsCalendar from 'js-calendar';
    import mixin from './mixin';
    import prefixCls from './prefixCls';
    export default {
        mixins: [ Locale, mixin ],
        props: {
            /* more props in mixin */
            showWeekNumbers: {
                type: Boolean,
                default: false
            },
        },
        data () {
            return {
                prefixCls: prefixCls,
            };
        },
        computed: {
            classes () {
                return [
                    `${prefixCls}`,
                    {
                        [`${prefixCls}-show-week-numbers`]: this.showWeekNumbers
                    }
                ];
            },
            calendar(){
                const weekStartDay = Number(this.t('i.datepicker.weekStartDay'));
                return new jsCalendar.Generator({onlyDays: !this.showWeekNumbers, weekStart: weekStartDay});
            },
            headerDays () {
                const weekStartDay = Number(this.t('i.datepicker.weekStartDay'));
                const translatedDays = ['sun', 'mon', 'tue', 'wed', 'thu', 'fri', 'sat'].map(item => {
                    return this.t('i.datepicker.weeks.' + item);
                });
                const weekDays = translatedDays.splice(weekStartDay, 7 - weekStartDay).concat(translatedDays.splice(0, weekStartDay));
                return this.showWeekNumbers ? [''].concat(weekDays) : weekDays;
            },
            readCells () {
                const tableYear = this.tableDate.getFullYear();
                const tableMonth = this.tableDate.getMonth();
                const today = clearHours(new Date());    // timestamp of today
                const selectedDays = this.dates.filter(Boolean).map(clearHours);    // timestamp of selected days
                const [minDay, maxDay] = this.dates.map(clearHours);
                const rangeStart = this.rangeState.from && clearHours(this.rangeState.from);
                const rangeEnd = this.rangeState.to && clearHours(this.rangeState.to);
                const isRange = this.selectionMode === 'range';
                const disabledTestFn = typeof this.disabledDate === 'function' && this.disabledDate;
                return this.calendar(tableYear, tableMonth, (cell) => {
                    const time = cell.date && clearHours(cell.date);
                    const dateIsInCurrentMonth = cell.date && tableMonth === cell.date.getMonth();
                    return {
                        ...cell,
                        type: time === today ? 'today' : cell.type,
                        selected: dateIsInCurrentMonth && selectedDays.includes(time),
                        disabled: (cell.date && disabledTestFn) && disabledTestFn(new Date(time)),
                        range: dateIsInCurrentMonth && isRange && isInRange(time, rangeStart, rangeEnd),
                        start: dateIsInCurrentMonth && isRange && time === minDay,
                        end: dateIsInCurrentMonth && isRange && time === maxDay
                    };
                }).cells.slice(this.showWeekNumbers ? 8 : 0);
            }
        },
        methods: {
            getCellCls (cell) {
                return [
                    `${prefixCls}-cell`,
                    {
                        [`${prefixCls}-cell-selected`]: cell.selected || cell.start || cell.end,
                        [`${prefixCls}-cell-disabled`]: cell.disabled,
                        [`${prefixCls}-cell-today`]: cell.type === 'today',
                        [`${prefixCls}-cell-prev-month`]: cell.type === 'prevMonth',
                        [`${prefixCls}-cell-next-month`]: cell.type === 'nextMonth',
                        [`${prefixCls}-cell-week-label`]: cell.type === 'weekLabel',
                        [`${prefixCls}-cell-range`]: cell.range && !cell.start && !cell.end
                    }
                ];
            },
        }
    };
</script>