vue - datepicker的引入和使用,自己的使用流程,详细的

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 //这个时间是我自己拼接出来的当前时间,也可以自己写入
}],
之后就可以正常使用啦!!!

  • 1
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值