uniapp 日期插件_Calendar 日历
更新记录
1.3.14(2020-05-22)
修复 自定义easycom规则,子组件提示未找到的Bug
1.3.13(2020-05-22)
修复 自定义easycom规则,子组件提示未找到的Bug
查看更多
Calendar 日历
已经支持在nvue页面中使用
日历组件,组件名:uni-calendar,代码块: uCalendar。
调用方式
:insert="true"
:lunar="true"
:start-date="'2019-3-2'"
:end-date="'2019-5-20'"
@change="change"
>
import uniCalendar from '@/components/uni-calendar/uni-calendar.vue'
export default {
components: {
uniCalendar
},
data() {
return {};
},
methods: {
change(e) {
console.log(e);
}
}
};
属性说明
属性名
类型
默认值
说明
date
String
-
自定义当前时间,默认为今天
lunar
Boolean
false
显示农历
startDate
String
-
日期选择范围-开始日期
endDate
String
-
日期选择范围-结束日期
range
Boolean
false
范围选择
insert
Boolean
false
插入模式,可选值,true:插入模式;false:弹窗模式;默认为插入模式
clearDate
Boolean
true
弹窗模式是否清空上次选择内容
selected
Array
-
打点,期待格式[{date: '2019-06-27', info: '签到', data: { custom: '自定义信息', name: '自定义消息头',xxx:xxx... }}]
showMonth
Boolean
true
是否显示月份为背景
事件说明
事件名
说明
@change
日期改变,insert :true 时生效
@confirm
确认选择insert :false 时生效
@monthSwitch
切换月份时触发
@close
关闭日历弹窗触发
方法说明
在 calendar 组件上定义 ref 属性,通过 ref 属性使用方法。
属性名
类型
说明
open
function
弹出日历组件,insert :false 时生效,通过 ref 触发
代码示例
ref="calendar"
:insert="false"
@confirm="confirm"
>
打开日历
import uniCalendar from '@/components/uni-calendar/uni-calendar.vue'
export default {
components: {
uniCalendar
},
data() {
return {};
},
methods: {
open(){
this.$refs.calendar.open();
},
confirm(e) {
console.log(e);
}
}
};
事件返回属性说明
{
// 范围选择
"range": {
// 范围开始日期
"before": "2019-06-25",
// 范围结束日期
"after": "2019-06-27",
// 范围日期数组
"data": [
"2019-06-25",
"2019-06-26",
"2019-06-27"
]
},
// 当前年
"year": 2019,
// 当前月
"month": 6,
// 当前日
"date": 27,
// 农历
"lunar": {
// 农历年
"lYear": 2019,
// 农历月
"lMonth": 5,
// 农历日
"lDay": 25,
// 生效
"Animal": "猪",
// 农历月
"IMonthCn": "五月",
// 农历日
"IDayCn": "廿五",
// 公历年
"cYear": 2019,
// 公历月
"cMonth": 6,
// 公历日
"cDay": 27,
"gzYear": "己亥",
"gzMonth": "庚午",
"gzDay": "乙未",
// 是否今天
"isToday": true,
"isLeap": false,
// 周
"nWeek": 4,
"ncWeek": "星期四",
// 是否节气
"isTerm": false,
// 节气名
"Term": null,
// 星座
"astro": "巨蟹座"
},
//打点信息
"extraInfo": {
// 打点日期
"date": "2019-06-27",
// 打点描述
"info": "签到",
// 额外信息
"data": {
"custom": "自定义信息",
"name": "自定义消息头"
}
},
// 当前完整日期
"fulldate": "2019-6-27"
}
Tips:
仅支持自定义组件模式
date 传入的应该是一个 String ,如: 2019-06-27 ,而不是 new Date()
insert 属性,确定当前的事件是 @change 还是 @confirm 。理应合并为一个事件,但是为了区分模式,现使用两个事件,这里需要注意
弹窗模式下无法阻止后面的元素滚动,如有需要阻止,请在弹窗弹出后,手动设置滚动元素为不可滚动
插件预览地址
uniapp 日期插件_Calendar 日历相关推荐
- My97DatePicker-WdatePicker日历日期插件详细示例
插件下载地址: https://download.csdn.net/download/lianzhang861/10433412 此日期插件功能还可以,用着挺顺手 目前的版本是:4.8 正式版 My9 ...
- 超好用的js 日历插件 日期插件 日期日历选择控件
前情提要: 主要是目前项目较小,仅需要一个日历插件,就没有选择引用UI框架,单纯找了一个日历插件,外观相对简单大方,还不错,而且只需要2步就可以完成引入: 第一步(有2种方式引入,支持单独引入文件及n ...
- mx-date-picker Uni-app日期时间选择插件,支持更多选择方式(日期范围,日期时间范围)
Uni-app日期时间选择插件,支持更多选择方式(日期范围,日期时间范围) 日期时间选择器 DatePicker 介绍 一款高颜值.多场景的日期时间选择器,提供自定义颜色/格式/文案等. 该插件采用s ...
- 分享一款jquery的日期插件
一.前言 关于日期插件,大家平时用的都不少,但大多数都是ui框架自带的,或者说样式不太好看的插件.博主最近发现了一个很不错的日期插件,能满足绝大多数需求,看着也顺眼,这边分享一下. 二.日期插件 1. ...
- 基于jQuery日历插件制作日历
这篇文章主要介绍了基于jQuery日历插件制作日历的相关资料,需要的朋友可以参考下 来看下最终效果图吧: 是长得丑了一点,不要吐槽我-.- 首先来说说这个日历主要的制作逻辑吧: ·一个月份最多有31天 ...
- Jquery中日期插件jquery.datepick的使用
jsp的代码: 1 <%@ page language="java" contentType="text/html; charset=UTF-8" 2 p ...
- 9 款样式华丽的 jQuery 日期选择和日历控件
现在的网页应用越来越丰富,我们在网页中填写日期和时间已经再也不用手动输入了,而是使用各种各样的日期时间选择控件,大部分样式华丽的日期选择和日历控件都是基于jQuery和HTML5的,比如今天要分享的这 ...
- jsp日期插件My97DatePicker
jsp日期插件My97DatePicker 强大的日期控件 使用方便简单 (2010-10-30 18:59:12) 转载▼ 标签: js javascript 日期插件 jsp it 分类: jqu ...
- 日期插件mobiscroll_date使用
前端日期插件 小程序(微信)最常使用的日期格式 js进行格式化 小程序(微信)最常使用的日期格式 首先要引入mobiscroll.css和mobiscroll.js如下: // 适配手机大小,防止手动 ...
最新文章
- Java 9推迟6个月发布?
- 用linux下常用命令wget进行整站下载(递归下载至本地)
- jupyter 安装目录Table of Contents
- WSUS部署中...
- python的具体功能_python基本数据类型及常用功能
- postGIS相关数据库参数
- vue新版本和旧版本关闭eslint总结
- 矩阵乘法c语言3*3,c语言矩阵相乘
- oracle数据库中索值,Oracle数据库中的索引详解
- 164. Maximum Gap
- string相关库函数
- 上岸 | 震惊!211高校硕士毕业后,我在非洲当酋长!
- 大前端算法入门之二分查找
- 软件开发中团队能力的培养
- BZOJ 2176 Strange string 最小表示法
- matplotlib无法显示图片的解决方法(non-gui backend)
- 个人计算机分为桌面计算机和便携式计算机,2013年恩施州中等职业学校文化基础课教学质量监测考试试卷...
- 介绍一下ISO9000质量标准
- 用JavaScript做一个日历和用canvas做一个时钟
- 自动化车辆的开发、测试和验证场景