vue el-date-picker 设置可选近30天且时间范围为7天

最新推荐文章于 2024-08-19 17:10:31 发布

＊且听风吟

最新推荐文章于 2024-08-19 17:10:31 发布

阅读量2k

点赞数 2

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

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

版权

本文介绍了如何使用Vue.js的el-date-picker组件，来限定用户只能选择最近30天内的日期，并且所选的两个日期之间的最大时间差不能超过7天。内容包括配置快捷选项、限制日期范围以及展示的页面效果。

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

对 el-date-picker 限制：

默认选择时间范围为最近一天；
设置快捷选项：最近1天、最近3天、最近7天等；
限制只能选择今天以及今天以前30天；
选择一个时间之后，另一个时间范围限制只能选择7天以内。

日期时间选择器组件：

<el-date-picker v-model="actDate" :picker-options="pickerOptions" type="datetimerange" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" value-format="timestamp"></el-date-picker>

设置 pickerOptions：

export default {
   
  data () {
   
    return {
   
      choiceDate: '',
      // 默认日期选择是最近一天
      actDate: [new Date().getTime() - 3600 * 1000 * 24 * 1, new Date().getTime()],
      pickerOptions: {
   
        shortcuts: [{
   
          text: '最近15分钟',
          onClick (picker) {
   
            const end = new Date();
            const start = new Date();
            start.setTime(start.getTime() - 60 * 1000 * 15 * 1);
            picker.$emit('pick', [start, end])