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