适配mpvue平台的的微信小程序日历组件mpvue-calendar

mpvue-calendar

基于vue-calendar的适配mpvue平台的的微信小程序日历组件

预览

安装

npm i mpvue-calendar

使用

import Calendar from 'mpvue-calendar' 引入组件
components中注册组件Calendar
template中使用组件<Calendar />

参数及方法

参数or方法	类型	说明
months	Array	自定义月份，不传默认为中文一到十二月
weeks	Array	自定义星期，不传默认为中文日到六
value	Array	默认选中日期
begin	Array	限制开始日期，不传则不限制
end	Array	限制结束日期，不传则不限制
disabled	Array	禁用日期
events	Object	自定义备注
lunar	Boolean	是否显示农历，默认为false
clean	Boolean	是否为简洁模式，简洁模式下自定义备注会显示为圆点，默认为false
range	Boolean	是否为范围模式，默认为false
multi	Boolean	是否为多选模式，默认为false
select(val, val2)	function	日期选中事件,在range模式下val为开始日期、val2为结束日期，其他val为选中日期
setToday()	function	返回今日
selectYear(val)	function	选择年份事件，val为选中的年份
prev(val)	function	选择上一月事件，val为月份
next(val)	function	选择下一月事件，val为月份
arrowLeft	String	自定义左箭头图片，填写图片路径，不填则使用默认图片
arrowRight	String	自定义右箭头图片，填写图片路径，不填则使用默认图片

value 参数在普通模式下value为一维数组如2018年6月21为[2018,6,21] 在range和multi模式下value为二维数组，如range模式选中2018年6月21到6月28为[[2018,6,21], [2018,6,28]]
events 参数 events为自定义备注，例如备注2018年6月21日为{'2018-6-21': '今日备注', '2018-6-22':'明日备注'}，在clean模式下备注为圆点，lunar农历模式下不显示备注
disabled 参数 disabled为禁用日期，如禁用2018-6-21日为['2018-6-21']

示例

<template><div><Calendar:months="months":value="value"@next="next"@prev="prev":events="events"lunarclean@select="select"ref="calendar"@selectMonth="selectMonth"@selectYear="selectYear":arrowLeft="arrowLeft"/><button @click="setToday">返回今日</button></div>
</template><script>
import Calendar from 'mpvue-calendar'
import arrowLeft from '../assets/arrowLeft.png'export default {data () {return {months: ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'],disabledarr: ['2018-6-27','2018-6-25'],value: [2018,6,7],begin:[2016,1,1],end:[2020,1,1],events: {'2018-6-7':'今日备注', '2018-6-8':'一条很长的明日备注'},arrowLeft: arrowLeft}},components: {Calendar},methods: {selectMonth(month,year){console.log(year,month)},prev(month){console.log(month)},next(month){console.log(month)},selectYear(year){console.log(year)},setToday(val,val1,val2) {this.$refs.calendar.setToday();},select(val, val2) {console.log(val)console.log(val2)}}
}
</script>

原文发布时间为：2018年06月25日
原文作者：飞翔荷兰人

本文来源：掘金如需转载请联系原作者

适配mpvue平台的的微信小程序日历组件mpvue-calendar相关推荐

手把手教你写一个微信小程序日历组件
今天我们一起写一个微信小程序日历组件微信小程序日历组件 github.com/749264345/w- 好,我们先看一下要实现的模样,如下图由以上截图我们可以看到 1.日历可以通过按钮[切换展示效 ...
微信小程序日历组件（可滑动，可展开收缩，可标点）
效果图组件介绍原生小程序编写,简单轻便,拿来即用. 推荐从代码托管地址获取代码,后续会更新功能: gitee地址 | github地址代码部分(这里可能不是最新的,推荐去gitee克隆代码) c ...
微信小程序日历组件封装和日历算法
github地址 github代码地址参考博文 https://www.cnblogs.com/webwei2017/articles/7723703.html 思路首先取得处理月的总天数接着定 ...
微信小程序日历组件（swiper可滑动的日历）
可滑动的日历组件根据现实需求自行调整其他 rili.wxml页面  <view class="rili"& ...
微信小程序日历加课表项目
最近花了不少时间做了个微信小程序,期间遇到了挺多技术问题的,写个博客记录一下,我先上小程序使用图片! 1.进入小程序首先要登录才能添加行程和查看行程 2.登录成功后 3.首页日历日期是可点击,点击后是 ...
微信小程序原生组件swiper在mpvue工程中使用注意事项
时下微信小程序开发框架中mpvue是主流的选择之一.其中,免不了还要使用部分小程序原生的组件.swiper组件几乎成为典型小程序界面的必备组成组件之一.但是,我在试用中遇到一个典型问题,很多相关网页中 ...
mpvue，koa开发微信小程序（一）配置相关
mpvue:使用vue开发小程序 vue init mpvue/mpvue-quickstart my-pro npm install npm run dev Project name 项目名称 wx ...
第19课微信小程序安装使用mpvue脚手架
第19课微信小程序安装使用mpvue脚手架: 详情地址:http://mpvue.com/mpvue/quickstart/ 安装前检查环境: 安装脚手架之前需要电脑已安装node与npm 首先按住 ...
微信小程序image组件开发程序以及相关图片问题参考资料汇总
微信小程序image组件开发程序以及相关图片问题参考资料汇总,希望对大家小程序开发能有一定的参考和借鉴价值.以下汇总主要涉及到微信小程序image组件有关资源路径.缩放和剪裁模式等进行的探讨,无论是对 ...

适配mpvue平台的的微信小程序日历组件mpvue-calendar

mpvue-calendar

预览

安装

使用

参数及方法

示例

适配mpvue平台的的微信小程序日历组件mpvue-calendar相关推荐

最新文章

热门文章