vue 引入 datepicker组件。
首先通过 npm工具进行包的引入,在命令行中输入
npm install vue-datepicker
其次在自己想要使用组建的文件中引入该组件
import myDatepicker from ‘vue-datepicker/vue-datepicker-es6.vue’;
同时在vue文件中也要去定义这一个组件:
components:{
myDatepicker
},
最后,在返回的data中去对这个组件进行设置:
html内容:
<myDatepicker @change=“changeTime” :date=“startTime” :option=“timeoption” :limit=“limit”>
js中data返回值:
startTime: { // 默认的初始时间
time: time1
},
timeoption: {
type: ‘day’, // day , multi-day //针对日期的限制,
week: [‘周一’, ‘周二’, ‘周三’, ‘周四’, ‘周五’, ‘周六’, ‘周日’],
month: [‘1月’, ‘2月’, ‘3月’, ‘4月’, ‘5月’, ‘6月’, ‘7月’, ‘8月’, ‘9月’, ‘10月’, ‘11月’, ‘12月’],
format: ‘YYYY-MM-DD’, // YYYY-MM-DD 日期
inputStyle: { // input 样式,可以进行自己的自定义修改,
‘display’: ‘inline-block’,
‘padding’: '.1rem .05rem ',
‘line-height’: ‘1’,
‘width’:‘1.5rem’,
‘font-size’: ‘14px’,
‘border’: ‘1px solid #eeeeee’,
‘border-radius’: ‘2px’,
},
color: { // 字体颜色
header: ‘#35acff’, // 头部
headerText: ‘#fff’, // 头部文案
},
buttons: { // button 内容自定义
ok: ‘确定’,
cancel: ‘取消’
},
overlayOpacity: 0.5, // 遮罩透明度
placeholder: ‘请选时间’, // 提示日期
dismissible: false // 默认true 待定
},
limit: [{ //对时间区间的设定
type: ‘weekday’,
available: [1, 2, 3, 4, 5,6,0]
},
{
type: ‘fromto’,
from: ‘2016-02-01’, //最早的开始时间
to: time1 //这个时间是我自己拼接出来的当前时间,也可以自己写入
}],
之后就可以正常使用啦!!!

Logo

前往低代码交流专区

更多推荐