返回介绍

开发指南

组件

JS

模板

Calendar 日历

发布于 2021-04-03 05:35:24 字数 6805 浏览 935 评论 0 收藏 0

Calendar 日历 1.3.0 平台差异说明
AppH5微信小程序支付宝小程序百度小程序头条小程序QQ小程序

基本使用

  • 通过v-model绑定一个布尔变量用于打开或收起日历弹窗。
  • 通过mode参数指定选择单个日期,还是选择日期范围。
<template>
	<view>
		<u-calendar v-model="show" :mode="mode"></u-calendar>
		<u-button @click="show = true">打开</u-button>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				show: false,
				mode: 'date'
			}
		}
	}
</script>

日历模式

  • modedate只能选择单个日期
  • moderange可以选择日期范围

单个日期模式

选择日期后,需要点击底部的确定按钮才能触发回调事件,回调参数为一个对象,有如下属性:

{
	day: 4, // 选择了哪一天
	days: 30, // 这个月份有多少天
	isToday: true, // 选择的日期是否今天
	month: 6, // 选择的月份
	result: "2020-06-04", // 选择的日期整体值
	week: "星期四", // 选择日期所属的星期数
	year: 2020 , // 选择的年份
}

示例代码:

<template>
	<u-calendar v-model="show" :mode="mode" @change="change"></u-calendar>
</template>

<script>
	export default {
		data() {
			return {
				show: true,
				mode: 'date'
			}
		},
		methods: {
			change(e) {
				console.log(e);
			}
		}
	}
</script>

日期范围模式

此模式用于选择一个日期范围,比如住酒店的入住到离店的日期范围,有如下可配置的参数:

  • active-bg-color参数配置起始/结束日期按钮的背景色
  • active-color参数配置起始/结束日期按钮的字体颜色
  • range-bg-color参数配置起始/结束日期之间的区域的背景颜色,默认为rgba(41,121,255,0.13),为浅蓝色
  • start-text参数用于设置起始日期底部的提示文字,如"住店"
  • end-text参数用于设置结束日期底部的提示文字,如"离店"

此模式的返回参数如下:

{
	endDate: "2020-06-04", // 选择的结束日期
	endDay: 4, // 结束日期是哪一天
	endMonth: 6, // 结束日期的月份
	endWeek: "星期四", // 结束日期的星期数
	endYear: 2020, // 结束日期的年份
	startDate: "2020-06-01", // 选择的起始日期
	startDay: 1, // 起始日期是哪一天
	startMonth: 6, // 起始日期的月份
	startWeek: "星期一", // 起始日期的星期数
	startYear: 2020 // 起始日期的年份
}

示例代码:

<template>
	<u-calendar v-model="show" :mode="mode" @change="change"></u-calendar>
</template>

<script>
	export default {
		data() {
			return {
				show: true,
				mode: 'range'
			}
		},
		methods: {
			change(e) {
				console.log(e);
			}
		}
	}
</script>

自定义内容

组件有一个默认插槽,名为tooltip,传入的内容将会显示在键盘的顶部位置,如使用,需要为传入的内容自定义样式。

<template>
	<u-calendar v-model="show" :mode="mode" @change="change">
		<view slot="tooltip">
			<view class="title">
				请选择住店/离店时间
			</view>
		</view>
	</u-calendar>
</template>

<script>
	export default {
		data() {
			return {
				show: true,
				mode: 'range'
			}
		},
		methods: {
			change(e) {
				console.log(e);
			}
		}
	}
</script>

<style lang="scss" scoped>
	.title{
		color: $u-type-primary;
		text-align: center;
		padding: 20rpx 0 0 0;
	}
</style>

API

Props

参数说明类型默认值可选值
mode选择日期的模式,date-为单个日期,range-为选择日期范围Stringdaterange
v-model布尔值变量,用于控制日历的弹出与收起Booleanfalsetrue
safe-area-inset-bottom是否开启底部安全区适配Booleanfalsetrue
change-year是否显示顶部的切换年份方向的按钮Booleantruefalse
change-month是否显示顶部的切换月份方向的按钮Booleantruefalse
max-year可切换的最大年份Number | String2050-
min-year可切换的最小年份Number | String1950-
min-date最小可选日期Number | String1950-01-01-
max-date最大可选日期Number | String当前日期-
border-radius弹窗顶部左右两边的圆角值,单位rpxNumber | String20-
mask-close-able是否允许通过点击遮罩关闭日历Booleantruefalse
month-arrow-color月份切换按钮箭头颜色String#606266-
year-arrow-color年份切换按钮箭头颜色String#909399-
color日期字体的默认颜色String#303133-
active-bg-color起始/结束日期按钮的背景色String#2979ff-
z-index弹出时的z-indexString | Number10075-
active-color起始/结束日期按钮的字体颜色String#ffffff-
range-bg-color起始/结束日期之间的区域的背景颜色Stringrgba(41,121,255,0.13)-
range-color选择范围内字体颜色String#2979ff-
start-text起始日期底部的提示文字String开始-
end-text结束日期底部的提示文字String结束-
btn-type底部确定按钮的主题Stringprimarydefault / success / info/ warning / error
toolTip顶部提示文字,如设置名为tooltipslot,此参数将失效String选择日期-
closeable是否显示右上角的关闭图标Booleantruefalse

Slot

名称说明
tooltip自定义日历顶部的内容

Event

事件名说明回调参数
change点击右上角确定按钮时触发选择日期相关的返回参数

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。
列表为空,暂无数据
    我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
    原文