2024年最全vue-vuejs-datepicker 禁用日期与当前日期高亮显示，2024年最新蚂蚁金服一共几轮面试

最后

由于文档内容过多，为了避免影响到大家的阅读体验，在此只以截图展示部分内容

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

假如有什么不懂的可以私信

//npm安装
npm install vuejs-datepicker --save 

//引入组件
import Datepicker from 'vuejs-datepicker';

//实例化组件
export default {

  // ...

  components: {

    Datepicker

  }

  // ...

}

我直接把我的组件代码搬过来了，里面有注释，稍微看过这个组件的应该能看懂参数怎么用

<style lang="less">
    @import (reference) "../../theme/var/var";

    .com-date-picker{
        display: inline-block;

        input{
            width: 100px;
            height: 28px;
            color: @color-666;
            font-size: 12px;
            text-align: center;
            background: #fff;
            border: 1px solid @default-input-border-color;
            border-radius: @border-radius-4;
            outline: none;
        }

        &.has-date {
            input {
                padding-right: 20px;
                text-indent: 5px;
            }

            .vdp-datepicker__clear-button {
                position: absolute;
                top: 2px;
                right: 0;
                display: inline-block;
                padding-left: 5px;
                width: 20px;
                text-align: left;
            }
        }

        .vdp-datepicker__calendar{
            width: 280px;
            white-space: normal;
        }

        .cell{
            height: 36px;
            line-height: 36px;
        }
        .cell.selected{
            background: @color-primary;
            color: #fff;
        }
    }
</style>

<template>
    <div :class="['com-date-picker', curDate.length > 0 ? 'has-date' : '']">
        <date-picker :value="dateValue"
                     :language="zh"
                     format="yyyy-MM-dd"
                     :placeholder="placeholder"
                     :clear-button="ifShowClearBtn"
                     :disabledDates="disabledDates"
                     :highlighted="highlightedFn"
                     @selected="changeDate($event)"
                     @cleared="clearDate">
        </date-picker>
    </div>
</template>

<script>
    import DatePicker from 'vuejs-datepicker'
    import {en, zh} from 'vuejs-datepicker/dist/locale'

    export default {
        data (){
            return {
                curDate : '',
                ifShowClearBtn : true,
                en : en,
                zh : zh,
                //高亮当前日期
                highlightedFn: {
最后
--

**[开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】](https://bbs.csdn.net/forums/4304bb5a486d4c3ab8389e65ecb71ac0)**

> 最后写上我自己一直喜欢的一句名言：`世界上只有一种真正的英雄主义就是在认清生活真相之后仍然热爱它`
> ![](https://imgconvert.csdnimg.cn/aHR0cHM6Ly9tbWJpei5xcGljLmNuL21tYml6L3lnVUFXMUlsN2FRMlNlT2VueEF1QTMxNDlEQmRDMlU0bzBpY21pYVloa2szeXVFZmNydGV4MGYxSWljdFJGNU9RYUw5TWJHb0hiTmtWQlBQUGliTng0RWJpY0EvNjQw?x-oss-process=image/format,png)



NDlEQmRDMlU0bzBpY21pYVloa2szeXVFZmNydGV4MGYxSWljdFJGNU9RYUw5TWJHb0hiTmtWQlBQUGliTng0RWJpY0EvNjQw?x-oss-process=image/format,png)