vue el-date-picker日期选择器

el-date-picker日期选择器

el-date-picker 日期禁选

下面这是 禁选当天以后日期。

  :picker-options="pickerOptions" 属性

1、pickerOptions: {
       disabledDate(date){
              let zero=new Date().setHours(0, 0, 0, 0);
              if(date.getTime() > zero){
                  return true;
              }
              return false;
          }
      },
2、pickerOptions:{
        disabledDate(time) {
            return time.getTime() > Date.now();
          }
      },

下面展示一些 禁选当天以后及180天内时间范围。

  :picker-options="pickerOptions" 属性

pickerOptions: {
        disabledDate(time) {
          let curDate = (new Date()).getTime();
          let three = 180 * 24 * 3600 * 1000;
          let threeMonths = curDate - three;
          return time.getTime() > Date.now() || time.getTime() < threeMonths;;
          }
      },

下面展示一些 选择前后七天且禁选当天以后 /选择范围在30天 且只能选七天。

 :picker-options="pickerOptions" 属性

choiceDate ：null，
1、选择前后七天且禁选当天以后
pickerOptions: {
                onPick: ({ maxDate, minDate }) => {
                    this.choiceDate = minDate.getTime()
                    if (maxDate) this.choiceDate = ''
                    },
                    disabledDate: time => {
                    if (this.choiceDate) {
                        const one = 7 * 24 * 3600 * 1000
                        const minTime = this.choiceDate - one
                        const maxTime = this.choiceDate + one
                        return (
                        time.getTime() < minTime ||
                        time.getTime() > maxTime ||
                        time.getTime() > Date.now()
                        )
                    } else {
                        return time.getTime() > Date.now()
                    }
                }
            },
     
    2、选择范围在30天 且只能选七天
    pickerOptions: {
                onPick: ({ maxDate, minDate }) => {
                this.choiceDate = minDate.getTime()
                if (maxDate) this.choiceDate = ''
                },
                disabledDate: time => {
                if (this.choiceDate) {
                    const one = 7 * 24 * 3600 * 1000
                    const minTime = this.choiceDate - one
                    const maxTime = this.choiceDate + one
                    return (
                    time.getTime() < minTime ||
                    time.getTime() > maxTime ||
                    time.getTime() > Date.now()
                    )
                } else {
                    let curDate = (new Date()).getTime();
                    let three = 30 * 24 * 3600 * 1000;
                    let threeMonths = curDate - three;
                    return time.getTime() > Date.now() || time.getTime() < threeMonths;
                }
              }
            },
       

获取时间

       // 获取当天时间
      getNowFormatDate() {
            let date = new Date();
            let separator = "-";
            let year = date.getFullYear();
            let month = date.getMonth() + 1;
            let strDate = date.getDate();
            if (month >= 1 && month <= 9) {
                month = "0" + month;
            }
            if (strDate >= 0 && strDate <= 9) {
                strDate = "0" + strDate;
            }
            let currentDate = year + separator + month + separator + strDate;
            return currentDate;
      },
	  export const getNowDate = () => {
		  var curDate = new Date()
		  var preDate = new Date(curDate.getTime())
		  var pre =
		    new Date(+preDate + 8 * 3600 * 1000)
		      .toISOString()
		      .replace(/T/g, ' ')
		      .replace(/\.[\d]{3}Z/, '')
		      .substring(0, 10) +
		    ' ' +
		    '00:00:00'
		
		  return pre
		}

      // 1、获取N天前日期（格式为 yyyy-MM-dd）2、获取N天前日期（格式为 yyyy-MM-dd HH:mm:ss）
      1、getBeforeDate(dayNumber){
            let n = dayNumber;
            let d = new Date();
            let s = ''
            let year = d.getFullYear();
            let mon=d.getMonth()+1;
            let day=d.getDate();
            if(day <= n){
                if(mon>1) {
                    mon=mon-1;
                }else {
                    year = year-1;
                    mon = 12;
                }
            }
            d.setDate(d.getDate()-n);
            year = d.getFullYear();
            mon=d.getMonth()+1;
            day=d.getDate();
            s = year+"-"+(mon<10?('0'+mon):mon)+"-"+(day<10?('0'+day):day);
            return s;
      },
      2、getDay(day) {
        var today = new Date();
        var targetday_milliseconds = today.getTime() + 1000 * 60 * 60 * 24 * day;
        today.setTime(targetday_milliseconds);
        var tYear = today.getFullYear();
        var tMonth = today.getMonth();
        var tDate = today.getDate();
        tMonth = this.doHandleMonth(tMonth + 1);
        tDate = this.doHandleMonth(tDate);
        return tYear  + '-'+ tMonth + '-' + tDate + ' 00:00:00';
    },
    doHandleMonth(month) {
      var m = month;
      if (month.toString().length == 1) {
        m = "0" + month;
      }
      return m;
    },
    3、export const getPrevFormatDate = () => {
		  var curDate = new Date()
		  var preDate = new Date(curDate.getTime() - 24 * 60 * 60 * 1000 * day)
		  var pre =
		    new Date(+preDate + 8 * 3600 * 1000)
		      .toISOString()
		      .replace(/T/g, ' ')
		      .replace(/\.[\d]{3}Z/, '')
		      .substring(0, 10) +
		    ' ' +
		    '00:00:00'
		
		  return pre
		}