基于element封装公共日期选择器

最新推荐文章于 2024-05-08 17:12:52 发布

你的骑士M

最新推荐文章于 2024-05-08 17:12:52 发布

阅读量156

点赞数

分类专栏：前端文章标签：前端 vue.js javascript

本文链接：https://blog.csdn.net/qq_42360279/article/details/128655205

版权

本文档介绍了如何利用Element UI库，结合HTML、JavaScript和SCSS，来封装一个可复用的公共日期选择器组件。该组件适用于前端Vue.js项目，能够提高代码的复用性和样式定制性。

摘要由CSDN通过智能技术生成

基于element封装公共日期选择器

html

<template>
  <div class="time-selection">
    <el-date-picker
      v-model="timeValue"
      type="daterange"
      align="right"
      unlink-panels
      validate-event
      range-separator="-"
      start-placeholder="开始日期"
      end-placeholder="结束日期"
      :picker-options="pickerOptions">
    </el-date-picker>
  </div>
</template>

js

<script>

export default {
   
  name: "KTimeSelection",
  data() {
   
    return {
   
      timeValue: [], // 时间选择绑定值
      pickerOptions: {
   
        disabledDate(time) {
   
          return time.getTime() > Date.now() - 1000 * 3600 * 24;
        },
        shortcuts: [
          {
   
            text: "本月",
            onClick(picker) {
   
              const end = new Date();
              const start = new Date();
              start.setDate(1);
              end.setTime(end.getTime() - 1000 * 3600 * 24);
              picker.$emit("pick", [start, end]);
            },
          },
          {
   
            text: "本季度",
            onClick(picker) {
   
              const end = new Date();
              const start = new Date(