vue element-ui日期组件时间范围

最新推荐文章于 2024-09-16 07:21:38 发布

良辰美景好时光

最新推荐文章于 2024-09-16 07:21:38 发布

阅读量1.5k

点赞数 1

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

本文链接：https://blog.csdn.net/qq_45740503/article/details/123109248

版权

vue 专栏收录该内容

12 篇文章 0 订阅

订阅专栏

vue element-ui日期组件时间范围

1.问题描述
- - - 在使用element-ui el-date-picker组件时，我需要控制日期选择范围，比如开始时间小于结束时间，结束时间大于开始时间
- 代码：
2.问题描述
3.时间转换为String格式方法

1.问题描述

在使用element-ui el-date-picker组件时，我需要控制日期选择范围，比如开始时间小于结束时间，结束时间大于开始时间

在这里插入图片描述

代码：

<el-form-item label="查询开始时间:" prop="startDate">
        <el-date-picker
          v-model="ruleForm.startDate"
          align="right"
          type="date"
          placeholder="选择日期"
          clearable
          value-format="yyyy-MM-dd"
          :picker-options="startTime"
        />
      </el-form-item>
      <el-form-item label="查询结束时间:" prop="endDate">
        <el-date-picker
          v-model="ruleForm.endDate"
          align="right"
          type="date"
          placeholder="选择日期"
          clearable
          value-format="yyyy-MM-dd"
          :picker-options="endTime"
        />
      </el-form-item>

 <script>
export default {
data() {
  return {
    startTime: {
        disabledDate: time => {
          if (this.ruleForm.endDate) {
            return (
              time.getTime() > new Date(this.ruleForm.endDate).getTime()
            )
          }
        }
      },
      endTime: {
        disabledDate: time => {
          if (this.ruleForm.startDate) {
            return (
              time.getTime() < new Date(this.ruleForm.startDate).getTime() - 24 * 3600 * 1000
            )
          }
        }
      }
  }
}
</script>

2.问题描述

还有一种需求是在第一种情况基础上加上时间范围，比如结束时间大于开始时间并且不能大于开始时间加一个月

效果如下

在这里插入图片描述

代码如下

data() {
    return {
      startTime: {
        disabledDate: time => {
          if (this.ruleForm.endDate) {
            return (
              time.getTime() > new Date(this.ruleForm.endDate).getTime() || time.getTime() < new Date(this.ruleForm.endDate).getTime() - 30 * 24 * 3600 * 1000
            )
          }
        }
      },
      endTime: {
        disabledDate: time => {
          if (this.ruleForm.startDate) {
            return (
              time.getTime() < (new Date(this.ruleForm.startDate).getTime() - 24 * 3600 * 1000) || time.getTime() > (new Date(this.ruleForm.startDate).getTime() + 30 * 24 * 3600 * 1000)
            )
          }
        }
      },
  }
}

3.时间转换为String格式方法

//返回年月日
function dateFormateYMD(time){
    var date = new Date(time)
    var year = date.getFullYear()
    var month = (date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1)
    var day = (date.getDate() < 10 ? '0' + (date.getDate()) : date.getDate())
    return year + '-' + month + '-' + day
}
//返回时分秒
function dateFormateHMS(time){
    var date = new Date(time)
    var hour = (date.getHours() < 10 ? '0' + date.getHours() : date.getHours())
    var minute = (date.getMinutes() < 10 ? '0' + date.getMinutes() : date.getMinutes())
    var second = (date.getSeconds() < 10 ? '0' + (date.getSeconds()) : date.getSeconds())
    return hour + '-' + minute + '-' + second
}
//返回年月日时分秒
function dateFormateYMDHMS(time){
    var date = new Date(time)
    var year = date.getFullYear()
    var month = (date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1)
    var day = (date.getDate() < 10 ? '0' + (date.getDate()) : date.getDate())
    var hour = (date.getHours() < 10 ? '0' + date.getHours() : date.getHours())
    var minute = (date.getMinutes() < 10 ? '0' + date.getMinutes() : date.getMinutes())
    var second = (date.getSeconds() < 10 ? '0' + (date.getSeconds()) : date.getSeconds())
    return year + '-' + month + '-' + day + '-' + hour + '-' + minute + '-' + second
}