多功能版vue日历控件

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

之前写了一个简单的vue日历控件:https://www.cnblogs.com/mrzhu/p/8632396.html

具体用法:(基本用法请参考:https://www.cnblogs.com/mrzhu/p/8632396.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格式数据
        }

　　

转载于:https://www.cnblogs.com/mrzhu/p/9242332.html