iview ui 日期选择器禁用今天之前和数据返回的日期

最新推荐文章于 2023-12-18 15:40:07 发布

小丑不丑小

最新推荐文章于 2023-12-18 15:40:07 发布

阅读量635

点赞数 3

文章标签： webview vue.js 前端前端框架

本文链接：https://blog.csdn.net/Chuay_zero/article/details/122063894

版权

直接上代码

<template>
    <Row>
        <Col span="12">
            <DatePicker type="date" :options="TestOption" placeholder="Select date" style="width: 200px" @on-open-change="TestOpen"></DatePicker>
        </Col>
    </Row>
</template>
<script>
    export default {
        data () {
            return {
              TestList: ["2021-12-07", "2021-12-05", "2021-12-17", "2021-12-14", "2022-01-14", "2022-12-14","2023-12-14"],//有数据的日期
              TestOption: { disabledDate() {} },//日期选择器禁用
            }
        },
        methods:{
          TestOpen(data) {
            if (data) {
              this.TestOption = {
                disabledDate: date => {
                  //当前年份
                  var DateYear = date.getFullYear();
                  //当前月份
                  var DateMonth =
                      date.getMonth() + 1 < 10
                  ? "0" + (date.getMonth() + 1)
                  : date.getMonth() + 1;
                  //当前日期
                  var DateDay =
                      date.getDate() < 10 ? "0" + date.getDate() : date.getDate();
                  // 将所获得的日期拼接起来，格式为YY-MM-DD
                  var FullDate = DateYear + "-" + DateMonth + "-" + DateDay;
                  //判断，将不存在于接口数据中的日期禁用
                  if (this.TestList.indexOf(FullDate) > -1 || date && date.valueOf() < Date.now() - 86400000) {
                    return DateDay;
                  }
                }
              };
            } else {
              console.log("......");
            }
          },
        }
    }
</script>