DatePicker动态设置picker-options 中的disabledDate属性操作;

58 篇文章 5 订阅
36 篇文章 1 订阅

一、场景:
有两个时间选择器A和B。A的时间任意选,B的时间必须选择A之后的时间。此时就需要给B设置可选时间区间,而且是动态的值,既动态设置picker-options 中的disabledDate
在这里插入图片描述
在这里插入图片描述

二、代码片段

html:

          <el-col :span="8">
            <el-form-item label="A时间" prop="Atime">
              <el-date-picker value-format="yyyy-MM-dd" v-model="Atime" type="date" placeholder="选择日期">
              </el-date-picker>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="延期至:" prop="Btime">
              <el-date-picker value-format="yyyy-MM-dd" v-model="Btime" type="date" placeholder="选择日期" :picker-options="setDateRange">
              </el-date-picker>
            </el-form-item>
          </el-col>

data:

data() {
   	return {
            	Atime:'',
                Btime:'',
                setDateRange: {
                    disabledDate: this.disabledDate // 这是一个方法
                }
            }
        },

methods:

methods:{
    disabledDate (time) {
      // 当时间小于A时间  就是不可选
      return time.getTime() < new Date(this.Atime).getTime()

	  // 上方的new Date(this.Atime).getTime()  是将日期格式'2022-02-10' 转成时间戳 1589068800000
    },

}

三、 拓展:如何用js将日期转换成时间戳

new Date('2022-06-01').getTime()

四、时间戳转日期方法1

function getTime(dateStr){
  var date = new Date(dateStr);
  var Month = date.getMonth() + 1;
  var Day = date.getDate();
  var Y = date.getFullYear() + '-';
  var M = Month < 10 ? '0' + Month + '-' : Month + '-';
  var D = Day + 1 < 10 ? '0' + Day : Day;
  return Y + M + D;
}

getTime(1654074822778)   //就会得到 '2022-06-01' 注意参数传的是数字不是字符串

有效的请点赞收藏支持一波!

  • 1
    点赞
  • 4
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值