好资源导航 » 文章资讯 » vue项目中引入vue-datepicker插件的详解

vue项目中引入vue-datepicker插件的详解

2023-08-23 13:41:04 70

项目需求中有一个日期选择限制的功能点：今天之前不可选，周末不可选。

传统的inputtype='date无法做到，所以使用了这个插件来实现功能。

1.引入vue-datepickerloader：npminstallvue-datepicker

2.引入momentloader：npminstallmoment--save

因为vue-datepicker是依赖vue和moment的,所以也应提前引入moment；

3.在用到该插件的地方引入：importmyDatepickerfrom'vue-datepicker/vue-datepicker-es6.vue';

/*vue2.0*/

页面中实现如下：

exportdefault{
components:{
'date-picker':myDatepicker
},
data(){
return{
startTime:{
time:''
},
endTime:{
time:''
},
option:{
type:'day',
week:['Mo','Tu','We','Th','Fr','Sa','Su'],
month:['January','February','March','April','May','June','July','August','September','October','November','December'],
format:'YYYY-MM-DD',
placeholder:'when?',
inputStyle:{
'display':'inline-block',
'padding':'4px',
'line-height':'17px',
'font-size':'14px',
'width':'190px',
'border':'1pxsolid#ddd',
//'box-shadow':'01px3px0rgba(0,0,0,0.2)',
'border-radius':'5px',
'color':'#5F5F5F'
},
color:{
header:'#ccc',
headerText:'#f00'
},
buttons:{
ok:'Ok',
cancel:'Cancel'
},
overlayOpacity:0.5,//0.5asdefault
dismissible:true//astrueasdefault
},
timeoption:{
type:'min',
week:['Mo','Tu','We','Th','Fr','Sa','Su'],
month:['January','February','March','April','May','June','July','August','September','October','November','December'],
format:'YYYY-MM-DDHH:mm'
},
multiOption:{
type:'multi-day',
week:['Mo','Tu','We','Th','Fr','Sa','Su'],
month:['January','February','March','April','May','June','July','August','September','October','November','December'],
format:"YYYY-MM-DDHH:mm"
},
limit:[{
type:'weekday',
available:[1,2,3,4,5]
},{
type:'fromto',
from:getLocalTime(date),
to:''
}]
}
}
}

以上所述是小编给大家介绍的vue项目中引入vue-datepicker插件详解整合，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对毛票票网站的支持！

返回顶部
514930285
czq8825@qq.com

vue项目中引入vue-datepicker插件的详解

热门推荐

随机推荐