# Calendar 日历

此组件用于单个选择日期，范围选择日期等，日历被包裹在底部弹起的容器中。

注意： 此组件与Picker 选择器的日期选择模式有一定的重合之处，区别在于本组件为更专业的日期选择场景，能选择日期范围等。 另外Picker组件的日期模式可以配置更多的参数，如时、分、秒等，可以根据不同的使用场景进行选择。

# 平台差异说明

# 基本使用

• 通过v-model绑定一个布尔变量用于打开或收起日历弹窗。
• 通过mode参数指定日历的选择模式。

<template>
  <view>
    <tn-calendar v-model="show" mode="date"></tn-calendar>
    <tn-button @click="show = true">打开日历</tn-button>
  </view>
</template>

# 日历模式

• mode为date时选择单个日期。
• mode为range时选择一段日期范围。

# 单日期模式

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

{
    year: 2021, // 选择的年份
    month: 11, // 选择的月份
    day: 11, // 选择的哪一天
    days: 30, // 当前选中月有多少天
    week: '星期四', // 选择日期对应的星期数
    isToday: false, // 选中的日期是否为今天
    date: '2021-11-11', // 选择日期的整体值
    switch: false // 是否为切换年月操作
}

# 日期范围模式

此模式用于选择一个日期范围，回调参数为一个对象，有如下属性：

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

# 自定义内容

为了方便用户根据不同的业务场景显示不同的提示信息，该组件提供了以下参数可以供用户对提示信息进行自定义设置：

• toolTips设置顶部的提示信息

  • 也可以使用名为tooltip的插槽进行自定义(此时toolTips参数设置的值失效)

• startText设置当mode为range时开始日期下的提示文字

• endText设置当mode为range时结束日期下的提示文字

<tn-calendar v-model="show" mode="range" toolTips="入住/离开日期" startText="入住" endText="离开"></tn-calendar>

# API

# Props

# Slots

# Event