选择起始日期

<template>
    <!-- This is Component 2 -->
    <div class="box">
        <van-cell :value="date" @click="show = true" />
        <van-calendar ref="calendar" v-model="show" color="rgb(0, 66, 153)" type="range" @confirm="onConfirm"
            :min-date="minDate" :max-date="maxDate" />
        <span>></span>
    </div>
</template>

<script>
import Vue from 'vue';
import { Cell, Calendar } from 'vant';
Vue.use(Calendar);
Vue.use(Cell);
import { enableTimeRange, queryMySubordinate } from '@/api/api';

export default {
    watch: {
        date(value) {
            this.$emit('isUpdate', 'clockin', { state: "data", val: value });
        },
    },
    data() {
        return {
            date: '',
            result: {},
            show: false,
            minDate: new Date(2000, 0, 1),
            maxDate: new Date(2100, 11, 31),

            param: '',
        };
    },
    created() {
        this.fetchTimeLimit();
    },
    methods: {
        fetchTimeLimit() {
            enableTimeRange().then((response) => {
                this.result = response;
                const startDate = new Date(this.result.result.startDate);
                const endDate = new Date(this.result.result.endDate);
                this.minDate = startDate;
                this.maxDate = endDate;
                // console.log("获取返回来的时间", this.result.result.endDate, this.result.result.startDate);
                const currentDate = new Date();
                const firstDayOfMonth = new Date(currentDate.getFullYear(), currentDate.getMonth(), 1);
                const lastDayOfMonth = new Date(currentDate.getFullYear(), currentDate.getMonth() + 1, 0);
                this.date = `${this.formatDate(firstDayOfMonth)} - ${this.formatDate(lastDayOfMonth)}`;
            });
        },
        formatDate(date) {
            const year = date.getFullYear();
            const month = (date.getMonth() + 1).toString().padStart(2, '0');
            const day = date.getDate().toString().padStart(2, '0');
            return `${year}-${month}-${day}`;
        },
        onConfirm(date) {
            let _self = this;
            this.show = false;
            const startDate = date[0];
            const endDate = date[1];
            const formattedStartDate = this.formatDate(startDate);
            const formattedEndDate = this.formatDate(endDate);
            this.date = `${formattedStartDate} - ${formattedEndDate}`;
            const endDay = formattedEndDate;
            const startDay = formattedStartDate;
            const departId = this.param;

            if (!departId) {
                alert('请选择部门');
                return;
            }

            this.$emit('isUpdate', 'employee_schedule', { state: "load", val: true })
            queryMySubordinate({ startDay, endDay, departId })
                .then((response) => {
                    // Handle API response
                    this.$emit('isUpdate', 'employee_schedule', { state: "load", val: false })
                    _self.$emit('isUpdate', 'employee_schedule', { state: "data", val: response });
                })
                .catch((error) => {
                    // Handle API error
                });
        },
    },
    mounted() {
        // Fetch the time limit when the component is mounted
        this.fetchTimeLimit();
    },
};
</script>

<style scoped>
/* Adjust styles based on Vant class names */
.van-calendar {
    border: none;
}

.van-input__control {
    border: none;
}

.van-field__icon {
    display: none;
}

.van-cell {
    font-size: 3.3333vw;
    border: none;
    margin: 0;
    padding: 0;
    background-color: transparent;
}

.box {
    margin-left: -8.33333vw;
    width: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.box-heard-time[data-v-c3d5d656] {
    width: 90%;
}

.van-calendar__header-subtitle,
.van-calendar__header-title,
.van-calendar__month-title {
    text-align: left;
}

.box-heard-time {
    font-size: 12px;
}
</style>