# fu-calendar 日历
此组件用于单个选择日期，范围选择日期，日历展示，日历没有任何容器包裹，如果需要弹窗，需要套用弹窗组件。
# 平台差异
| App | H5 | 微信小程序 | 支付宝小程序 | 百度小程序 | 头条小程序 |
|---|---|---|---|---|---|
| √ | √ | √ | √ | √ | √ |
# 基本使用
- 默认mode为date，单个日期选择。
<template>
<view>
<fu-calendar></fu-calendar>
</view>
</template>
1
2
3
4
5
2
3
4
5
# 日期模式
- 通过mode参数指定选择单个日期，日期范围，纯日历展示。
- mode为date选择单个日期
- mode为range选择日期范围，通过传入开始结束时间，默认展示时间段
- mode为signin日历展示，通过传参显示高亮日期
# 单个日期模式
- 选择日期后，触发回调事件，回调参数为一个对象，有如下属性：
{
allDays: 31,//选择的月份有多少天
day: 7,//选择了哪一天
month: 1,//选择的月份
time: "2021-01-07",//选择的日期整体值
week: "星期四",//选择的日期星期几
year: 2021,//选择日期的年份
}
1
2
3
4
5
6
7
8
2
3
4
5
6
7
8
- 示例代码
<template>
<view>
<fu-calendar @change="change" :mode="mode"></fu-calendar>
</view>
</template>
<script>
export default{
data(){
return{
mode:'date'
}
},
method:{
change(data){
console.log(data);
}
}
}
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
- 示例图片
# 日期范围模式
- 此模式用于选择一个日期范围，比如住酒店的入住到离店的日期范围，有如下可配置的参数：
active-bg-color参数配置起始/结束日期按钮的背景色，该配置对单日期选择,日历日期展示同样适用range-bg-color参数配置起始/结束日期之间的区域的背景颜色，默认为rgba(41,121,255,0.13)，为浅蓝色start-text参数用于设置起始日期底部的提示文字，如"住店"end-text参数用于设置结束日期底部的提示文字，如"离店"
- 此模式触发回调事件，回调参数为一个对象，有如下属性：
{
start: "2021-01-01",// 选择的起始日期
startDay: 1,// 起始日期是哪一天
startMonth: 1,// 起始日期的月份
startWeek: "星期五",// 起始日期的星期数
startYear: 2021,// 起始日期的年份
end: "2021-01-15",// 选择的结束日期
endDay: 15,// 结束日期是哪一天
endMonth: 1,// 结束日期的月份
endWeek: "星期五",// 结束日期的星期数
endYear: 2021,// 结束日期的年份
}
1
2
3
4
5
6
7
8
9
10
11
12
2
3
4
5
6
7
8
9
10
11
12
- 示例代码
<template>
<view>
<fu-calendar @change="change" :mode="mode"></fu-calendar>
</view>
</template>
<script>
export default{
data(){
return{
mode:'range'
}
},
method:{
change(data){
console.log(data);
}
}
}
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
- 示例图片
# 单个日期模式
- 选择日期后，触发回调事件，回调参数为一个对象，有如下属性：
{
allDays: 31,//选择的月份有多少天
day: 7,//选择了哪一天
month: 1,//选择的月份
time: "2021-01-07",//选择的日期整体值
week: "星期四",//选择的日期星期几
year: 2021,//选择日期的年份
}
1
2
3
4
5
6
7
8
2
3
4
5
6
7
8
- 示例代码
<template>
<view>
<fu-calendar :mode="mode" :signinData="signinData"></fu-calendar>
</view>
</template>
<script>
export default{
data(){
return{
mode:'signin',
signinData:['2021-01-02','2021-01-04','2021-01-05']
}
},
method:{
}
}
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
- 示例图片
# API
# Props
| 参数 | 说明 | 类型 | 默认值 | 可选值 |
|---|---|---|---|---|
| month-arrow-color | 月份切换按钮箭头颜色 | string | #666666 | |
| year-arrow-color | 年份切换按钮箭头颜色 | string | #999999 | |
| change-title | 是否显示顶部年月 | boolean | true | true/false |
| change-year | 是否显示顶部的切换年份方向的按钮 | boolean | true | true/false |
| change-month | 是否显示顶部的切换月份方向的按钮 | boolean | true | true/false |
| mode | 日期模式 date 单个日期选择模式 range 日期段选择模式 signin 签到日期展示模式 | string | date | date/range/singin |
| future | 未来日期是否可选择 默认不可选择 | boolean | true | true/false |
| start-time | 日期段选择时默认显示开始时间，start-time/end-time若只传入一个日期则不显示，格式xxxx-yy-dd | string | ||
| end-time | 日期段选择时默认显示结束时间 ，格式xxxx-yy-dd | string | ||
| start-text | 起始日期底部的提示文字 | string | 开始 | |
| end-text | 结束日期底部的提示文字 | string | 结束 | |
| active-bg-color | 选择日期开始结束背景色 | string | rgba(41,121,255,1) | |
| range-bg-color | 选择日期中间的背景色 | string | rgba(41,121,255,0.13) | |
| isDefaultDay | 当前日期是否高亮 | boolean | true | true/false |
| signinData | 签到模式数据 [xxxx-yy-dd] | array | [] |
# 事件
| 事件名 | 说明 | 回调参数 |
|---|---|---|
| change | 选择变化时触发的事件 | 选择日期相关的返回参数 |