选择起始日期

分手后的思念是犯贱 2024-02-05 20:14 112阅读 0赞

![在这里插入图片描述][9d88784a78264eedbddc4f910befe6bf.png]

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

[9d88784a78264eedbddc4f910befe6bf.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/01/30/eefa67045c2142fd813ff800b20cc78b.png