iView + Vue，DatePicker选择日期格式处理与根据日期查询表单数据

ゝ一世哀愁。 2023-06-23 13:15 11阅读 0赞

属于个人笔记，没写demo，直接从个人的项目上面截取一部分

1.DatePicker里面的日期格式是国际的，要用format修改其中的格式

2.日期范围选择查询表单数据展示，把日期转化成秒进行大小，比较就可以了date.getTime()

3.要先判断startTime和endTime是否都存在然后在操作单个

<template>
    <div>
    <div class="info_option_select">
            开始日期：<DatePicker type="datetime" placeholder="请选择开始日期" format="yyyy-MM-dd HH:mm:ss"
                             @on-change="startTimeChange" :options='startTimeOptions' v-model="param.startTime"></DatePicker>
          </div>
          <div class="info_option_select">
            结束日期：<DatePicker type="datetime" placeholder="请选择结束日期" format="yyyy-MM-dd HH:mm:ss"
                             @on-change="endTimeChange" :options = 'endTimeOptions' v-model="param.endTime"></DatePicker>
          </div>
          <Button @click="searchData">查询</Button>
    </div>
    </template>
    <script>
      import Pagers from "../page/page";
      export default {
        name: "match",
        data() {
          return {
            page: {currentPage: 1, onePageCount: 3, totalRecords: 5},
            data: [
              {
                hy:'水电气',
                cldz:'美公司',
                zldz:'创新园',
                datetime:'2019-12-21 16:13:43',
                zt:'0'
              },
              {
                hy:'快递',
                cldz:'有限公司',
                zldz:'产业园区',
                datetime:'2019-12-18 22:23:43',
                zt:'0'
              },
              {
                hy:'建筑',
                cldz:'科技有限公司',
                zldz:'创新园',
                datetime:'2019-12-19 10:20:10',
                zt:'1'
              }
            ], // 暂时供页面静态显示
            list: [], // 需要展示数据
            param: {
              hy: '',
              zt: '',
              startTime:'',
              endTime:''
            },
            startTimeOptions:{},//开始时间操作
            endTimeOptions:{},//结束时间操作
            hyList: [
              {
                value: '100001',
                label: '水电气'
              },
              {
                value: '100002',
                label: '快递'
              },
              {
                value: '100003',
                label: '建筑'
              }
            ]
          }
        },
        mounted() {
          this.list = this.data.slice(0, this.page.onePageCount);
        },
        methods: {
          searchData() {
            this.list = [];
            if (this.param.hy || this.param.zt||this.param.startTime||this.param.endTime) {
              for (let i = 0; i < this.data.length; i++) {
                let hy = this.data[i].hy;
                let zt = this.data[i].zt==0?'正常':'错误';
                //点击查询按钮时进行的日期格式处理
                let datetime = new Date(this.data[i].datetime).getTime();
                let startTime = new Date(this.param.startTime).getTime();
                let endTime = new Date(this.param.endTime).getTime();
                if (this.param.hy && hy.indexOf(this.param.hy) > -1) {
                  this.list.push(this.data[i]);
                  continue;
                }
                if (this.param.zt && zt.indexOf(this.param.zt) > -1) {
                  this.list.push(this.data[i]);
                }
                //点击查询按钮时进行的日期验证
                if(startTime && endTime ) {
                  if(datetime > startTime && datetime < endTime)
                  this.list.push(this.data[i]);
                  continue;
                }else if (startTime && datetime>startTime) {
                    console.log("1234")
                    this.list.push(this.data[i]);
                    console.log("4321")
                  }else if (endTime && datetime<endTime) {
                    console.log("********")
                    this.list.push(this.data[i]);
                  }
    
              }
              this.page.currentPage = 1;
              this.page.totalRecords = this.list.length
            } else {
              this.list = this.data.slice(0, this.page.onePageCount);
              this.page.currentPage = 1;
              this.page.totalRecords = this.data.length
            }
    
          },
          startTimeChange(e){//设置开始时间
            this.param.startTime = e;
            this.endTimeOptions = {
              disabledDate:date =>{
                //   disabledDate 是函数，参数为当前的日期，需要返回 Boolean 是否禁用这天。
                let startTime = this.param.startTime ? new Date(this.param.startTime).valueOf()  : '';
                return date && (date.valueOf() < startTime)
              }
            }
          },
          endTimeChange(e){//设置结束时间
            this.param.endTime = e;
            let endTime = this.param.endTime  ? new Date( this.param.endTime ).valueOf()-1*24*60*60*1000 :'';
            this.startTimeOptions = {
              disabledDate:date =>{
                return date && (date.valueOf() >endTime);
              }
            }
          }
        },
    
      }
    </script>