elementui时间组件库

最新推荐文章于 2024-04-01 20:01:21 发布

阳光雨滴

最新推荐文章于 2024-04-01 20:01:21 发布

阅读量260

点赞数 7

分类专栏： elementui el-date-picker 时间组件库文章标签： vue.js

本文链接：https://blog.csdn.net/bbkhhvv/article/details/136326561

版权

elementui 同时被 3 个专栏收录

2 篇文章 0 订阅

订阅专栏

el-date-picker

1 篇文章 0 订阅

订阅专栏

时间组件库

1 篇文章 0 订阅

订阅专栏

本文详细描述了一个Vue应用中使用ElementUI的日期选择器组件，如何实现年份、月份和日期的选择，并处理默认值、状态切换以及日期范围限制的逻辑。

摘要由CSDN通过智能技术生成

要求通过先选择年份，在根据选择的年份选择当前年的月份，在根据选择的月份选择日期，没选择的月份和日期不允许选择操作

<template>
    <div>
        <el-date-picker v-show="time == 1" v-model="datePickerVisibleYear" type="year" placeholder="输入年份"
            @change="handleYearChange" value-format="yyyy" >
        </el-date-picker>

        <el-date-picker v-show="time == 2" v-model="datePickerVisibleMonth" type="month" placeholder="输入月份"
            ref="timePickerRef" @change="handleMonthChange" value-format="yyyy-MM" :default-value="selectedMonth"
            :picker-options="pickerOptions"></el-date-picker>

        <el-date-picker v-show="time == 3" v-model="datePickerVisibleData" type="date" placeholder="输入日期"
            ref="timePickerRef2" @change="handleDateChange" value-format="yyyy-MM-dd" 
            :default-value="selectedDate" :picker-options="pickerOptionsData"></el-date-picker>
    </div>
</template>
<script>
export default {
    // 组件名字
    name: 'App',
    // 状态数据
    data() {
        return {
            selectedMonth: '',
            selectedDate:'',
            datePickerVisible: null,
            datePickerVisibleYear: null,
            datePickerVisibleMonth: null,
            datePickerVisibleData: null,
            time: 1,
        }
    },
    computed: {
        pickerOptions() {
            var selectedMonth = parseInt(this.selectedMonth);
            console.log(selectedMonth)
            return {
                disabledDate(time) {
                    return time.getFullYear() !== selectedMonth;
                }
            }
        },
        pickerOptionsData() {
            var Year = parseInt(this.selectedDate); // 提取年份并转换为数字
            var Month = parseInt(this.selectedDate.substring(5)); // 提取月份并转换为数字
            return {
                disabledDate(time) {
                    return time.getFullYear() !== Year || time.getMonth() !== Month - 1;
                },
            }
        },
    },
    methods: {
        handleYearChange(value) {
            this.time = 2
            this.selectedMonth = value
            this.datePickerVisible = value
            this.$nextTick(() => {
                var datePicker = this.$refs.timePickerRef;
                datePicker.showPicker();
            });
            if (value == null) {
                this.time = 1
                this.datePickerVisibleYear = null
                this.datePickerVisibleMonth = null
                this.datePickerVisibleData = null
            }
        },
        handleMonthChange(value) {
            this.time = 3
            this.selectedDate = value
            this.datePickerVisible = value
            console.log(this.selectedDate)
            this.$nextTick(() => {
                var datePicker = this.$refs.timePickerRef2;
                datePicker.showPicker();
            });
            if (value == null) {
                this.time = 1
                this.datePickerVisibleYear = null
                this.datePickerVisibleMonth = null
                this.datePickerVisibleData = null
            }


        },
        handleDateChange(value) {
            this.datePickerVisible = value
            console.log(this.datePickerVisible)
            if (value == null) {
                this.time = 1
                this.datePickerVisibleYear = null
                this.datePickerVisibleMonth = null
                this.datePickerVisibleData = null
            }

        },

    }

}
</script>
<style  scoped>
</style>