el-date-picker 日期时间选择器限制时间选择范围

最新推荐文章于 2024-05-29 18:08:33 发布

＊且听风吟

最新推荐文章于 2024-05-29 18:08:33 发布

阅读量5.1k

点赞数 4

分类专栏： # Vue 2.x 文章标签： vue.js 前端 javascript

本文链接：https://blog.csdn.net/HH18700418030/article/details/122168692

版权

需求：设置 el-date-picker 日期时间选择器的时间跨度。

限制时间跨度15天

<template>
  <div>
    <el-date-picker v-model="dateTimeRange" type="datetimerange" :picker-options="pickerOptions" :default-time="defaultTime" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" :value-format="valueFormat" :format="format" popper-class="cusDatetimer" align="left">
    </el-date-picker>
  </div>
</template>

<script>
export default {
   
  data () {
   
    return {
   
      dateTimeRange: [], // 绑定时间的值
      defaultTime: ['00:00:00', '23:59:59'], // 选择日期后的默认时间
      valueFormat: "yyyy-MM-dd HH:mm:ss", // 绑定值的格式
      format: "yyyy/MM/dd HH:mm:ss", // 日期显示格式
      pickerOptions: {
    // 配置项
        shortcuts: [{
    // 设置快件选项
          text: "最近7天",
          onClick: picker => {
   
            const end = new Date();
            const start = this.getBeforeDate(new Date(), 6)
            picker.$emit("pick", [start, end])
          }
        },
        {
   
          text: "最近30天",
          onClick: picker => {
   
            const end = new Date();
            const start = this.getBeforeDate(new Date(), 30)
            picker.$emit("pick",