Calendar 日历

介绍

通常用于选择特定日期或一段时间。

使用指南

一般用法

默认是区间选择模式

<tms-button bind:click="handleClick">常规用法</tms-button>
<tms-calendar show="{{show}}"/>

Component({
  data:{
    show:false,
  },
  methods: { 
    handleClick() {
      this.setData({
        show: true,
      })
    }
  }
})

单选模式

<tms-calendar show="{{show}}" select-type="single"/>

多选模式

<tms-calendar show="{{show}}" select-type="multi"/>

自定义日期范围

<tms-calendar show="{{show}}" min-date="{{minDate}}" max-date="{{maxDate}}"/>

Component({
  data:{
    show:false,
    minDate: new Date().getTime() / 1000,
    maxDate: new Date().getTime() / 1000 + 3600 * 24 * 60,
  },
})

自定义样式和文案

<tms-calendar show="{{show}}" formatter="{{formatter}}"/>

Component({
  data:{
    show:false,
    formatter(day){
      if (day.selectStatus === 'select-start') {
        day.info = '取车';
        day.title = '进店';
      } else if (day.selectStatus === 'select-mid') {
        day.info = '用车';
        day.title = '使用中';
      } else if (day.selectStatus === 'select-end') {
        day.info = {
          text: '还车',
          leftIcon: 'star'
        };
        day.style = 'background:red;';
        day.text = 'DL';
        day.title = {
          text: '结算',
          rightIcon: 'star',
          style: 'color:red;',
        };
      } else {
        day.info = '';
        day.title = '';
      }
      return day;
    }
  },
})

自定义月份文案和样式

<tms-calendar show="{{show}}" month-formatter="{{customMonthFormatter}}"/>

Component({
  data:{
    show:false,
    customMonthFormatter(item) {
      item.text = `${item.month}月`;
      const index = new Date(item.year, item.month - 1, 1).getDay();
      const left = (100 / 7) * (index + .5);
      item.style = `display:inline-block;color:red;margin-left:${left}%;transform:translate(-50%, 0);`;
      return item;
    },
  },
})

只读模式下，定义初始数据。

<tms-calendar show="{{show}}" selected-data="{{selectedData}}" read-only/>

Component({
  data:{
    show:false,
    selectedData: [
      Math.floor(new Date().getTime() / 1000),
      Math.floor(new Date().getTime() / 1000) + 3600 * 24 * 3],
  },
})

滚动到指定月份。

在attached生命周期中调用该方法可能不生效，因为组件数据尚未加载完成。

<tms-calendar show="{{show}}" id="vCalendar"/>

Component({
  data:{
    show:true,
  },
  ready() {
    this.selectComponent('#vCalendar').scrollToMonth(2);
  }
})

API

属性	说明	类型	默认值	版本
selected-data	定义初始数据,见下文详细说明。	Array	[]
show	控制显示隐藏组件	boolean	false
pop-style	默认弹窗模式,false为平铺模式(在文档流中)	boolean	true
read-only	只读模式,点击无效。	boolean	false
show-dynamic-title	在顶部显示当前滚动到的月份文案。	boolean	true
show-confirm	显示底部确认按钮。	boolean	true
hide-close-icon	隐藏右上角关闭图标。	boolean	false
control	是否受控，点击确定按钮、蒙层和关闭按钮不会自动隐藏。	boolean	false
max-range-length	区间选择模式下最大可选区间长度。	Number	Infinity
hide-over-range-select-tip	超出选择范围时的提示，是否隐藏。	boolean	false
select-type	操作类型：单选、多选、区间选择，见下表。	string	range
formatter	接收日期数据，自定义显示，见demo:自定义样式和文案。	Function	-
month-formatter	接收月份数据，自定义显示，见demo:自定义月份文案和样式。	Function	-
min-date	最小可选日期，单位秒。	timestamp	-	当前日期
max-date	最大可选日期，单位秒。	timestamp	-	当前日期往后180天
select-start-style	自定义区间选择起始日期的样式	string	-
select-mid-style	自定义区间中间日期的样式	string	-
select-end-style	自定义区间选择结束日期的样式	string	-
confirm-button-style	自定义底部确认按钮的样式	string	-

select-type属性可选值列表和对应的selected-data说明
selected-data为已选中日期数据数组，数据格式为10位长度的时间戳格式，必须为0点时刻的时间戳，其它时刻可能导致匹配失败。

属性	说明	selected-data
single	单选模式	最多只有一项,所选中的日期时间戳
multi	多选模式	所有选中项的日期时间戳
range	区间选择模式	区间选择的起点和终点时间戳，最多两个成员，一个时为起点。

实例方法scrollToMonth: 参数为需要滚动到的月份下标，0滚动到第一个月份，1第二个，以此类推。

EVENTS

属性	说明	类型
bind:on-select-change	选择数据改变时触发，返回新的选中数据集合，具体见下表	(event) => {}
bind:on-tap-day	点击日期时触发，返回当前日期和点击后的选中数据selected-data	(event) => {}
bind:on-click-confirm	点击底部确认按钮	(event) => {}
bind:on-click-close-icon	点击右上角关闭图标事件	(event) => {}
bind:on-click-overlay	点击灰色遮罩层事件	(event) => {}
bind:on-month-scroll	滚动到不同月份位置时的事件	(event) => {}

on-select-change事件在不同模式下返回的数组含义和selected-data相同，只是数据成员为对象，数据结构如下

属性	说明	类型
date	Date对象	Date
time	10位时间戳	Number
year	日期的年份	Number
month	日期的月份	Number
day	所选日期（XX号）	Number

on-month-scroll数据结构如下

属性	说明	类型
year	当前滚动到的年份	Number
month	当前滚动到的月份	Number

CSS变量

// 单个元素高度
--calendar-cell-height: 120rpx;
// 日期点击态透明度
--calendar-hover-opacity: .6;
// 日期数字元素宽高
--calendar-cell-text-size: 54rpx;
// 日期数字元素字体大小
--calendar-cell-text-font-size: 32rpx;
// 日期数字上面title字体大小
--calendar-cell-title-font-size: 22rpx;
// 日期数字上面title icon大小
--calendar-cell-title-icon-size: 22rpx;
// 日期数字下面info字体大小
--calendar-cell-info-font-size: 22rpx;
// 日期数字下面info icon大小
--calendar-cell-info-icon-size: 22rpx;
// 元素整体背景色
--calendar-cell-background: none;
// 选中日期背景色
--calendar-cell-selected-background: rgb(25, 137, 250);
// 选中起点日期背景色
--calendar-cell-select-start-background: rgb(25, 137, 250);
// 选中终点日期背景色
--calendar-cell-select-end-background: rgb(25, 137, 250);
// 选中中间日期背景色
--calendar-cell-select-mid-background: rgba(25, 137, 250, .5);
// 日期文本颜色
--calendar-cell-color: #000;
// 选中日期文本颜色
--calendar-cell-selected-color: rgb(255, 255, 255);
// 选中起点日期文本颜色
--calendar-cell-select-start-color: rgb(255, 255, 255);
// 选中终点日期背景色
--calendar-cell-select-end-color: rgb(255, 255, 255);
// 选中中间日期背景色
--calendar-cell-select-mid-color: rgb(255, 255, 255);
// 底部确认按钮背景色
--calendar-confirm-button-background: rgb(0, 116, 255);
// 底部确认按钮文本颜色
--calendar-confirm-button-color: #fff;
// 底部确认按钮高度
--calendar-confirm-button-height: 72rpx;
// 底部确认按钮文本大小
--calendar-confirm-button-font-size: 32rpx;
// popup模式下，距离屏幕底部距离
--calendar-popup-padding-bottom: 80rpx;
// 顶部星期一到星期日文案颜色
--calendar-week-time-color: #000;
// 每月顶部的文案颜色
--calendar-month-title-color: #000;

FAQ