vue移动端的日期插件带农历
最近项目中需要用到一个日期选择器,百度了一下,貌似带农历的移动端的日期插件比较少,最后在github上找了个算是比较合适的改了改差不多。
以下是效果图:
以下是代码的实现:
第一步:安装依赖 npm i mpvue-calendar 。成功后在node_modules里面会找到如下文件
注意browser-style.css是浏览器端的样式,style.css是小程序端的,注意区分。
第二步:新建一个vue组件,引入插件,注释部分可以自行删除,代码如下:
<template><div class="datePicker"><Calendar:months="months":value="value":begin="begin":end="end":now="false":responsive="false"lunarclean:monthRange="monthRange"@select="selected":multi="false"ref="calendar"/></div>
</template><script>import Calendar from 'mpvue-calendar'import 'mpvue-calendar/src/browser-style.css'import util from '../../util/util'export default {data () {return {months: ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'],// disabledArray: ['2018-6-27','2018-6-25'],value:util.formatDate(Date.parse(new Date())) ,begin:util.formatDate(Date.parse(new Date())),end:util.formatDate(Date.parse(new Date())+90*24*60*60*1000),//假设未来20天可以选择日期monthRange:['2019-6', '2019-8']// events: {'2018-6-7':'今日备注', '2018-6-8':'一条很长的明日备注'},自定义备注// almanacs: {'9-3': '抗战胜利日', '11-17': '学生日'},//自定义节日// tileContent: [// {date: '2018-9-22', className: 'holiday ', content: '休'},// {date: '2018-9-23', className: 'holiday ', content: '休'}// ],//为每个具体日期自定义class和插入文本内容,具体用法见下}},components: {Calendar,},methods: {// prev(year, month, weekIndex) {// console.log(year, month, weekIndex)// },// next(year, month, weekIndex) {// console.log(year, month, weekIndex)// },// selectYear(year) {// console.log(year)// },// selectMonth(month, year) {// console.log(year, month)// },// setToday() {// this.$refs.calendar.setToday()// },// dateInfo() {// const info = this.$refs.calendar.dateInfo(2018, 8, 23)// console.log(info);// },// renderer() {// this.$refs.calendar.renderer(2018, 8); //渲染2018年8月份// },selected(val, val2) {console.log(val)console.log(val2) }}}
</script>
<style scoped>.datePicker{background-color:#f7f8fd;padding-top: 85px;height: 100%}
</style>
具体的样式的修改可以自己在browser-style.css文件中按需求自己更改,
参数和方法git上也有详细的介绍
这里发在使用的时候发现一个bug,已经在git上提了issue,但作者好像还没改。
传入monthRange参数后 在单选模式下,会出现在每个月份的第一行点击任意日期都可以被选中,如下图所示:
这里提供一个临时的解决方法,在上面的selected加上一段代码:
selected(val, val2) {console.log(val)console.log(val2)// console.log(this.$refs.calendar.monthRangeDays)let monthArray = this.$refs.calendar.monthRangeDaysmonthArray.forEach(jj=>{jj.forEach(vv=>{vv.forEach(ii=>{if(val2.date == ii.date){ii.selected = true}else {ii.selected = false}})})})}
通过Calendar 对象实例来改变选中的效果,就是这些啦,希望对大家有帮助!
引用的插件github地址:https://github.com/Hzy0913/mpvue-calendar
vue移动端的日期插件带农历相关推荐
- 【帝国CMS插件】支持7.5 7.2 移动同步生成插件 帝国多端访问必备插件带详细安装教程
[帝国CMS插件]支持7.5 7.2 移动同步生成插件 帝国多端访问必备插件 模板开发者必备插件 支持系统:帝国CMS7.5 和 7.2 系统 编码:UTF-8 使用特点: 1.可自动同步生成的页面有 ...
- js 日期星期 带农历
Weekday代码 //得到当前日期如2009年6月19日 星期五 function getDate(){ var today = new Date(); var x = new Array(& ...
- vue 移动端选择日期控件-----vue2-datepick
原文地址:https://blog.csdn.net/weixin_40578880/article/details/81906067 相关地址: https://www.npmjs.com/pack ...
- vue 移动端搜索功能(带历史搜索记录)
实现效果如图: 实现的功能: 1.点击搜索,把搜索的值存入本地记录,并展示 2.搜索相同的值,要删除旧数据,把新数据放进数组首位 3.清空历史记录 html代码: <div class=&quo ...
- vxe-input vue 日期选择组件带农历节日、小圆点提醒
vxe-table vxe-input vue 日期选择组件带农历节日.小圆点提醒 默认的日期选择是没有节日信息的 可以通过 festival-method 方法自定义节日信息,接收一个对象,用于渲染 ...
- vue前端对接Hikvision海康威视监控,pc端对接,插件模式
一.简介 1.运行环境 Win7 32/64 位操作系统:32 位 IE10(兼容 64 位 IE10,64 位 IE10 环境下浏览器会默认启动 32 位 IE).32/64 位 IE11.32/6 ...
- vue常用开发ui框架(app,后台管理系统,移动端)及插件
一.uni-app (app混合开发) uni-app是一个使用Vue.js开发跨平台个人文库应用的前端框架,开发者编写一套代码,可编译到的iOS,安卓,H5,小程序等多个平台. 官网:uni-app ...
- js 移动端 滑块验证码插件_VUE技术详解,Vue.js从入门到精通
[Vue.js简介] Vue.js是一套构建用户界面的渐进式框架.与其他重量级框架不同的是,Vue采用自底向上增量开发的设计.Vue的核心库只关注视图层,并且非常容易学习,非常容易与其它库或已有项目整 ...
- 点微同城系统整站源码 带pc端与小程序端+49款插件
介绍: 点微同城系统整站源码 带pc端与小程序端+49款插件 下载 百度网盘 请输入提取码百度网盘为您提供文件的网络备份.同步和分享服务.空间大.速度快.安全稳固,支持教育网加速,支持手机端.注册使用 ...
- vue移动端日历组件 mintUi dateTime picker 设定开始和结束日期
vue移动端日历组件 mintUi dateTime picker 设定开始和结束日期
最新文章
- 21天学通python第二版-电子工业出版社-网上书店
- 上传图片时 , 返回 nginx 出现413 Request Entity Too Large 问题
- 浅析分布式数据库中间件DDM
- mysql float 误差_mysql下float类型使用一些误差详解
- sql server的搜索_在SQL Server中进行全文本搜索
- codeblocks快速注释多行
- 如何将电视机用作 Mac 的显示器?
- CentOS 7.X配置连接网络
- IEEE802.5 令牌环网
- 勒索病毒处置经验分享
- 信息安全行业含金量较高的2个认证(建议都看一下)
- 重启打印机(打印机任务无法取消时)
- 倒计时 1 天丨微信大数据挑战赛,即将启动报名
- 基于30多万条招聘信息的热门城市、地域 、薪资、人才要求的R语言数据可视化分析
- 解决pycharm Python helpers are not copied yet to the remote host. Please wait until remote interpreter
- Code First开发系列之管理数据库创建,填充种子数据以及LINQ操作详解
- 8.法律法规与标准化知识
- 五一假期吃胖了?别怕, 一周减肥食谱等你来翻牌
- CDH6集成Flink【提供安装包】
- DT大数据梦工厂免费实战大数据视频全集 分享
热门文章
- 全开源即时通讯(IM)系统 高仿微信
- S7-1200 PLC与电子秤进行MODBUS RTU通信的具体步骤
- 【蓝桥杯备战】 Day02
- 一文带小白玩转NFC、门禁卡
- 对样例SoC集成example salve模块
- ESP32-C3 SPI salve示例错误
- 抖音高贵气质的签名_抖音2100万赞!95后小伙“乡村维密秀”走红外媒:人生道阻且长,有梦想,谁都了不起...
- 阿里云服务器试用是否划算
- 邮件开头结尾一些不同的表达
- php 正则格式化图片,php利用正则表达式格式化电话号码的方法