我要评论项目需求中有一个日期选择限制的功能点：今天之前不可选，周末不可选。
传统的input type='date无法做到，所以使用了这个插件来实现功能。
1.引入vue-datepicker loader：npm install vue-datepicker
2.引入moment loader：npm install moment --save
因为vue-datepicker是依赖vue和moment的,所以也应提前 引入moment；
3.在用到该插件的地方引入： import mydatepicker from 'vue-datepicker/vue-datepicker-es6.vue';
/* vue 2.0 */
页面中实现如下：
<template>
<date-picker :date="starttime" :option="option" :limit="limit" id="select_date"></date-picker>
</template>
export default {
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': '1px solid #ddd',
// 'box-shadow': '0 1px 3px 0 rgba(0, 0, 0, 0.2)',
'border-radius': '5px',
'color': '#5f5f5f'
},
color: {
header: '#ccc',
headertext: '#f00'
},
buttons: {
ok: 'ok',
cancel: 'cancel'
},
overlayopacity: 0.5, // 0.5 as default
dismissible: true // as true as default
},
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-dd hh: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-dd hh:mm"
},
limit: [{
type: 'weekday',
available: [1, 2, 3, 4, 5]
}, {
type: 'fromto',
from: getlocaltime(date),
to: ''
}]
}
}
}
以上所述是小编给大家介绍的vue项目中引入vue-datepicker插件详解整合，希望对大家有所帮助
您可能感兴趣的文章:
如您对本文有疑问或者有任何想说的，请点击进行留言回复，万千网友为您解惑！
![[记录一] Vue(全家桶)+node+koa2+mysql+nginx+redis，全栈博客项目训练](http://www.lhsxpumps.com/_images5/10qianwan/20200826/s_0_202008261722245581.png)
网友评论