JLH/JLHAPP/src/components/lj-calendar.vue

<template>
    <section class="wh_container">
        <div class="wh_content_all">
            <!--月份选择器-->
            <div class="wh_top_changge" v-if="!monthTopHide">
                <li @click="PreMonth(myDate,false)">
                    <div class="wh_jiantou1"></div>
                </li>
                <li class="wh_content_li">{{dateTop}}</li>
                <li @click="NextMonth(myDate,false)">
                    <div class="wh_jiantou2"></div>
                </li>
            </div>
            <!--标题：星期几-->
            <div class="wh_content">
                <div class="wh_content_item" v-for="tag in textTop">
                    <div class="wh_top_tag" :style="{color:(tag === '六' || tag === '日')? '#ff9800':'#757575'}">
                        {{tag}}
                    </div>
                </div>
            </div>
            <!--内容-->
            <div class="wh_content">
                <div class="wh_content_item" v-for="(item,index) in list" @click="clickDay(item,index)">
                    <div
                            class="wh_item_date"
                            v-bind:class="[{ wh_isMark: item.isMark},{wh_other_dayhide:item.otherMonth!=='nowMonth'},{wh_want_dayhide:item.dayHide},{wh_isToday:item.isToday},{wh_chose_day:item.chooseDay},{wh_isNotify:item.isNotify},setClass(item)]"
                    >{{item.id}}
                    </div>
                </div>
            </div>
        </div>
    </section>
</template>
<script>
    import timeUtil from "./lj-time-util";

    export default {
        name: "lj-calendar",
        props: {
            markDate: {
                type: Array,
                default: () => []
            },
            markDateMore: {
                type: Array,
                default: () => []
            },
            textTop: {
                type: Array,
                default: () => ["一", "二", "三", "四", "五", "六", "日"]
            },
            sundayStart: {
                type: Boolean,
                default: () => false
            },
            agoDayHide: {
                type: String,
                default: `0`
            },
            futureDayHide: {
                type: String,
                default: `2554387200`
            },
            monthTopHide: {//隐藏顶部月份选择
                type: Boolean,
                default: false
            },
            range: {
                // 时间范围，包括开始时间与结束时间。开始时间必须是周一，结束时间必须是周日
                type: Array
            },
            value: {}
        },
        data() {
            return {
                myDate: [],
                list: [],
                historyChose: [],
                dateTop: "",
                currentValue: undefined
            };
        },
        created() {
            this.intStart();
            if (this.value) {
                this.myDate = new Date(this.value);
            } else {
                this.myDate = new Date();
            }
        },
        mounted() {
            this.getList(this.myDate, timeUtil.dateFormat(this.myDate));
        },
        methods: {
            intStart() {
                timeUtil.sundayStart = this.sundayStart;
            },
            setClass(data) {
                let obj = {};
                obj[data.markClassName] = data.markClassName;
                return obj;
            },
            clickDay: function (item, index) {
                if (item.otherMonth === "nowMonth" && !item.dayHide) {
                    this.getList(this.myDate, item.date);
                }
                if (item.otherMonth !== "nowMonth") {
                    item.otherMonth === "preMonth"
                        ? this.PreMonth(item.date)
                        : this.NextMonth(item.date);
                }
            },
            ChoseMonth: function (date, isChosedDay = true) {
                date = timeUtil.dateFormat(date);
                this.myDate = new Date(date);
                this.$emit("changeMonth", timeUtil.dateFormat(this.myDate));
                if (isChosedDay) {
                    this.getList(this.myDate, date, isChosedDay);
                } else {
                    this.getList(this.myDate);
                }
            },
            PreMonth: function (date, isChosedDay = true) {
                date = timeUtil.dateFormat(date);
                this.myDate = timeUtil.getOtherMonth(this.myDate, "preMonth");
                this.$emit("changeMonth", timeUtil.dateFormat(this.myDate));
                if (isChosedDay) {
                    this.getList(this.myDate, date, isChosedDay);
                } else {
                    this.getList(this.myDate);
                }
            },
            NextMonth: function (date, isChosedDay = true) {
                date = timeUtil.dateFormat(date);
                this.myDate = timeUtil.getOtherMonth(this.myDate, "nextMonth");
                this.$emit("changeMonth", timeUtil.dateFormat(this.myDate));
                if (isChosedDay) {
                    this.getList(this.myDate, date, isChosedDay);
                } else {
                    this.getList(this.myDate);
                }
            },
            forMatArgs: function () {
                let markDate = this.markDate;
                let markDateMore = this.markDateMore;
                markDate = markDate.map(k => {
                    return timeUtil.dateFormat(k);
                });
                markDateMore = markDateMore.map(k => {
                    k.date = timeUtil.dateFormat(k.date);
                    return k;
                });
                return [markDate, markDateMore];
            },
            getList: function (date, chooseDay, isChosedDay = true) {
                if (chooseDay) {
                    this.handleChooseDayChanged(chooseDay);
                }
                console.log(this.currentValue);
                const [markDate, markDateMore] = this.forMatArgs();
                this.dateTop = `${date.getFullYear()}年${date.getMonth() + 1}月`;
                let arr = timeUtil.getMonthList(this.myDate);
                let filtedArr = [];
                let startDay = this.range && this.range[0] ? new Date(timeUtil.dateFormat(this.range[0])) : undefined;
                let endDay = this.range && this.range[1] ? new Date(timeUtil.dateFormat(this.range[1])) : undefined;
                if (this.sundayStart) {
                    if (startDay && startDay.getDay() !== 0) {
                        console.error("lj-calendar:开始日期必须为星期天");
                        return;
                    }
                    if (endDay && endDay.getDay() !== 6) {
                        console.error("lj-calendar:结束日期必须为星期六");
                        return;
                    }
                } else {
                    if (startDay && startDay.getDay() !== 1) {
                        console.error("lj-calendar:开始日期必须为星期一");
                        return;
                    }
                    if (endDay && endDay.getDay() !== 0) {
                        console.error("lj-calendar:结束日期必须为星期天");
                        return;
                    }
                }
                for (let i = 0; i < arr.length; i++) {
                    let markClassName = "";
                    let k = arr[i];
                    k.chooseDay = false;
                    const nowTime = k.date;
                    let dateObject = new Date(nowTime);
                    if (startDay && dateObject < startDay) {
                        continue;
                    }
                    if (endDay && endDay < dateObject) {
                        continue;
                    }
                    const t = new Date(nowTime).getTime() / 1000;
                    //看每一天的class
                    for (const c of markDateMore) {
                        if (c.date === nowTime) {
                            markClassName = c.className || "";
                        }
                    }
                    //标记选中某些天 设置class
                    k.markClassName = markClassName;
                    k.isMark = markDate.indexOf(nowTime) > -1;
                    //无法选中某天
                    k.dayHide = t < this.agoDayHide || t > this.futureDayHide;
                    if (k.isToday) {
                        this.$emit("isToday", nowTime);
                    }
                    let flag = !k.dayHide && k.otherMonth === "nowMonth";
                    if (chooseDay && chooseDay === nowTime && flag) {
                        this.$emit("choseDay", nowTime);
                        this.historyChose.push(nowTime);
                        k.chooseDay = true;
                    } else if (
                        this.historyChose[this.historyChose.length - 1] === nowTime &&
                        !chooseDay &&
                        flag
                    ) {
                        k.chooseDay = true;
                    }
                    filtedArr.push(k)
                }
                this.list = filtedArr;
                this.$emit("display-range-changed", {
                    startDay: this.list[0].date,
                    endDay: this.list[this.list.length - 1].date,
                    list: this.list // 获得日对象，可设置isNotify
                });
            },
            handleChooseDayChanged(chooseDay) {
                let newValue = new Date(chooseDay);
                if (!this.currentValue || this.currentValue.toString() !== newValue.toString()) {
                    this.currentValue = newValue;
                    this.$emit('input', this.currentValue);
                    this.$emit('change', this.currentValue);
                }
            }
        },
        watch: {
            value: {
                handler(val, oldVal) {
                    if (val !== oldVal && val !== this.currentValue) {
                        this.currentValue = val;
                        this.getList(this.myDate, timeUtil.dateFormat(this.currentValue));
                    }
                },
                deep: true
            },
            range: {
                handler(val, oldVal) {
                    console.log("range changed");
                    this.getList(this.myDate, timeUtil.dateFormat(this.currentValue));
                },
                deep: true
            },
            markDate: {
                handler(val, oldVal) {
                    this.getList(this.myDate);
                },
                deep: true
            },
            markDateMore: {
                handler(val, oldVal) {
                    this.getList(this.myDate);
                },
                deep: true
            },
            agoDayHide: {
                handler(val, oldVal) {
                    this.getList(this.myDate);
                },
                deep: true
            },
            futureDayHide: {
                handler(val, oldVal) {
                    this.getList(this.myDate);
                },
                deep: true
            },
            sundayStart: {
                handler(val, oldVal) {
                    this.intStart();
                    this.getList(this.myDate);
                },
                deep: true
            }
        }
    };
</script>
<style scoped>
    @media screen and (min-width: 460px) {
        .wh_item_date:hover {
            background: #71c7a5;
            cursor: pointer;
        }
    }

    * {
        margin: 0;
        padding: 0;
    }

    .wh_container {
        max-width: 410px;
        margin: auto;
    }

    li {
        list-style-type: none;
    }

    .wh_top_changge {
        display: flex;
    }

    .wh_top_changge li {
        cursor: pointer;
        display: flex;
        color: #000;
        font-size: 18px;
        flex: 1;
        justify-content: center;
        align-items: center;
        height: 47px;
    }

    .wh_top_changge .wh_content_li {
        cursor: auto;
        flex: 2.5;
    }

    .wh_content_all {
        font-family: -apple-system, BlinkMacSystemFont, "PingFang SC",
        "Helvetica Neue", STHeiti, "Microsoft Yahei", Tahoma, Simsun, sans-serif;
        background-color: #ffffff;
        width: 100%;
        overflow: hidden;
        padding-bottom: 8px;
    }

    .wh_content {
        display: flex;
        flex-wrap: wrap;
        padding: 0 3% 0 3%;
        width: 100%;
        justify-content: center;
        align-items: center;
    }

    .wh_content:first-child .wh_content_item_tag,
    .wh_content:first-child .wh_content_item {
        color: #ddd;
        font-size: 16px;
    }

    .wh_content_item, wh_content_item_tag {
        font-size: 15px;
        width: 13.4%;
        text-align: center;
        color: #000000;
        position: relative;
    }

    .wh_content_item {
        height: 40px;
    }

    .wh_top_tag {
        width: 40px;
        height: 40px;
        line-height: 40px;
        margin: auto;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .wh_item_date {
        width: 40px;
        height: 40px;
        line-height: 40px;
        margin: auto;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .wh_jiantou1 {
        width: 12px;
        height: 12px;
        border-top: 2px solid #000000;
        border-left: 2px solid #000000;
        transform: rotate(-45deg);
    }

    .wh_jiantou1:active,
    .wh_jiantou2:active {
        border-color: #ddd;
    }

    .wh_jiantou2 {
        width: 12px;
        height: 12px;
        border-top: 2px solid #000000;
        border-right: 2px solid #000000;
        transform: rotate(45deg);
    }

    .wh_content_item > .wh_isMark {
        margin: auto;
        border-radius: 100px;
        background: #42a5f5;
        z-index: 2;
    }

    .wh_content_item .wh_other_dayhide {
        color: #bfbfbf;
    }

    .wh_content_item .wh_want_dayhide {
        color: #bfbfbf;
    }

    .wh_content_item .wh_isToday {
        color: #26a69a;
        /*background: #fff176;*/
        border-radius: 100px;
    }

    .wh_content_item .wh_chose_day {
        background: #42a5f5;
        border-radius: 100px;
        color: #ffffff !important;
    }

    .wh_content_item .wh_isNotify {
        text-decoration: underline;
    }
</style>