项目需求中有一个日期选择限制的功能点:今天之前不可选,周末不可选。
传统的输入类型='日期无法做的到,所以使用了这个插件来实现功能。
1。引入vue-datepicker装载机:npm安装vue-datepicker
2。引入时刻装载机:npm安装的时刻——保存
因为vue-datepicker是依赖vue和时刻的,所以也应提前引入时刻;
3。在用到该插件的地方引入:从“vue-datepicker/vue-datepicker-es6.vue”;进口myDatepicker
/* vue 2.0 */
页面中实现如下:
& lt; template>
& lt;日期选择:日期=翱际奔洹?选择=把∠睢?限制="限制" id=皊elect_date祝辞& lt;/date-picker>
& lt;/template>
出口默认{
组件:{
的日期选择:myDatepicker
},
数据(){
返回{
开始时间:{
:“
},
endTime: {
:“
},
选择:{
类型:“天”,
周:[‘莫’,‘你’,‘我们’,“Th”、“Fr”, ' Sa ', '苏'],
月:[' 1 ',' 2 ',' 3 ',' 4 ','可能',6月,7月,8月,9月,10月,11月,12月的),
格式:“YYYY-MM-DD”,
占位符:“当# 63;”
inputStyle: {
“显示”:“inline-block”,
“填充”:“4 px”,
“行高”:“17 px”,
“字体大小”:“14 px”,
“宽度”:“190 px”,
“边境”:“1 px固体# ddd”,//安槐亍?“0 1 px 3 px 0 rgba (0, 0, 0, 0.2)”,
“border - radius”:“5 px”,
“颜色”:“# 5 f5f5f”
},
颜色:{
头:“# ccc”,
headerText:“# f00”
},
按钮:{
好:“ok”,
取消:“取消”
},
overlayOpacity: 0.5, 0.5//违约
驳回:真//默认一样真实
},
timeoption: {
类型:“敏”,
周:[‘莫’,‘你’,‘我们’,“Th”、“Fr”, ' Sa ', '苏'],
月:[' 1 ',' 2 ',' 3 ',' 4 ','可能',6月,7月,8月,9月,10月,11月,12月的),
格式:“YYYY-MM-DD HH: mm”
},
multiOption: {
类型:“多人多天”,
周:[‘莫’,‘你’,‘我们’,“Th”、“Fr”, ' Sa ', '苏'],
月:[' 1 ',' 2 ',' 3 ',' 4 ','可能',6月,7月,8月,9月,10月,11月,12月的),
格式:“YYYY-MM-DD HH: mm”
},
限制:[{
类型:“工作日”,
可用:(1、2、3、4、5)
}, {
类型:“fromto”,
来自:getLocalTime(日期),
:“
})
}
}
}
之前
以上所述是小编给大家介绍的vue项目中引入vue-datepicker插件详解整合,希望对大家有所帮助,如果大家有任何疑问请给我留的言,小编会及时回复大家的。在此也非常感谢大家对网站的支持。
