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

属于个人笔记，没写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>