日历 Calendar（开发中）

用于选择年月日，可自定义需要选择的时间范围。

基本用法

日历组件可以通过show设置是否显示，可选值为true/false，默认为false。

示例代码

<l-calendar show="{{ true }}" />

自定义颜色

日历组件默认继承Lin UI的官方主题色，当然你也可以通过color属性来修改为你喜欢的主题色。

示例代码

<l-calendar show="{{ true }}" color="#f60" />

日历类型

通过 type 属性可以设置日历的类型，可选值 single（单个日期）、multiple（多个日期）、range（范围），默认值 single。

选择多个日期

<l-calendar show="{{ true }}" type="multiple" />

选择日期区间

<l-calendar show="{{ true }}" type="range" />

自定义日期文案

通过传入 formatter 函数可以对日历上每一格的内容进行格式化。

示例代码

<l-calendar formatter="{{ formatter }}"></l-calendar>

{
  formatter(day) {
    const month = day.date.getMonth() + 1;
    const date = day.date.getDate();
    const tody = new Date();
    const tody_month = tody.getMonth() + 1;
    const tody_date = tody.getDate();
    if (month === 10 && date === 1) {
      day.topInfo = '国庆节';
    }
    if (month === tody_month && date === tody_date) {
      day.text = '今天';
    }
    if (day.type === 'start') {
      day.bottomInfo = '入住';
    } else if (day.type === 'end') {
      day.bottomInfo = '离店';
    }
    return day;
  }
}

自定义日期可选范围

通过 min-date 和 max-date 定义日历的范围。

示例代码

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

Page({
  data: {
    show: false,
    minDate: new Date(2020, 2, 2).getTime(),
    maxDate: new Date(2020, 10, 10).getTime()
  }
});

自定义可选日期的数量

通过设置 max-select/min-select 可以控制日历最多/至少选择的天数，该属性只有 type 为 multiple 和 range 时有效。

示例代码

<l-calendar type="range" max-select="{{ 3 }}" />
<l-calendar type="multiple" min-select="{{ 3 }}" />

自定义超过可选数量的提示语句

通过设置 max-limit-message 可以控制当日历选择天数超过可选数量的提示语句，该属性只有 type 为 multiple 和 range 时有效。

示例代码

<l-calendar type="range" max-select="{{ 3 }}" max-limit-message="您选择的日期范围超出可选天数"/>

自定义不足必选数量的提示语句

通过设置 min-limit-message 可以控制当日历选择天数不足必选数量的提示语句，该属性只有 type 为 multiple 和 range 时有效。

示例代码

<l-calendar type="range" min-select="{{ 3 }}" max-limit-message="日期范围必须大于3天"/>

自定义按钮文字

通过设置 confirm-text 属性可以修改确认按钮的文字。

<l-calendar show="{{ show }}" type="range" confirm-text="完成" />

隐藏按钮

通过设置 show-confirm 属性可以隐藏/显示确认按钮。show-confirm 默认值为：true

<l-calendar show="{{ show }}" show-confirm="{{ false }}" confirm-text="完成" />

日历组件属性（Calendar Attributes）

Day 数据结构

日历中的每个日期都对应一个 Day 对象，通过 formatter 属性可以自定义 Day 对象的内容。

插槽 (Calendar Slot)

日历组件事件 (Calendar Events）