zoukankan      html  css  js  c++  java
  • elementUI实现日期框选中项文本高亮

    需求:由于月份选择框会给默认接收的月份文本加入高亮显示,但需求要求将选中的月份标记高亮展示。

    实现:使用elementUI的日期选择器提供的下拉框样式配置,并改写对应的样式实现。

    懒得说话,直接上代码:

    <template>
        <div>
            <dataPickSelf
                size='mini'
                v-model="scope.row.dateTime"
                type="month"
                :picker-options="pickerOptions"
                :clearable="false"
                :popper-class='dataPick'
                value-format="yyyy-MM"
                ref="dateMonth"
                >
            </dataPickSelf>
        </div>
    </template>
    <script>
    import {DatePicker} from 'element-ui';
    export default {
        data() {
            return {
                maxTime: '',
                dataPick: 'monthtime',
                pickerOptions:{
                    disabledDate: time => {
                        return this.timeRe(time);
                    },
                }
            }
        },
        components: {
           dataPickSelf:DatePicker
        },
        methods: {
            timeRe(time) {
                return time.getTime() >=new Date(this.maxTime).getTime() ;
            }
        }
    }
    </script>
    <style lang="less" scoped>
    .monthtime .el-month-table td.current:not(.disabled) .cell{
        font-weight: bold !important;
        color:#182452 !important;
    }
    .monthtime .el-month-table td.today .cell{
        color: #182452;
    }
    .monthtime .el-month-table td.current ~ td.today .cell{
        color: #606266;
    }
    .monthtime .el-month-table td.current ~ td.disabled.today .cell{
        color: #C0C4CC !important;
    }
    .monthtime .el-month-table tr td.disabled.today .cell{
        color: #C0C4CC !important;
    }
    .monthtime .el-month-table tr td.disabled.today .cell{
        color: #C0C4CC !important;
    }
    .monthtime .el-month-table td.today .cell {
        font-weight: normal;
    }
    .monthtime .el-month-table td.today .cell {
        color: #606266;
    }
    </style>

    效果展示图:

    默认是显示当前月,既【三月】是高亮的,选择【四月】的后,四月文本显示高亮。

  • 相关阅读:
    poj--2031--Building a Space Station(prime)
    nyoj--364--田忌赛马(贪心)
    nyoj--496--巡回赛(拓扑排序)
    nyoj--1100--WAJUEJI which home strong!(bfs)
    hdoj--5625--Clarke and chemistry(枚举)
    poj--1753--Flip Game(dfs好题)
    poj--1101--The Game(bfs)
    冒泡排序
    php常见错误
    php乱码
  • 原文地址:https://www.cnblogs.com/min77/p/14511750.html
Copyright © 2011-2022 走看看