iview 日期时间选择器动态限制可选范围

最新推荐文章于 2023-10-04 15:05:34 发布

转载最新推荐文章于 2023-10-04 15:05:34 发布 · 1.7k 阅读

4 ·

CC 4.0 BY-SA版权

原文链接：https://blog.youkuaiyun.com/weixin_43735321/article/details/115554932

文章标签：

#vue #javascript #iviews

前端同时被 2 个专栏收录

19 篇文章

订阅专栏

Vue

5 篇文章

订阅专栏

本文介绍了如何在iview中使用日期时间选择器动态限制可选范围，通过设置`disabledDate`实现从当前时间-30天到+30天的选择限制，并展示了相关代码示例和修改后的eslint规范。同时，提供了遇到的问题及解决方案，帮助开发者解决类似问题。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

文章目录

- iview 日期时间选择器动态限制可选范围

iview 日期时间选择器动态限制可选范围

引用：原作者地址

原作者地址效果图：
在这里插入图片描述

因为本身自己的代码使用了 eslint 插件，因此在原来的基础上又规范了一下。

	<date-picker type="datetimerange"
	             ref="date"
	             format="yyyy-MM-dd HH:mm:ss"
	             placeholder="选择日期"
	             :options="dateOption"
	             @click.native="nativeClick"  >
	</date-picker>

注：

如果需要绑定其他数据的吧，可以使用v-model，这样可以获取到数据，进而可以使用echarts组件等等进行图表展示。
如果想要绑定change事件，则可以使用 @on-change

	data () {
		dateOption: {},
	}

	methods:{
	 nativeDateClick() {
      const target = (this.$refs.date).$refs.pickerPanel;
      const { from, to } = target.rangeState;
      target.handlePickClick = (() => {
        const selecting = target.rangeState;
        const from1 = target.rangeState.from;
        if (from1 && selecting) {
          this.dateOption = {
            disabledDate(value) {
              return disabledDate_start_end_native(value, from1);
            },
          };
        }
      });
      if (from && !to) {
        this.dateOption = {
          disabledDate(value) {
            return disabledDate_start_end_native(value, from);
          },
        };
      } else {
        this.dateOption = {
          disabledDate(value) {
            return value && (value.valueOf() > Date.now() - 86400000);
          },
        };
      }
    },
 }

// 动态限制日期时间选择器的可选范围
function disabledDate_start_end_native(value, from) {
  const startTime = new Date(from);
  const endTime = new Date(from);
  startTime.setDate(from.getDate() - 30);
  endTime.setDate(from.getDate() + 30);
  return !(value >= startTime && value <= endTime) || (value && (value.valueOf() > Date.now() - 86400000));
}