# 日历

calendar日历: 可选择单个日期,可选择日期区间(可跨年跨月),支持设置日期可选范围,支持设置状态。

# 代码示例-结构

<template>
	<view>
		<tui-button margin="36rpx 0 0" type="white" shape="circle" @click="selectDate(1)">选择单个日期</tui-button>
		<tui-button margin="36rpx 0 0" type="white" shape="circle" @click="selectDate(3)">设置日历可选范围</tui-button>
		<tui-button margin="36rpx 0 0" type="white" shape="circle" @click="selectDate(2)">选择日期区间</tui-button>
		<tui-button margin="36rpx 0 0" type="white" shape="circle" @click="selectDate(4)">自定义颜色</tui-button>
		<tui-button margin="36rpx 0 0" type="white" shape="circle" @click="selectDate(5)">自定义区间文字</tui-button>
		<tui-button margin="36rpx 0 0" type="white" shape="circle" @click="selectDate(6)">只能切换月份</tui-button>
		<tui-button margin="36rpx 0 0" type="white" shape="circle" @click="selectDate(7)">设置默认值</tui-button>
	
		<tui-calendar
			:lunar="lunar"
			isFixed
			:minDate="minDate"
			:maxDate="maxDate"
			:btnType="btnType"
			:activeBgColor="activeBgColor"
			:rangeBgColor="rangeBgColor"
			:rangeColor="rangeColor"
			:startText="startText"
			:endText="endText"
			:arrowType="arrowType"
			:type="type"
			:initStartDate="initStartDate"
			:initEndDate="initEndDate"
			ref="calendar"
			@change="change"
		></tui-calendar>
	</view>
</template>

# 代码示例-脚本

<script>
	export default {
		data() {
			return {
				type: 1,
				status: [],
				arrowType: 1,
				minDate: '1920-01-01',
				maxDate: '',
				btnType: 'primary',
				activeBgColor: '#5677fc',
				rangeBgColor: 'rgba(86,119,252,0.1)',
				rangeColor: '#5677fc',
				startText: '开始',
				endText: '结束',
				lunar: true,
				result: '',
				lunarResult: '',
				initStartDate: '',
				initEndDate: ''
			};
		},
		methods: {
			switchChange(e) {
				this.lunar = e.target.value;
			},
			selectDate(type) {
				this.arrowType = 1;
				this.minDate = '1920-01-01';
				this.maxDate = '';
				this.btnType = 'primary';
				this.activeBgColor = '#5677fc';
				this.rangeBgColor = 'rgba(86,119,252,0.1)';
				this.rangeColor = '#5677fc';
				this.startText = '开始';
				this.endText = '结束';
				this.initStartDate = '';
				this.initEndDate = '';
				switch (type) {
					case 1:
						this.type = 1;
						break;
					case 2:
						this.type = 2;
						break;
					case 3:
						this.minDate = '2020-04-01';
						this.maxDate = '2021-06-08';
						this.type = 1;
						break;
					case 4:
						this.type = 2;
						this.btnType = 'danger';
						this.activeBgColor = '#EB0909';
						this.rangeBgColor = 'rgba(235,9,9,0.1)';
						this.rangeColor = '#EB0909';
						this.arrowType = 1;
						break;
	
					case 5:
						this.type = 2;
						this.startText = '住店';
						this.endText = '离店';
						break;
					case 6:
						this.arrowType = 2;
						break;
					case 7:
						this.type = 2;
						this.initStartDate = '2020-06-06';
						this.initEndDate = '2020-06-28';
						break;
					default:
						break;
				}
				this.$refs.calendar.show();
			},
			change(e) {
				console.log(e);
				if (this.type == 1) {
					this.result = e.result + ' ' + e.week;
					let date = `${e.lunar.lYear}-${e.lunar.lMonth}-${e.lunar.lDay}`;
					this.lunarResult = `${e.lunar.gzYear}年,${e.lunar.gzMonth}月,${e.lunar.gzDay}日 。生肖:${e.lunar.Animal}。日期:${e.lunar.IMonthCn + e.lunar.IDayCn}(${date})`;
				} else {
					this.result = `${e.startDate}${e.endDate}`;
					let sDate = `${e.startLunar.IMonthCn + e.startLunar.IDayCn}(${e.startLunar.lYear}-${e.startLunar.lMonth}-${e.startLunar.lDay})`;
					let eDate = `${e.endLunar.IMonthCn + e.endLunar.IDayCn}(${e.endLunar.lYear}-${e.endLunar.lMonth}-${e.endLunar.lDay})`;
					this.lunarResult = `${sDate}${eDate}`;
				}
			}
		}
	};
</script>

# 组件样式

... 此处省略n行

# 脚本说明

# props

参数 类型 描述 默认值
arrowType [Number, String] 1-切换月份和年份 2-切换月份 1
type Number 1-单个日期选择 2-开始日期+结束日期选择 1
maxYear Number 可切换最大年份 2030
minYear Number 可切换最小年份 1920
minDate String 最小可选日期(不在范围内日期禁用不可选) 1920-01-01
maxDate String 最大可选日期,默认最大值为今天 ''
radius Boolean 显示圆角 true
status Array 状态 数据顺序与当月天数一致,index=>day []
monthArrowColor String 月份切换箭头颜色 #999
yearArrowColor String 年份切换箭头颜色 #bcbcbc
color String 默认日期字体颜色 #333
activeBgColor String 选中 起始结束日期背景色 #5677fc
activeColor String 选中 起始结束日期字体颜色 #fff
rangeBgColor String 范围内日期背景色 rgba(86,119,252,0.1)
rangeColor String 范围内日期字体颜色 #5677fc
startText String type=2时生效,起始日期自定义文案 开始
endText String type=2时生效,结束日期自定义文案 结束
btnType String 按钮样式类型 primary
isFixed Boolean 是否固定底部弹出选择 false
isActiveCurrent Boolean 当前选中日期带选中效果 true
isChange Boolean 切换年月是否触发事件 type=1时生效 false
lunar Boolean 是否显示农历 false
initStartDate String 初始化起始选中日期 格式: 2020-06-06 或 2020/06/06 【type=1 or 2】 ""
initEndDate String 初始化结束日期 格式: 2020-06-06 或 2020/06/06【type=2】 ""

# methods

名称 描述
@change 回传日期数据事件

# 示例

# H5预览地址

https://www.thorui.cn/h5/#/pages/extend/calendar/calendar

# H5二维码

# 小程序二维码