移动端Vant中的Calendar日历增加显示农历(节日、节气)功能

核心: 使用 js-calendar-converter 库实现

npm地址:js-calendar-converter

内部使用原生calendar.js, 中国农历(阴阳历)和西元阳历即公历互转JavaScript库,具体实现感兴趣的可自行查看其实现源码。

原日历效果图:
无农历日历

更改后日历效果图:

农历日历
核心代码如下:

在main.js文件中引入js-calendar-converter,并挂在到Vue上,代码如下:

// vant 日历显示农历
import calendar from 'js-calendar-converter';
Vue.prototype.$calendar = calendar;

组件代码:

<van-calendartype="range"v-model="dateRangeShow":default-date="dateRange":min-date="minDate":max-date="maxDate":formatter="formatterCode":poppable="false"color="#2873eb":show-title="false":allow-same-day="true"@confirm="onConfirm"
/>

js代码(代码里禁用日期功能和农历显示无关,可根据需求自行决策是否需要):

formatterCode(day) {const _time = new Date(day.date);// 禁用日期const times = _time.getTime();const cur = new Date().getTime();if (times > cur) {day.type = 'disabled';}const y = _time.getFullYear();const m = _time.getMonth() + 1;const d = _time.getDate(); // 从 Date 对象返回一个月中的某一天 (1 ~ 31)const info = this.$calendar.solar2lunar(y, m, d); // $calendar 已在全局注册绑定//   优先级:节日>节气>农历if (info.festival != null && info.festival != '') {day.bottomInfo = info.festival;day.className = 'festival'; //添加颜色样式} else if (info.Term != null && info.Term != '') {day.bottomInfo = info.Term;day.className = 'term'; //添加颜色样式} else if (info.IDayCn != null && info.IDayCn != '') {day.bottomInfo = info.IDayCn;}return day;
}

css代码(样式也可以根据自己需求进行自定义样式):

// 日历农历周末显示样式
.festival > div.van-calendar__bottom-info,
.term > div.van-calendar__bottom-info{color: #c80000;
}

拓展:web端ElementUI中的 DatePicker 日期选择器增加农历显示功能

使用 vue-jlunar-datepicker 依赖插件实现即可,具体样式可以自己根据需求进行修改处理。

代码简示:

// 日期控件替换为带农历的日期控件
import JDatePicker from "vue-jlunar-datepicker";
Vue.component("j-date-picker", JDatePicker);
<j-date-pickerv-model="dayDate"type="date"placeholder="选择日期"show-lunar-class="FULLLUNAR":show-lunar-control="true":show-back-years="2":show-lunar-icon="true"format="yyyy-MM-dd":picker-options="pickerOptions":clearable="false"style="width:100%;"
/>

相关学习资料地址:vue-jlunar-datepicker插件npm地址

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.rhkb.cn/news/225971.html

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

ElementUI的Table组件行合并上手指南

ElementUI的Table组件行合并 &#xff0c;示例用官网vue3版的文档 <el-table :data"tableData" :span-method"objectSpanMethod" border style"width: 100%; margin-top: 20px"><el-table-column prop"id" label"ID&qu…

【轻松入门】OpenCV4.8 + QT5.x开发环境搭建

引言 大家好&#xff0c;今天给大家分享一下最新版本OpenCV4.8 QT5 如何一起配置&#xff0c;完成环境搭建的。 下载OpenCV4.8并解压缩 软件版本支持 CMake3.13 或者以上版本 https://cmake.org/ VS2017专业版或者以上版本 QT5.15.2 OpenCV4.8源码包 https://github.com/op…

英语学习软件欧路词典 Eudic mac特点说明

欧路词典 Eudic mac是一款英语学习工具&#xff0c;它包含了丰富的英语词汇、短语和例句&#xff0c;并提供了发音、例句朗读、单词笔记等功能。 欧路词典 Eudic mac软件特点 多语种支持&#xff1a;欧路词典支持多种语言&#xff0c;包括英语、中文、日语、法语等等&#xff…

Havenask 分布式索引构建服务 --Build Service

Havenask 是阿里巴巴智能引擎事业部自研的开源高性能搜索引擎&#xff0c;深度支持了包括淘宝、天猫、菜鸟、高德、饿了么在内几乎整个阿里的搜索业务。本文针对性介绍了 Havenask 分布式索引构建服务——Build Service&#xff0c;主打稳定、快速、易管理&#xff0c;是在线系…

第27关 在K8s集群上使用Helm3部署最新版本v2.10.0的私有镜像仓库Harbor

------> 课程视频同步分享在今日头条和B站 大家好&#xff0c;我是博哥爱运维。 在前面的几十关里面&#xff0c;博哥在k8s上部署服务一直都是用的docker hub上的公有镜像&#xff0c;对于企业服务来说&#xff0c;有些我们是不想把服务镜像放在公网上面的&#xff1b; 同时…

【习题】运行Hello World工程

判断题 1. DevEco Studio是开发HarmonyOS应用的一站式集成开发环境。 正确(True)错误(False) 正确(True) 2. main_pages.json存放页面page路径配置信息。 正确(True)错误(False) 正确(True) 单选题 1. 在stage模型中&#xff0c;下列配置文件属于AppScope文件夹的是&am…

Docker自建私人云盘系统

Docker自建私人云盘系统。 有个人云盘需求的人&#xff0c;主要需求有这几类&#xff1a; 文件同步、分享需要。 照片、视频同步需要&#xff0c;尤其是全家人都是用的同步。 影视观看需要&#xff08;分为家庭内部、家庭外部&#xff09; 搭建个人网站/博客 云端OFFICE需…

【K8S 二进制部署】部署Kurbernetes的网络组件、高可用集群、相关工具

目录 一、K8S的网络类型&#xff1a; 1、K8S中的通信模式&#xff1a; 1.1、、pod内部之间容器与容器之间的通信 1.2、同一个node节点之内&#xff0c;不同pod之间的通信方式&#xff1a; 1.3、不同node节点上的pod之间是如何通信的呢&#xff1f; 2、网络插件一&#xff…

Linux下安装QQ

安装步骤&#xff1a; 1.进入官网&#xff1a;QQ Linux版-轻松做自己 2.选择版本&#xff1a;X86版下载dep 3安装qq 找到qq安装包位置&#xff0c;然后右击在终端打开输入安装命令&#xff0c;然后点击回车 sudo dpkg -i linuxqq_3.2.0-16736_amd64.deb 卸载qq 使用命令…

Windows/Linux环境登入mysql、mysqldump命令等多方式解决方案之简易记录

Windows/Linux环境登入mysql、mysqldump命令等多方式解决方案之简易记录 之前发布过Window方式,这次结合以上主题,完善下Linux相关登入方式过程,纯属做个记录,有需要的朋友可以做个学习参考。 一、Windows环境提示“‘mysql’ 不是内部或外部命令,也不是可运行的程序或批…

Flink项目实战篇 基于Flink的城市交通监控平台(下)

系列文章目录 Flink项目实战篇 基于Flink的城市交通监控平台&#xff08;上&#xff09; Flink项目实战篇 基于Flink的城市交通监控平台&#xff08;下&#xff09; 文章目录 系列文章目录4. 智能实时报警4.1 实时套牌分析4.2 实时危险驾驶分析4.3 出警分析4.4 违法车辆轨迹跟…

PO 发布SAP SProxy->外围系统 WebService

通信概览图 外围系统与PO、SAP的请求响应通信过程大致可以用下图描述 &#xff08;个人整理所得&#xff0c;可能有误&#xff0c;欢迎指正&#xff09; 1. 前期准备 1.1 外围系统提供WebService接口 以A系统的RFC发布WebService接口 RFC发布WebService接口 获取到WSDL地…

MATLAB遗传算法工具箱的三种使用方法

MATLAB中有三种调用遗传算法的方式&#xff1a; 一、遗传算法的开源文件 下载“gatbx”压缩包文件&#xff0c;解压后&#xff0c;里面有多个.m文件&#xff0c;可以看到这些文件的编辑日期都是1998年&#xff0c;很古老了。 这些文件包含了遗传算法的基础操作&#xff0c;包含…

【软件工程大题】数据流图_DFD图_精简易上手

数据流图(DFD)是一种图形化技术,它描绘信息流和数据从输人移动到输出的过程中所经受的变换。 首先给出一个数据流图样例 基本的四种图形 直角矩形:代表源点或终点,一般来说,是人,如例图的仓库管理员和采购员圆形(也可以画成圆角矩形):是处理,一般来说,是动作,是动词名词的形式…

数据结构学习 jz13衣橱整理

关键词&#xff1a;搜索算法 dfs bfs 回溯 题目&#xff1a; 各数位之和&#xff1a; 求法代码&#xff1a; int sums(int x){int s0;while(x!0){sx%10;xx/10;}return s;} 总的思路&#xff1a; 这道题是求可以到达的格子数&#xff0c;想到可以用搜索算法来做&#xff0c;…

【西城微科】家用电子秤芯片CSU8RP1186

随着科技的不断发展&#xff0c;时代的变化&#xff0c;电子秤已经成为我们日常生活中不可或缺的测量工具。电子秤由称重模块、ADC芯片、MCU主控芯片、按键模块及显示模块等设计开发组成。当物体放到秤体上时&#xff0c;称重模块中的压力传感器取得称重物体的信息&#xff0c;…

【回溯】图的m着色问题Python实现

文章目录 [toc]问题描述图的 m m m可着色判定问题图的 m m m可着色优化问题四色猜想 回溯法时间复杂性Python实现 个人主页&#xff1a;丷从心 系列专栏&#xff1a;回溯法 问题描述 图的 m m m可着色判定问题 给定无向连通图 G G G和 m m m种不同的颜色&#xff0c;用这些颜…

Flutter配置Android和IOS允许http访问

默认情况下&#xff0c;Android和IOS只支持对https的访问&#xff0c;如果需要访问不安全的连接&#xff0c;也就是http&#xff0c;需要做以下配置。 Android 在res目录下的xml目录中(如果不存在&#xff0c;先创建xml目录)&#xff0c;创建一个xml文件network_security_con…

Python初学者必须吃透的69个内置函数!

所谓内置函数&#xff0c;就是Python提供的, 可以直接拿来直接用的函数&#xff0c;比如大家熟悉的print&#xff0c;range、input等&#xff0c;也有不是很熟&#xff0c;但是很重要的&#xff0c;如enumerate、zip、join等&#xff0c;Python内置的这些函数非常精巧且强大的&…

SpreadJS 集成使用案例

SpreadJS 集成案例 介绍&#xff1a; SpreadJS 基于 HTML5 标准&#xff0c;支持跨平台开发和集成&#xff0c;支持所有主流浏览器&#xff0c;无需预装任何插件或第三方组件&#xff0c;以原生的方式嵌入各类应用&#xff0c;可以与各类后端技术框架相结合。SpreadJS 以 纯前…