vue-vuejs-datepicker 禁用日期与当前日期高亮显示

插件安装就不用多介绍了。官网有，下面简单的介绍一下

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

//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: {
                    customPredictor(date) {
                    if (date.getDate() ===  (new Date()).getDate()) {
                            return true;
                        }
                    }
                },
                //设置当前日期之后不能选中
                disabledDates: {
                    customPredictor(date) {
                    if (date.getTime() > (new Date()).getTime()) { 
                            return true;
                        }
                    }
                },
            }
        },
        props : {
            dateValue : {
                type : String,
                default : function(){
                    return ''
                }
            },
            placeholder : {
                type : String,
                default : function(){
                    return '开始日期'
                }
            }
        },
        watch:{
            dateValue : function(val){
                this.curDate = val;
            }
        },
        components : {
            DatePicker
        },
        methods : {
            changeDate (data){
                if(data){
                    this.curDate = this.$VUtils.dateFormat(data,'yyyy-MM-dd');
                }else {
                    this.curDate = '';
                }
                this.$emit('changeDate',this.curDate);
            },
            clearDate (){
                this.curDate = '';
                this.$emit('clearDate');
            },
        }
    }
</script>

手敲代码不容易  ，一块两块也是爱！