Calendars 新版日历（推荐）

您所在的位置：网站首页 › 显示阴历时间的app › Calendars 新版日历（推荐）

Calendars 新版日历（推荐）

2024-07-07 21:08| 来源: 网络整理| 查看: 265

# Calendars 新版日历（推荐）

✈

组件名：uv-calendars

点击下载&安装 (opens new window)

为了解决老版本uv-calendar性能问题，特别是对日期选择范围有很大限制，体验不友好等缺点。于是有了新版日历组件。

新版本uv-calendars，不仅拥有老版本的所有功能，还增加了更加适用的插入页面等强大功能，且更加简洁。查看日期、选择单个或多个或任意范围日期，打点操作，自定义文案，自定义主题等强大功能。

常用场景：酒店日期预订、火车机票选择购买日期、上下班打卡等。

# 平台兼容性 App（vue） App（nvue） H5 小程序 VUE2 VUE3 √ √ √ √ √ √

注意事项

为了避免错误使用，给大家带来不好的开发体验，请在使用组件前仔细阅读下面的注意事项，可以帮你避免一些错误。

本组件农历转换使用的js是 @1900-2100区间内的公历、农历互转 (opens new window) date属性传入的应该是一个 String ，如： 2023-08-03 ，而不是 new Date() 通过 insert 属性来确定当前的事件是 @change 还是 @confirm 。理应合并为一个事件，但是为了区分模式，现使用两个事件，这里需要注意弹窗模式下无法阻止后面的元素滚动，如有需要阻止，请在弹窗弹出后，手动设置滚动元素为不可滚动，参考uv-popup等组件怎么禁止滚动穿透 (opens new window) # 基本使用

通过 ref 调用 open() 方法打开日历

打开日历 export default { methods: { open() { this.$refs.calendars.open(); }, confirm(e) { console.log(e) } } } # 插入模式

通过设置 insert 属性为 true

export default { methods: { change(e) { console.log(e) } } } # 多个日期模式通过设置 mode 属性为 multiple 该模式的默认值可通过 date 设置，eg：['2023-08-26','2023-08-27','2023-08-28'] 打开日历 export default { methods: { open() { this.$refs.calendars.open(); }, confirm(e) { console.log(e) } } } # 日期范围模式通过设置 mode 属性为 range 该模式的默认值可通过 date 设置，eg：['2023-08-26','2023-08-29'] 打开日历 export default { methods: { open() { this.$refs.calendars.open(); }, confirm(e) { console.log(e) } } } # 自定义主题颜色

通过设置 color 属性，更改组件主题色，该值建议传16进制颜色值，如：#ff0000。

打开日历 export default { methods: { open() { this.$refs.calendars.open(); }, confirm(e) { console.log(e) } } } # 自定义文案

通过设置 selected 属性，该属性是一个json数组，具体参数参考selected-options。

打开日历 export default { data() { const d = new Date() const year = d.getFullYear() let month = d.getMonth() + 1 month = month

【本文地址】

Calendars 新版日历（推荐）

Calendars 新版日历（推荐）

今日新闻

推荐新闻