首页 资源列表 文章列表

element ui 开始结束日期

在Element UI框架中,实现一个日期选择器,允许用户选择一个起始日期和结束日期,通常可以通过组合使用el-date-picker组件来实现。下面是如何实现的步骤:


1. 引入Element UI

确保你的项目中已经正确引入了Element UI。如果还没有引入,可以通过npm或yarn来安装Element UI:

npm install element-ui --save
# 或者
yarn add element-ui

然后在你的项目中全局或局部引入Element UI:

import Vue from 'vue';
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
 
Vue.use(ElementUI);

示例代码

<template>
  <div>
    <el-date-picker
      v-model="dateRange"
      type="daterange"
      range-separator="至"
      start-placeholder="开始日期"
      end-placeholder="结束日期"
      :picker-options="pickerOptions">
    </el-date-picker>
  </div>
</template>
 
<script>
export default {
  data() {
    return {
      dateRange: '', // 绑定的日期范围值,格式通常是[开始日期, 结束日期]
      pickerOptions: {
        shortcuts: [{
          text: '最近一周',
          onClick(picker) {
            const end = new Date();
            const start = new Date();
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
            picker.$emit('pick', [start, end]);
          }
        }, {
          text: '最近一个月',
          onClick(picker) {
            const end = new Date();
            const start = new Date();
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
            picker.$emit('pick', [start, end]);
          }
        }]
      }
    };
  }
};
</script>


0.190667s