element UI时间组件两种使用方式

加油,新时代打工!

组件官网:https://element.eleme.cn/#/zh-CN/component/date-picker

先上效果图,如下:

第一种实现方式

html 复制代码
<div class="app-container">
    <el-form
  ref="submitForm"
  :model="submitForm"
  class="form-item table"
  label-width="80px"
  label-position="left"
  :inline="true"
>
  <el-form-item label="开始日期" prop="startDate">
    <el-date-picker
      v-model="submitForm.startDate"
      type="date"
      placeholder="请输入开始日期"
      value-format="yyyy-MM-dd"
      :picker-options="pickerOptionsStart"
    ></el-date-picker>
  </el-form-item>
  <el-form-item label="结束日期" prop="endDate">
    <el-date-picker
      v-model="submitForm.endDate"
      type="date"
      placeholder="请输入开始日期"
      value-format="yyyy-MM-dd"
      :picker-options="pickerOptionsEnd"
    ></el-date-picker>
  </el-form-item>
   <el-form-item>
        <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
        <el-button icon="el-icon-refresh"  size="mini" @click="resetQuery">重置</el-button>
  </el-form-item>
</el-form>
  </div>
  
 <script>
export default {
  name: 'statisticsCountyCrops',
data() {
    return {
      loading: true,
       // 开始结束日期限制
      pickerOptionsStart: {
        disabledDate: time => {
          if (this.submitForm.endDate) {
            return (
              time.getTime() >= new Date(this.submitForm.endDate).getTime()
            );
          }
        }
      },
      // 结束日期限制
      pickerOptionsEnd: {
        disabledDate: time => {
          if (this.submitForm.startDate) {
            return (
              time.getTime() <= new Date(this.submitForm.startDate).getTime()
            );
          }
        }
      },
      submitForm: {
        startDate: '',
        endtDate: ''
      },
    };
  },
  
 methods: {
/* get请求 对象参数*/
    getList(){
      statisticsCountyCrops(this.submitForm).then(res =>{
          this.dataList = res.data;
          this.loading = false;
      }).catch(err =>{
       console.error(err)
        this.loading = false;
      })
    },
  /** 搜索按钮操作 */
    handleQuery() {
      this.getList();
    },
   /** 重置按钮操作 */
    resetQuery() {
      this.daterangeCreateTime = [];
      this.resetForm("submitForm");
    },  
  },
};
</scrpit>

第二种实现方式

html 复制代码
<el-form-item label="查询范围">
        <el-date-picker
          v-model="daterangeCreateTime"
          style="width: 240px"
          value-format="yyyy-MM-dd"
          type="daterange"
          range-separator="-"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
        ></el-date-picker>
      </el-form-item>
     <script>
     export default {
      data() {
    return {
    daterangeCreateTime: [],
      queryParams:{},
      }
      },
        this.queryParams = {};
      if (null != this.daterangeCreateTime && '' != this.daterangeCreateTime) {
        this.queryParams["startDate"] = this.daterangeCreateTime[0];
        this.queryParams["endDate"] = this.daterangeCreateTime[1];
      }
      }
       <script>
相关推荐
Myli_ing18 分钟前
HTML的自动定义倒计时,这个配色存一下
前端·javascript·html
I_Am_Me_1 小时前
【JavaEE进阶】 JavaScript
开发语言·javascript·ecmascript
℘团子এ1 小时前
vue3中如何上传文件到腾讯云的桶(cosbrowser)
前端·javascript·腾讯云
学习前端的小z1 小时前
【前端】深入理解 JavaScript 逻辑运算符的优先级与短路求值机制
开发语言·前端·javascript
星星会笑滴1 小时前
vue+node+Express+xlsx+emements-plus实现导入excel,并且将数据保存到数据库
vue.js·excel·express
前端百草阁1 小时前
【TS简单上手,快速入门教程】————适合零基础
javascript·typescript
彭世瑜1 小时前
ts: TypeScript跳过检查/忽略类型检查
前端·javascript·typescript
Backstroke fish2 小时前
Token刷新机制
前端·javascript·vue.js·typescript·vue
zwjapple2 小时前
typescript里面正则的使用
开发语言·javascript·正则表达式
小五Five2 小时前
TypeScript项目中Axios的封装
开发语言·前端·javascript