Vue实现日期插件且今天之前日期不可选

最近接手一个新项目，选择日期的，本想着直接拿H5的代码直接复用到PC端，但是想法很美好，现实太残酷哇，Vue引用JQuery日期插件，没有说不好哈，自是太麻烦了，硬是搞了一天没做出来，然后就自己用了Vue-

calendar新写了一份，话不多说，上代码！！！

 

1、首先定义父组件，利用父子传值完成

<roomSelDate1  :allDetaNum="allDetaS" :min="minDate" ></roomSelDate1>

 this.minDate=yesterday.getFullYear() + "-" + (yesterday.getMonth()> 9 ? (yesterday.getMonth() + 1) : "0" + (yesterday.getMonth() + 1)) + "-" +(yesterday.getDate()> 9 ? (yesterday.getDate()) : "0" + (yesterday.getDate()));//设置今天之前日期不可选

2、定义子组件

<template>
   <div class="calendar_sel">
       <label for="orderTime" style="line-height:2.4rem;font-size:1rem;">选择入住时间</label>
        <div class="sel_dates">
            <input type="text" v-model="dateVal" value="" class="demo-input" placeholder="选择您要入住的日期" id="test1" readonly="readonly"  @click="selectDate"><!--readonly="readonly"设置input无法输入-->
            <span class="triangle"></span> <div class="plain-calendar" v-show="show_date"> <!-- 选中的年月 --> 
            <div class="plain-calendar__hd"> 
              <span class="plain-calendar__prev" @click="pickPre(currentYear,currentMonth)">❮</span> 
              <span class="plain-calendar__hd-text">{{currentYear}}年 {{currentMonth}}月</span> 
              <span class="plain-calendar__next" @click="pickNext(currentYear,currentMonth)">❯</span> 
            </div> <!-- /选中的年月 --> 
            <!-- 星期 --> 
            <ul class="plain-calendar__week">
              <li class="plain-calendar__week-item" v-for="(week,index) in weekArray" :key="index">{{week}}</li> 
            </ul> <!-- /星期 --> 
            <!-- /日期 --> 
            <ul class="plain-calendar__date-items"> 
              <li v-for="(item,index) in dates" :key="index" class="plain-calendar__date-item" :class="setClassName(item)" @click="selDate(item,$event,index)">{{item.day.getDate()}}</li> 
            </ul> 
          </div> 
        </div> 
   </div> 
</template>

js代码

 

<script>
import $ from 'jquery'
export default {
props:['allDetaNum'],
    data() {
        return {
            currentYear: 1970,
            currentMonth: 1,
            currentDay: 1,
            currentWeek: 1,
            cellNumber: 42,
            weekArray: [ '日', '一', '二', '三', '四', '五', '六' ],
            dates: [],
            selTimestamp: 0,
            msg1:'',
            disDate:'',

        };
    },
    created() {
        this.initData(this.date);
    },
    
  methods: {     
      selectDate(){
        this.msg1=this.allDetaNum//接收到的后台日期
        this.show_date=true
        $('.room_sel_date .plain-calendar').show()
        this.disDate =msg1.filter(e=>e.mark==false).map(e=>e.date) //选出无法点击的日期
   }, 
    initData(defaultDate) { 
    let date; 
     if (defaultDate) { 
     date = new Date(this.formatDate(new Date(defaultDate).getFullYear(), new Date(defaultDate).getMonth() + 1, 1)); 
    } else { 
     let now = new Date(), d = new Date(this.formatDate(now.getFullYear(), now.getMonth(), 1)); 
     d.setDate(this.cellNumber); date = new Date(this.formatDate(d.getFullYear(), d.getMonth() + 1, 1)); 
   } 
   this.currentYear = date.getFullYear(); 
   this.currentMonth = date.getMonth() + 1; // 0~11
   this.currentDay = date.getDate(); 
   this.currentWeek = date.getDay(); // 0~6  
   let str = this.formatDate(this.currentYear, this.currentMonth, this.currentDay); 
   this.dates.length = 0;
   //初始化本周 
   for (let i = this.currentWeek; i >= 0; i--) { 
     let d = new Date(str); 
     d.setDate(d.getDate() - i); 
     let dateObject = {}; 
     dateObject.day = d; 
     this.dates.push(dateObject); 
   } 
  //其他周 
  for (let i = 1; i < this.cellNumber - this.currentWeek; i++) { 
    let d = new Date(str); 
    d.setDate(d.getDate() + i); 
    let dateObject = {}; 
    dateObject.day = d; 
    this.dates.push(dateObject); 
   } 
 }, 
// 上个月 
 pickPre(year, month) { 
   let d = new Date(this.formatDate(year, month, 1)); 
   d.setDate(0); 
   this.initData(this.formatDate(d.getFullYear(), d.getMonth() + 1, 1)); 
 }, 
// 下个月  
pickNext(year, month) { 
  let d = new Date(this.formatDate(year, month, 1)); 
  d.setDate(this.cellNumber);  
  this.initData(this.formatDate(d.getFullYear(), d.getMonth() + 1, 1)); 
 }, 
pad(number, length) { 
  let source = number, pre = '', negative = source < 0, string = Math.abs(source).toString(); 
  if (string.length < length) { 
   pre = new Array(length - string.length + 1).join('0'); 
  } 
  return (negative ? '-' : '') + pre + string; 
 }, 
// 返回 yyyy-MM-dd 格式的字符串  
formatDate(year, month, day) { 
 return this.pad(year) + '/' + this.pad(month, 2) + '/' + this.pad(day, 2); 
}, 
// 检查日期是否在[min,max]之间 
checkLimit: function(dateObject) { 
  if (this.min) {  
   if (dateObject.day.getTime() - new Date(this.min) <= 0) { 
    return true; } 
  } 
   if (this.max) { 
      if (dateObject.day.getTime() - new Date(this.max) >= 0) { 
          return true; 
        }
    } 
  return false; 
}, 
// 根据节点的日期设置不同className  
setClassName(dateObject) { 
  var showDate=dateObject.day.getFullYear() + "-" + (dateObject.day.getMonth()> 9 ? (dateObject.day.getMonth() + 1) : "0" + (dateObject.day.getMonth() + 1)) + "-" +(dateObject.day.getDate()> 9 ? (dateObject.day.getDate()) : "0" + (dateObject.day.getDate())); 
   for(var i=0;i<this.disDate.length;i++){  
     if(this.disDate[i]==showDate){ 
       className = 'plain-calendar__date_dis '; 
       return className; 
     } 
   } 
  let className = ''; 
  if (this.checkLimit(dateObject)) { 
    className = 'plain-calendar__date_dis '; 
      return className; 
   } 
  if (dateObject.day.getMonth() + 1 != this.currentMonth) { 
   className += 'plain-calendar__other-month '; } 
   className += 'plain-calendar__normal '; 
   if (dateObject.day.getTime() - this.selTimestamp === 0) { 
      className += 'plain-calendar__selected'; 
    } 
      return className; 
   }, 
   // 对选择的时间节点进行处理  
selDate(dateObject, event,index) { 
  var checkDate=dateObject.day.getFullYear()+"-"+(dateObject.day.getMonth()> 9 ? (dateObject.day.getMonth() + 1):"0"+ (dateObject.day.getMonth() + 1))+"-"+(dateObject.day.getDate()> 9 ? (dateObject.day.getDate()):"0"+(dateObject.day.getDate())); 
  checkDate=checkDate.replace(/(^\s*)|(\s*$)/g, "")
  let node = event.currentTarget, siblings = this.siblings(node), state = 'disabled';
  if (!node.classList.contains('plain-calendar__date_dis')) { 
    state = 'normal'; 
    this.selTimestamp = dateObject.day.getTime(); 
    node.classList.add('plain-calendar__selected'); 
    this.dateVal=checkDate this.show_date=false var allDayIndex=this.msg1.map(e=>e.date).indexOf(checkDate) 
    this.selHouseNum=$('#sel_house_num').text() 
 for (let i = 0; i < siblings.length; i++) { 
     siblings[i].classList.remove('plain-calendar__selected'); 
    } 
  } 
// 获取指定节点的兄弟节点  
siblings(elem) { 
   let nodes = [], _elem = elem; 
    while ((elem = elem.previousSibling)) { 
     if (elem.nodeType == 1) { 
      nodes.push(elem); 
     } 
   } 
elem = _elem; 
while ((elem = elem.nextSibling)) { 
if (elem.nodeType == 1) { 
  nodes.push(elem); 
 } 
} 
return nodes; 
}

 },
} 
</script>

插件calendar.css

@charset "utf-8";

.demo {
    margin: 0 auto;
    width: 420px;
}

/**
 * 日历
*/

.plain-calendar {
    font-size: 14px;
    text-align: center;
    cursor: pointer;
    border:0.1rem solid #e0e0e0;
    border-top:none;
}

.plain-calendar__hd {
    position: relative;
    height: 48px;
    text-align: center;
    line-height: 48px;
    color: #000;
    font-size: 18px;
    border-bottom:0.1rem solid #e0e0e0;
}

.plain-calendar__hd-text {
    display: inline-block;
    margin: 0 30px;
}

.plain-calendar__prev,
.plain-calendar__next {
    display: inline-block;
 
    height: 100%;
}

.plain-calendar__week {
    height: 40px;
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
}

.plain-calendar__week-item {
    flex: 1;
    height: 40px;
    line-height: 40px;
}

.plain-calendar__date-items {
    padding: 0;
    margin: 0;
}

.plain-calendar__date-item {
    display: inline-block;
    width: 14.2%;
    height: 40px;
    line-height: 40px;
    list-style-type: none;
}

.plain-calendar__now {
    color: #fff;
    background-color: #2AAC72;
}

.plain-calendar__other-month {
    color: #b7b7b7;
}

.plain-calendar__date_dis {
    color: #b7b7b7;
}

.plain-calendar__selected {
    color: #fff;
    background: #2AAC72;
    position: relative;
}

.plain-calendar__sel{
    background:#fff;
    color:#333;
}

本地css

<style scoped>
@import '../assets/css/calendar.css';
.plain-calendar{
    position: absolute;
    background: #fff;
}
.hello {
    width: 60%;
    float: right;
}
.hello input {
    width: 100%;
    height: 2.4rem;
    border-radius: 4px;
    border: 1px solid #DCDFE6;
}
.layui-laydate .layui-this {
    background-color: #358ee7 !important;

}
.sel_dates{
    float:right;
    width:60%;
}
.calendar_sel{
    position: relative;
}
.triangle{
    position: absolute;
     width: 0px;                        
     height: 0px;
     border-radius: 4px;
     border-top: 6px solid #333;
     border-left: 6px solid transparent;    
     border-right: 6px solid transparent;
     top: 1rem;
     right: 15px;
}

.sel_dates input{
    width:100%;
    line-height:2.4rem;
    border:1px solid #e0e0e0;
    border-radius:4px;
    padding-left: 15px;
    color: #000;
    font-size: 1rem;
}
</style>