[JavaScript知识库] element 时间选择器限制选择范围

开发: C++知识库 Java知识库 JavaScript Python PHP知识库人工智能区块链大数据移动开发嵌入式开发工具数据结构与算法开发测试游戏开发网络协议系统运维
教程: HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程 C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程
数码: 电脑笔记本显卡显示器固态硬盘硬盘耳机手机 iphone vivo oppo 小米华为单反装机图拉丁

-> JavaScript知识库 -> element 时间选择器限制选择范围 -> 正文阅读

[JavaScript知识库]element 时间选择器限制选择范围

限制用户选择时间的范围，如下图所示：?

//时间选择器   picker-options属性就是限制选择时间的范围   

<el-date-picker
        class="input-width"
        size="small"
        v-model="formPar.periodTime"
        type="month"
        value-format="yyyy-MM"
        format="yyyy-MM"
        placeholder="选择日期"
        :picker-options="pickerOptions">
</el-date-picker>

data(){
    return{
           pickerOptions: {
            //注意this指向问题
            disabledDate: (time) => {
              var start = new Date(this.startTime);
              var end = new Date(this.endTime);
              return (
                time.getTime() < start.getTime() || time.getTime() > end.getTime()
              );
            },
          },
          startTime:'',
          endTime:''
     }
}


methods: {
        //从接口去获取所要限制时间选择的范围，如果你是固定的也可以直接在上面定义
        getContractDetail() {
              contractDetail(this.contractId).then((res) => {
              this.startTime = res.data.startTime;
              this.endTime = res.data.endTime;
             });
        },

}