zoukankan      html  css  js  c++  java
  • elementUI实现日期框之月份选择器选中项高亮(一)

    elementUI实现月份选择器选中项高亮

    实现点:
    1、只允许选择当前年的月份,隐藏了年份左右切换按钮
    2、当前选中月份标记背景色
    3、确认选定的值时触发事件dateChange
    4、DatePicker 下拉框样式调整
    5、DatePicker 下拉框之单元格文本中英文切换,默认展示的中文(使用了国际化文件)

    html

    <div class="operation-area">
    	<div class="date-range">
    	<span>期间:</span>
    	<div class="month-picker">
    		<dataPickSelf
    		v-model="selectDate"
    		type="month"
    		:picker-options="pickerOptions"
    		value-format="yyyy-MM"
    		@change="dateChange"
    		:clearable="false"
    		:popper-class='dataPick'
    		ref="dateMonth"
    		>
    		</dataPickSelf>
    		</div>
    	</div>
    </div>
    

    js

    <script>
    import {DatePicker} from 'element-ui';
    import lang from 'element-ui/lib/locale/lang/en';
    import zhLang from 'element-ui/lib/locale/lang/zh-CN';
    import locale from 'element-ui/lib/locale';
    export default {
        data() {
            return {
                selectDate: new Date(),
                dataPick: 'date-default',
                pickerOptions:{
                    disabledDate: time => {
                        return this.timeRe(time); 
                    }
                },
            }
        },
        created() {
        },
        mounted() {
            locale.use(lang); // 英文
        },
        methods: {
            timeRe(time) {
                return new Date(time).getFullYear() != new Date().getFullYear() ;
            },
            dateChange(month) {
                console.log('选择月份', month);
            }
        },
        components: {
            dataPickSelf:DatePicker
        },
        beforeDestroy() {
            locale.use(zhLang)
        }
    }
    </script>
    

    css

    .operation-area{
        position: absolute;
        top: 0;
        display: flex;
        align-items: center;
        right: 140px;
        font-size: .0625rem;
        color: #333333;
        .date-range{
            display: flex;
            justify-content: flex-start;
            align-items: center;
        }
        .month-picker{
            position: relative;
        }
    }
    <style>
    .date-default .el-date-picker__next-btn,
    .date-default .el-date-picker__prev-btn{
        display: none;
    }
    .date-default .el-month-table td.current:not(.disabled) .cell{
        font-weight: bold !important;
        background-color: #3266E8;
        color: #FFFFFF;
    }
    .date-default .el-month-table td.today .cell{
        color: #1D4ABC;
    }
    .date-default .el-month-table td.current ~ td.today .cell{
        color: #606266;
    }
    .date-default .el-month-table td.current ~ td.disabled.today .cell{
        color: #C0C4CC !important;
    }
    .date-default .el-month-table tr td.disabled.today .cell{
        color: #C0C4CC !important;
    }
    .date-default{
        font-size: 14px;
    }
    </style>
    
  • 相关阅读:
    Web.xml配置详解
    JAVA的StringBuffer类
    工作空间造成的javaweb项目无法新建
    典型程序实现代码汇总(1)
    TCP/UDP常见端口参考
    HTTP状态码详解
    struts2的java.lang.NoSuchMethodException异常处理
    python学习之路-6 冒泡算法、递归、反射、os/sys模块详解
    python学习之路-5 基础进阶篇
    python学习之路-4 内置函数和装饰器
  • 原文地址:https://www.cnblogs.com/min77/p/14721807.html
Copyright © 2011-2022 走看看