vue 日期不能选择某一天之前的日期

vue  日期不能选择某一天之前的日期(合同的续签)

1.在组件中添加方法,:picker-options="pickerOptions"

<el-date-picker
   v-model="form.renewEndDate"
   :picker-options="pickerOptions"
   type="date"
   placeholder="选择日期"
   value-format="yyyy-MM-dd"
   size="medium"
   clearable
/>

2.在data中定义方法名

data(){
    return {
      pickerOptions: { // 计费日期的约束条件
        disabledDate: this.disabledDate
      }
   }
}

3.在方法中写逻辑

methods:{
  disabledDate(time) {
     return time.getTime() < new Date(date).getTime()
  }  
}  

 

  • 1
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
对于Vue Element的DateTimePicker组件,要禁止某天的某个时间段,你可以使用其`disabledDate`和`disabledTime`属性来实现。 首先,你可以通过设置`disabledDate`属性来禁止选择某天。该属性接受一个函数,函数的参数是当前日期,你可以根据需要返回一个布尔值来判断是否禁用该日期。例如,如果要禁用2022年1月1日,可以这样设置: ```vue <template> <el-date-picker v-model="date" :picker-options="pickerOptions" ></el-date-picker> </template> <script> export default { data() { return { date: null, pickerOptions: { disabledDate(time) { // 禁用2022年1月1日 return time.getFullYear() === 2022 && time.getMonth() === 0 && time.getDate() === 1; } } }; } }; </script> ``` 接下来,你可以通过设置`disabledTime`属性来禁止选择某个时间段。该属性也接受一个函数,函数的参数是当前时间和日期,你可以根据需要返回一个对象来指定禁用的时间段。例如,如果要禁用上午9点到下午2点之间的时间,可以这样设置: ```vue <template> <el-time-picker v-model="time" :picker-options="pickerOptions" ></el-time-picker> </template> <script> export default { data() { return { time: null, pickerOptions: { disabledTime(time) { // 禁用上午9点到下午2点之间的时间 return { disabledHours: () => { return [9, 10, 11, 12, 13]; }, disabledMinutes: () => { return [0]; }, disabledSeconds: () => { return [0]; } }; } } }; } }; </script> ``` 通过设置这两个属性,你可以禁止某天的某个时间段在Vue Element的DateTimePicker中选择。希望对你有帮助!如果有任何疑问,请随时提问。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值