多功能版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格式数据
        }