美文网首页
element DatePicker 时间选择控件设置

element DatePicker 时间选择控件设置

作者: 明眸yh | 来源:发表于2020-12-15 14:06 被阅读0次

    element DatePicker 日期选择器实现只能选择当前时间及以后的时间,这个需求经常遇到,做下笔记以便用到的时候查看,方便快捷。


    DatePicker默认选中当前时间

    utils里面封装一个公共的方法,用来获取当前时间

    export function getNowTime() {
      var date=new Date();  
      var year=date.getFullYear(); //获取当前年份  
      var mon=date.getMonth()+1; //获取当前月份  
      var da=date.getDate(); //获取当前日  
      var day=date.getDay(); //获取当前星期几  
      var h=date.getHours(); //获取小时  
      var m=date.getMinutes(); //获取分钟  
      var s=date.getSeconds(); //获取秒
      return year+'-'+mon+'-'+da+ ' '+h+':'+m
    }
    

    组件中引入 getNowTime 公共方法

    import  { getNowTime } from '@/utils/index'  // 引入
    this.$set(this.formData, "turn_time", getNowTime()); //赋值
    

    DatePicker实现只能选择当前时间以后的时间

    :picker-options="pickerOption" 当前时间日期选择器特有的选项
    disabledDate 设置禁用状态,参数为当前日期,要求返回 Boolean

    data() {
      return {
         pickerOption: {
            disabledDate(time) {
              return time.getTime() < Date.now() - 8.64e7;//如果没有后面的-8.64e7就是不可以选择今天的 
            }
         }
      }
    }
    

    DatePicker选中当前日期之前的

    :picker-options="pickerOptions"
    
    pickerOptions: {
       disabledDate(time) {
            return time.getTime() > Date.now() - 8.64e6
        }
    }
    

    相关文章

      网友评论

          本文标题:element DatePicker 时间选择控件设置

          本文链接:https://www.haomeiwen.com/subject/prbigktx.html