# Calendars 新版日历（推荐） 
为了解决老版本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() 方法打开日历
<template>
<view>
<uv-calendars ref="calendars" @confirm="confirm" />
<button @click="open">打开日历</button>
</view>
</template>
<script>
export default {
methods: {
open() {
this.$refs.calendars.open();
},
confirm(e) {
console.log(e)
}
}
}
</script>
# 插入模式
通过设置 insert 属性为 true
<template>
<view>
<uv-calendars insert @change="change" />
</view>
</template>
<script>
export default {
methods: {
change(e) {
console.log(e)
}
}
}
</script>
# 多个日期模式
- 通过设置
mode属性为multiple - 该模式的默认值可通过
date设置，eg：['2023-08-26','2023-08-27','2023-08-28']
<template>
<view>
<uv-calendars ref="calendars" mode="multiple" @confirm="confirm" />
<button @click="open">打开日历</button>
</view>
</template>
<script>
export default {
methods: {
open() {
this.$refs.calendars.open();
},
confirm(e) {
console.log(e)
}
}
}
</script>
# 日期范围模式
- 通过设置
mode属性为range - 该模式的默认值可通过
date设置，eg：['2023-08-26','2023-08-29']
<template>
<view>
<uv-calendars ref="calendars" mode="range" @confirm="confirm" />
<button @click="open">打开日历</button>
</view>
</template>
<script>
export default {
methods: {
open() {
this.$refs.calendars.open();
},
confirm(e) {
console.log(e)
}
}
}
</script>
# 自定义主题颜色
通过设置 color 属性，更改组件主题色，该值建议传16进制颜色值，如：#ff0000。
<template>
<view>
<uv-calendars
ref="calendars"
mode="range"
color="#ff0000"
:date="['2023-08-08','2023-08-27']"
@confirm="confirm" />
<button @click="open">打开日历</button>
</view>
</template>
<script>
export default {
methods: {
open() {
this.$refs.calendars.open();
},
confirm(e) {
console.log(e)
}
}
}
</script>
# 自定义文案
通过设置 selected 属性，该属性是一个json数组，具体参数参考selected-options。
<template>
<view>
<uv-calendars
ref="calendars"
mode="range"
title="选择日期"
start-text="住店"
end-text="离店"
:selected="selected"
@confirm="confirm"
/>
<button @click="open">打开日历</button>
</view>
</template>
<script>
export default {
data() {
const d = new Date()
const year = d.getFullYear()
let month = d.getMonth() + 1
month = month < 10 ? `0${month}` : month
const date = d.getDate()
return {
selected: [{date: `${year}-${month}-02`, info: '签到', badge: true, infoColor: '#ff0000'},{date: `${year}-${month}-06`, info: '余10',infoColor: '#19be6b', topinfo: '￥100', topinfoColor: '#19be6b'}]
}
},
methods: {
open() {
this.$refs.calendars.open();
},
confirm(e) {
console.log(e)
}
}
}
</script>
# 完整示例
# API
# Calendars Props
| 参数 | 类型 | 默认值 | 说明 |
|---|---|---|---|
| date | String | 今天 | 自定义默认选中日期，不传默认为今天。mode="multiple"或mode="range"时，该值为数组，例 ['2023-08-26','2023-08-29']。mode不传或字符串，例如2023-08-26，即为单日期模式 |
| lunar | Boolean | false | 显示农历 |
| mode 1.0.7 | String | - | 日期类型选择，可选值：不填 | multiple | range，分别为单日期选择，多日期选择，范围选择 |
| insert | Boolean | false | 插入模式,可选值，ture：插入模式；false：弹窗模式；默认为插入模式 |
| clearDate | Boolean | true | 弹窗模式是否清空上次选择内容 |
| selected | Array | - | 打点，期待格式[{date: '2019-06-27', info: '签到', disable: false}]，更多设置参考自定义文案，更多参数参考Selected Options |
| startDate | String | - | 限制日期选择范围-开始日期，格式如："2023-01-01"，禁用该日期之前的日期 |
| endDate | String | - | 限制日期选择范围-结束日期，格式如："2023-02-01"，禁用该日期之后的日期 |
| showMonth | Boolean | true | 是否显示月份为背景 |
| round | String|Number | 8px | 弹窗模式，圆角 |
| color | String | #3c9cff | 主题颜色，建议16进制颜色（如：#ff0000），否则range模式下区间颜色会显示异常 |
| confirmColor | String | #3c9cff | 确认按钮颜色 |
| cancelColor | String | #909193 | 取消按钮颜色 |
| closeOnClickOverlay | Boolean | true | 点击遮罩是否关闭弹窗 |
| startText | String | 开始 | range为true时，第一个日期底部的提示文字 |
| endText | String | 结束 | range为true时，最后一个日期底部的提示文字 |
| allowSameDay1.0.11 | Boolean | false | 是否允许日期范围的起止时间为同一天，mode = range时有效 |
| readonly1.0.15 | Boolean | false | 是否为只读状态，只读状态下禁止选择日期 |
# Selected Options
示例参考自定义文案
| 属性名 | 说明 |
|---|---|
| date | 日期，格式：YYYY-mm-dd |
| info | 底部文案 |
| infoColor | 底部文案颜色 |
| topinfo | 头部文案 |
| topinfoColor | 头部文案颜色 |
| badge | 是否显示右上角红点 |
| disable | 是否禁止点击该日期 |
# Calendars Methods
| 方法名 | 说明 |
|---|---|
| open | insert 为 false 时，调用此方法弹出日历组件 |
# Calendars Events
| 事件名 | 说明 | 返回参数 |
|---|---|---|
| @confirm | 点击确定按钮触发 | 返回日期相关参数，fulldate - 单日期；multiple - 多日期；range - 范围选择；其他相关参数 |
| @close | 关闭日历时触发 | - |
| @change | 点击日期时触发 | 返回日期相关参数，fulldate - 单日期；multiple - 多日期；range - 范围选择；其他相关参数；insert为true时生效 |
| @monthSwitch | 选择年月确认时触发 | { year: 2030, month: '08' } |
注意
示例依赖了 uv-popup uv-toolbar uv-ui-tools 等多个组件，直接拷贝示例代码将无法正常运行。
请到 组件下载页面 (opens new window) ，在页面右侧选择 使用 HBuilderX导入示例项目 。