下载地址: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格式数据
}