基于vue2.0和elementUi的vue农历日期组件vue-jlunar-datepicker(插件)

vue-jlunar-datepicker(插件)

vue实现农历日历插件——vue-jlunar-datepicker插件

这个插件本身是基于vue2.0elementUi框架来实现的。

安装 vue-jlunar-datepicker 插件

npm install vue-jlunar-datepicker --save
// 如果安装过程中,出现报错,一般在终端中会显示出来解决办法
// 我这边确实报错了,提示的信息是elementUi版本不兼容的问题,解决方法就是:
npm install vue-jlunar-datepicker --save --force

插件在main.js中引入并注册 或组件中引入

import Vue from 'vue'
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
import JDatePicker from 'vue-jlunar-datepicker';
Vue.config.productionTip = false
Vue.use(ElementUI);
Vue.component("j-date-picker",JDatePicker);
new Vue({render: h => h(App)
}).$mount('#app')或者
<script>
import JDatePicker from 'vue-jlunar-datepicker'
export default {components: {JDatePicker}
}
</script>

使用

<template><div class="contentViews"><j-date-picker v-model="form.birthdaydate" style="width: 100%" :placeholder="placeholder":picker-options="pickerOptions" :rangeSeparator="rangeSeparator" @change="onDateChange":disabled="disabled" 	:showLunarClass="showLunarClass" :showLunarControl="showLunarControl" :type="type":showBackYears="showBackYears" :showLunarIcon="showLunarIcon" :format="format"></j-date-picker></div>
</template>
<script>
export default {data() {return {form: {birthdaydate: 'L2023-02-21',},type: 'DATERANGE', // DATE/DATERANGEshowLunarClass: 'MIX', // FULLLUNAR/LUNAR/NUMBER/MIX 农历日期的显示类型;不区分大小写;showBackYears: 2, // 现在之后的年份数基于当前年份showLunarIcon: true,showLunarControl: true, // 是否默认显示农历width1: '300',format: 'YYYY/MM/DD',placeholder: '请选择日期',rangeSeparator: '-',disabled: false,editable: true,clearable: true,pickerOptions: {disabledDate(time) {console.log(time);return time.getTime() < Date.now() - 8.64e7;//这行代码是限制当前日期之前不可选择,如果注释掉,则不做限制}}};},methods: {onDateChange(val) {this.form.birthdaydate = val;this.$forceUpdate();}}
};
</script>
<style lang="less" scoped>
::v-deep.icon-richeng:before {content: '>';
}/deep/.full-jcalendar__body {height: 240px !important;
}/deep/.full-jcalendar .input__inner:focus {border-color: #f90;
}.full-jcalendar .input__inner:hover {border-color: #ffcb7c;
}/deep/.full-jcalendar__body .data-list li:hover {background-color: #f90;
}/deep/.full-jcalendar-header {height: 30px;background: #ffeacb;
}/deep/.full-jcalendar__body {border: 1px solid #ebebeb;
}/deep/.full-jcalendar-header label {display: inline-block !important;
}/deep/.full-jcalendar .input__inner,
/deep/input::input-placeholder {font-size: 13px !important;color: #999 !important;
}/deep/.full-jcalendar__body .day-cell.select,
/deep/.full-jcalendar__body .data-list li.select-year {background-color: #f90;
}/deep/.day-cell.today.select .number.is-today.is-empty {color: #fff !important;
}/deep/.day-cell.today .number.is-today.is-empty {color: #f90 !important;
}/deep/.full-jcalendar__body .day-cell.today:before,
/deep/.full-jcalendar__body .data-list li.curr-year::before {border-top: 0.5em solid #f90 !important;
}/deep/.full-jcalendar-header .title-year:hover,
/deep/.full-jcalendar-header .title-month:hover {color: #f90 !important;
}/deep/.full-jcalendar__main {width: 100% !important;
}/deep/.iconfont.icon-richeng::before {content: '' !important;
}/deep/.icon.iconfont.icon-xiangyoujiantou::before {content: '>' !important;
}/deep/.icon.iconfont.icon-xiangzuojiantou::before {content: '<' !important;
}/deep/.day-number>.lunar {font-size: 11px !important;
}/deep/.day-cell {line-height: 18px !important;
}
</style>

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

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

相关文章

PostgreSQL和MySQL多维度对比

文章目录 0.前言1. 基础对比2.PostgreSQL和MySQL语法对比3. 特性4. 参考文档 0.前言 在当今的软件开发和数据管理领域&#xff0c;数据库是至关重要的基础设施之一。选择正确的数据库管理系统&#xff08;DBMS&#xff09;对于应用程序的性能、可扩展性和数据完整性至关重要。…

el-select远程调接口,并进行选择;el-autocomplete输入远程调接口,并进行选择

1.el-select远程调接口&#xff0c;并进行选择 <el-selectv-model"name11"filterableremotereserve-keywordplaceholder"请输入"size"small":remote-method"querySearchAsync":loading"loadingGr"style"width: 100…

20天学会rust(二)rust的基础语法篇

在第一节&#xff08;20天学rust&#xff08;一&#xff09;和rust say hi&#xff09;我们配置好了rust的环境&#xff0c;并且运行了一个简单的demo——practice-01&#xff0c;接下来我们将从示例入手&#xff0c;学习rust的基础语法。 首先来看下项目结构&#xff1a; 项目…

Spring集成Junit

目录 1、简介 2、Junit存在的问题 3、回顾Junit注解 4、集成步骤 4.1、导入坐标 4.2、Runwith 4.3、ContextConfiguration 4.4、Autowired 4.5、Test 4.6、代码 5、补充说明 5.1、Runwith 5.2、BlockJUnit4ClassRunner 5.3、没有配置Runwith ⭐作者介绍&#xff1…

【MySQL】deepin安装mysql的cpp开发包

在deepin下安装好mysql后&#xff0c;发现在c语言中没有<mysql.h>的头文件。 而根据ubuntu的办法直接按照mysql的开发包&#xff0c;会出现这种情况&#xff1a; ~/Desktop$ sudo apt-get install libmysqlclient-dev 正在读取软件包列表… 完成 正在分析软件包的依赖关…

Linux常见命令

新建标签页 (gitee.com)尹相辉 (yinxianghui66) - Gitee.com新建标签页 (gitee.com) 文章目录 文章目录 一、Linux常见命令 1.ls 2.cd 目录名 3.pwd 4.touch 文件名 5.echo 字符串->目标文件 6.cat 文件名 7.man 8.vim 文件名 9.mkdir 目录名 10.rm 文件名 11.mv 源…

k8sday01

第一章 kubernetes介绍 本章节主要介绍应用程序在服务器上部署方式演变以及kubernetes的概念、组件和工作原理。 应用部署方式演变 在部署应用程序的方式上&#xff0c;主要经历了三个时代&#xff1a; 传统部署&#xff1a;互联网早期&#xff0c;会直接将应用程序部署在物…

conda create时候出现JSONDecoderError解决方法

起因是我的conda出现了JSONDecoderError&#xff0c;这个我搜了一下是因为某些配置文件错误&#xff0c;所以让我update conda&#xff0c;于是我先用了下面的指令&#xff1a; conda update conda 但是在执行过程中依然会出现 JSONDecoderError的问题&#xff0c;后来参考了这…

1.Python简介及安装(3.11.4)

简介 Python 是一种解释型、面向对象、动态数据类型、高级、通用、解释型的高级程序设计语言。 Python 由 Guido van Rossum 于 1989 年底发明,第一个公开发行版发行于 1991 年。 像 Perl 语言一样, Python 源代码同样遵循 GPL(GNU General Public License) 协议。 官方宣布,…

Explorable Tone Mapping Operators

Abstract 色调映射在高动态范围(HDR)成像中起着至关重要的作用。 它的目的是在有限动态范围的介质中保存HDR图像的视觉信息。 虽然许多工作已经提出从HDR图像中提供色调映射结果&#xff0c;但大多数只能以一种预先设计的方式进行色调映射。 然而&#xff0c;声调映射质量的主…

elevation mapping学习笔记3之使用D435i相机离线或在线订阅点云和tf关系生成高程图

文章目录 0 引言1 数据1.1 D435i相机配置1.2 协方差位姿1.3 tf 关系2 离线demo2.1 yaml配置文件2.2 launch启动文件2.3 数据录制2.4 离线加载点云生成高程图3 在线demo3.1 launch启动文件3.2 CMakeLists.txt3.3 在线加载点云生成高程图0 引言 elevation mapping学习笔记1已经成…

数组和字符串-数组

文章目录 寻找数组的中心索引题意&#xff1a;解&#xff1a;代码&#xff1a; 搜索插入位置题意&#xff1a;解&#xff1a;代码&#xff1a; 合并区间题意&#xff1a;解&#xff1a;代码&#xff1a; 寻找数组的中心索引 题意&#xff1a; 给定一个数组&#xff0c;找一个…

TartanVO: A Generalizable Learning-based VO 论文阅读

论文信息 题目:TartanVO: A Generalizable Learning-based VO 作者&#xff1a;Wenshan Wang&#xff0c; Yaoyu Hu 来源&#xff1a;ICRL 时间&#xff1a;2021 代码地址&#xff1a;https://github.com/castacks/tartanvo Abstract 我们提出了第一个基于学习的视觉里程计&…

Grafana技术文档-概念-《十分钟扫盲》

Grafana官网链接 Grafana: The open observability platform | Grafana Labs 基本概念 Grafana是一个开源的度量分析和可视化套件&#xff0c;常用于对大量数据进行实时分析和可视化。以下是Grafana的基本概念&#xff1a; 数据源&#xff08;Data Source&#xff09;&#…

新一代开源流数据湖平台Apache Paimon入门实操-下

文章目录 实战写表插入和覆盖数据更新数据删除数据Merge Into 查询表批量查询时间旅行批量增量查询 流式查询时间旅行ConsumerID 查询优化 系统表表指定系统表分区表全局系统表维表 CDC集成MySQLKafka支持schema变更 实战 写表 插入和覆盖数据 可以使用INSERT语句向表中插入…

RISC-V公测平台发布:如何在SG2042上玩转OpenMPI

About HS-2 HS-2 RISC-V通用主板是澎峰科技与合作伙伴共同研发的一款专为开发者设计的标准mATX主板&#xff0c;它预装了澎峰科技为RISC-V高性能服务器定制开发的软件包&#xff0c;包括各种标准bencmark、支持V扩展的GCC编译器、计算库、中间件以及多种典型服务器应用程序。…

云安全攻防(六)之 镜像投毒

云安全攻防&#xff08;六&#xff09;之 镜像投毒 随着容器技术的普及&#xff0c;容器镜像也成为软件供应链中非常重要的一个组成的部分。人们像使用 pip 等工具从仓库获取各种编程软件库一样&#xff0c;可以从 Docker Hub 或 第三方仓库拉取镜像&#xff0c;在其基础上进行…

TS学习03-类

类 calss A {name: stringconstructor(name:string) {this.name name}greet() {return hello, this.name} } let people new A(RenNing)继承 子类是一个派生类&#xff0c;他派生自父类&#xff08;基类&#xff09;&#xff0c;通过 extends关键字 派生类通常被称作 子类…

遇到bug怎么分析,这篇文章值得一看

为什么定位问题如此重要&#xff1f; 可以明确一个问题是不是真的“bug” 很多时候&#xff0c;我们找到了问题的原因&#xff0c;结果发现这根本不是bug。原因明确&#xff0c;误报就会降低 多个系统交互&#xff0c;可以明确指出是哪个系统的缺陷&#xff0c;防止“踢皮球…

C语言内嵌汇编

反编译&#xff08;二进制文件或者so库&#xff09; objdump --help objdump -M intel -j .text -ld -C -S out > out.txt #显示源代码同时显示行号, 代码段反汇编-M intel 英特尔语法-M x86-64-C:将C符号名逆向解析-S 反汇编的同时&#xff0c;将反汇编代码和源代码交替显…