日历

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

组件结构

<template>
	<view>
		<view :class="{ 'tui-bottom-popup': isFixed, 'tui-popup-show': isShow && isFixed }">
			<view class="tui-calendar-header" :class="{ 'tui-calendar-radius': radius }" @touchmove.stop.prevent="stop" v-if="isFixed">
				<view>日期选择</view>
				<view class="tui-iconfont tui-font-close" hover-class="tui-opacity" :hover-stay-time="150" @tap="hide"></view>
			</view>
	
			<view class="tui-date-box">
				<view class="tui-iconfont tui-font-arrowleft" :style="{ color: yearArrowColor }" hover-class="tui-opacity"
				 :hover-stay-time="150" v-if="arrowType == 1" @tap="changeYear(0)"></view>
				<view class="tui-iconfont tui-font-arrowleft" :style="{ color: monthArrowColor }" hover-class="tui-opacity"
				 :hover-stay-time="150" @tap="changeMonth(0)"></view>
				<view class="tui-date_time">{{ showTitle }}</view>
				<view class="tui-iconfont tui-font-arrowright" :style="{ color: monthArrowColor }" hover-class="tui-opacity"
				 :hover-stay-time="150" @tap="changeMonth(1)"></view>
				<view class="tui-iconfont tui-font-arrowright" :style="{ color: yearArrowColor }" hover-class="tui-opacity"
				 :hover-stay-time="150" v-if="arrowType == 1" @tap="changeYear(1)"></view>
			</view>
			<view class="tui-date-header">
				<view class="tui-date"></view>
				<view class="tui-date"></view>
				<view class="tui-date"></view>
				<view class="tui-date"></view>
				<view class="tui-date"></view>
				<view class="tui-date"></view>
				<view class="tui-date"></view>
			</view>
			<view class="tui-date-content" :class="{ 'tui-flex-start': isFixed && fixedHeight }" :style="{ height: isFixed && fixedHeight ? dateHeight * 6 + 'px' : 'auto' }">
				<block v-for="(item, index) in weekdayArr" :key="index">
					<view class="tui-date"></view>
				</block>
				<view class="tui-date" :class="{
						'tui-date-pd_0': isFixed && fixedHeight,
						'tui-opacity': openDisAbled(year, month, index + 1),
						'tui-start-date': (type == 2 && startDate == `${year}-${month}-${index + 1}`) || type == 1,
						'tui-end-date': (type == 2 && endDate == `${year}-${month}-${index + 1}`) || type == 1
					}"
				 :style="{ backgroundColor: isFixed ? getColor(index, 1) : 'transparent', height: isFixed && fixedHeight ? dateHeight + 'px' : 'auto' }"
				 v-for="(item, index) in daysArr" :key="index" @tap="dateClick(index)">
					<view class="tui-date-text" :style="{ color: isFixed ? getColor(index, 2) : getStatusData(3, index), backgroundColor: getStatusData(2, index) }">
						<view v-if="isFixed || !getStatusData(4, index)">{{ index + 1 }}</view>
						<view v-if="!getStatusData(4, index)" class="tui-custom-desc" :class="{'tui-lunar-unshow':!lunar && isFixed}">{{ getDescText(index,startDate,endDate)}}</view>
						<text class="tui-iconfont tui-font-check" v-if="getStatusData(4, index)"></text>
					</view>
					<view class="tui-date-desc" :style="{ color: activeColor }" v-if="!lunar && type == 2 && startDate == `${year}-${month}-${index + 1}` && startDate != endDate">
						{{ startText }}
					</view>
					<view class="tui-date-desc" :style="{ color: activeColor }" v-if="!lunar && type == 2 && endDate == `${year}-${month}-${index + 1}`">{{ endText }}</view>
				</view>
				<view class="tui-bg-month">{{ month }}</view>
			</view>
	
			<view class="tui-calendar-op" v-if="isFixed" @touchmove.stop.prevent="stop">
				<view class="tui-calendar-result">
					<text>{{ type == 1 ? activeDate : startDate }}</text>
					<text v-if="endDate">至{{ endDate }}</text>
				</view>
				<view class="tui-calendar-btn_box">
					<tui-button :type="btnType" height="72rpx" shape="circle" :size="28" @click="btnFix(false)">确定</tui-button>
				</view>
			</view>
		</view>
	
		<view class="tui-popup-mask" :class="[isShow ? 'tui-mask-show' : '']" @touchmove.stop.prevent="stop" v-if="isFixed"
		 @tap="hide"></view>
	</view>
</template>

组件脚本

<script>
	export default {
		name: 'tuiCalendar',
		
		...省略n行
		
	}
</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

methods

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

示例

H5预览地址

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

H5二维码

小程序二维码