elemnt ui 时间选择器。 当前日期往前推6个月以前的的不可选择

<div class="hengxiang">
                    <div class="lefttitle titlesBt" style="color:#15a66a;">
                      <div>建单起始日期</div>
                      <el-date-picker class="elinputs" type="date" placeholder="请输入起始日" v-model="formInline.startDate"
                        value-format="yyyy-MM-dd" clearable :picker-options="pickerOptionsStart"></el-date-picker>
                    </div>
                    <div class="lefttitle titlesBt" style="color:#15a66a;margin-left:10%;">
                      <div>建单结束日期</div>
                      <el-date-picker class="elinputs" type="date" placeholder="请输入结束日" v-model="formInline.endDate"
                        value-format="yyyy-MM-dd" clearable :picker-options="pickerOptionsEnd"></el-date-picker>
                    </div>
                  </div>

return里面

data() {
    return {
      // 时间选择禁用
      pickerOptionsStart: {
        disabledDate(time) {
          // 当前日期往前推6个月
          let curDate = (new Date()).getTime();
          let three = 180 * 24 * 3600 * 1000;
          let sixMonthsAgo = curDate - three;
          return time.getTime() < sixMonthsAgo;;
        }
      },
      pickerOptionsEnd: {
        disabledDate(time) {
          return time.getTime() > Date.now();//如果没有后面的-8.64e7就是不可以选择今天的 
          // return time.getTime() < Date.now(); //只可以选择今天之后
          // return time.getTime() < Date.now() - 8.64e7;//只可以选择今天之后包括今天
        }
      },

在这里插入图片描述
效果图
在这里插入图片描述

  • 2
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
如果您正在使用Element UI的DatePicker组件,您可以使用`picker-options`属性来限制开始和结束日期之间的差异。 例如,如果您要让结束日期最多比开始日期晚3小时(即180分钟),则可以使用以下代码: ```html <el-date-picker v-model="startDate" type="date" :picker-options="pickerOptions" :default-value="startDate" @change="updateEndDate" ></el-date-picker> <el-date-picker v-model="endDate" type="date" :picker-options="pickerOptions" :default-value="endDate" ></el-date-picker> ``` ```javascript data() { return { startDate: new Date(), endDate: new Date(), pickerOptions: { disabledDate(date) { return date.getTime() < Date.now() - 1000 * 60 * 180; // 结束日期最早是开始日期+180分钟 } } }; }, methods: { updateEndDate() { const minDate = new Date(this.startDate); minDate.setMinutes(minDate.getMinutes() + 180); // 最小日期是开始日期+180分钟 this.$refs.endDate.datePickerOptions.minDate = minDate; } } ``` 在上面的代码中,我们通过在`pickerOptions`对象中定义`disabledDate`函数来限制结束日期的最小值。如果结束日期早于开始日期加上180分钟,那么它就会被禁用。 我们还定义了一个`updateEndDate`方法,在开始日期发生变化时调用。这个方法会根据当前选择的开始日期,更新结束日期选择器的最小日期。 请注意,这里使用了`$refs`来引用结束日期选择器,并且将`minDate`设置为`datePickerOptions`对象的属性。这是因为DatePicker组件的picker-options属性是不可变的,所以我们需要通过引用来更新它。 如果您使用的是其他JavaScript日期选择器库,可以尝试查看其文档,以了解如何设置最小和最大日期

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值