多功能版vue日曆控件

下載地址:https://github.com/zw1371/zm-datepicker-full

以前寫了一個簡單的vue日曆控件:https://www.cnblogs.com/mrzhu/p/8632396.html

具體用法:(基本用法請參考:http://www.javashuo.com/article/p-bkvptmxk-dw.html)

　　

<zm-datepicker type="week"  v-model="option.sDate" @select-time="selectSDate" placeholder="開始日期"></zm-datepicker>

　　

而後簡單的日曆控件並不能很好的知足我現有的工做，故封裝了一個稍微複雜點的日曆控件,相比以前的日曆控件 增長了如下功能:

　　1：增長周的選擇

　　2：增長了select-time事件(用戶選擇事件後會觸發該方法)

　　3：增長了placeholder用戶用戶沒有選擇時候的文字展現

如下重點介紹相關功能:

　　1：周的選擇(設置type屬性爲week)

　　

　　2：增長了select-time事件

　　　　基本上使用v-model就已經能夠很好的知足咱們的要求，之因此添加了該事件是由於，若是一個日曆控件 須要不停的切換其狀態，好比在某些狀況下他的狀態是選擇月 在某些狀況下他的狀態是選擇周，使用v-model並不能很好的表示不一樣狀態下的值，因此新增了該事件，該事件傳遞兩個參數，第一個參數表示當前日曆的類型(月 日 周 小時 ...),第二個參數表示用戶具體選擇的值，不一樣類型對應的值不同

　　 selectSDate(type,data){
      console.log(type)//month-當前日曆類型爲選擇月,day-當前日曆類型爲選擇日,week-當前日曆類型爲選擇周,hour-當前日曆類型爲選擇小時,minute-當前日曆類型爲選擇分鐘內
      console.log(data)//不一樣類型的日曆 返回的值不同
    },

　　關於select-time事件中，第二個參數的值的說明:

　　　　若是當前日曆類型爲選擇月

        {
          date,//yyyy-MM格式日期
          day,//yyyy-MM-dd格式日期
          time//yyyy-MM-dd hh:mm:ss格式日期
        }    

　　　　 若是當前日曆類型爲選擇周

        {
          weekIndex:w,//當前周的索引
          monday:s,//當前選擇的周的週一的日期 格式爲yyyy-MM-dd
          sunday:e,//當前選擇周的週日的日期 格式爲yyyy-MM-dd
          time//時間 格式爲yyyy-MM-dd hh:mm:ss
        }    

 　　　　若是當前類型爲選擇日

        {
          date,//yyyy-MM-dd格式數據
          day,//yyyy-MM-dd格式數據
          time//yyyy-MM-dd hh:mm:ss格式數據
        }    

　　　　若是選擇爲小時

        {    
          date,//yyyy-MM-dd hh格式數據
          day,//yyyy-MM-dd格式數據
          time//yyyy-MM-dd hh:mm:ss格式數據
        }

　　　　若是選擇爲分鐘

        {
          date,//yyyy-MM-dd hh:mm格式數據
          day,//yyyy-MM-dd格式數據
          time//yyyy-MM-dd hh:mm:ss格式數據
        }