• 日历 Calendar(开发中)
    • 基本用法
      • 示例代码
    • 自定义颜色
      • 示例代码
    • 是否显示节日
      • 示例代码
    • 设置日期格式
      • 示例代码
    • 设置最小和最大日期间距
      • 示例代码
    • 自定义起始时间
      • 示例代码
    • 日历组件属性(Calendar Attributes)
    • 日历组件属性(Calendar Attributes)
    • 日历组件事件 (Calendar Events)

    日历 Calendar(开发中)

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

    基本用法

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

    示例代码

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

    自定义颜色

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

    示例代码

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

    是否显示节日

    日历组件允许通过设置showFestival属性来控制是否显示节日信息,比如元旦,国庆,等等。

    示例代码

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

    设置日期格式

    通过format可以日期输出的格式,默认是yyyy-mm-dd,通过bind:linchange来获取到

    注意事项

    • format可以参见文档下方的format列表说明。
    • bind:linchange事件的返回内容可以查看文档下方的事件列表。

    示例代码

    1. <l-calendar show="{{ true }}" format="yyyy-mm-dd" />

    设置最小和最大日期间距

    通过 min 的方式设置所选日期的最小间隔,比如选择了5月1号,这个时候在选择日期范围的时候,如果选择5月2号或者5月3号,就出弹出toast提示日期间隔不能小于3天。 max同理,如果你设置为3,那么超过所选日期间隔超过3天的话,会弹出提示信息。

    示例代码

    1. <l-calendar show="{{true}}" min="3" max="7"/>

    自定义起始时间

    日历组件的起始时间,默认为当前终端的日期,但是我们也可以通过date属性来控制,例如可以传入date="2019-6-6"

    注意事项

    • date里传入的日期格式必须和format的规则一样才能生效,如:date="2019-6-6"时,format必须是format="yyyy-m-d"

    示例代码

    1. <l-calendar date="2019-6-6" format="yyyy-m-d" />

    日历组件属性(Calendar Attributes)

    参数说明类型可选值默认值
    show控制日历组件的显示和隐藏Booleantrue/falsefalse
    color主题色Stringlin UI主题色
    date初始日期String当前日期
    format日期规则Stringyyyy-m-d
    min设置所选日期的最小间隔String/Number1
    max设置所选日期的最大间隔String/Number-
    show-festival控制是否显示节日信息Booleantrue/falsetrue
    clear每次点击确定后是否会重置日历组件的信息Booleantrue/falsetrue

    日历组件属性(Calendar Attributes)

    格式含义备注举例
    yyyy2019
    m不补零1
    mm补零01
    d不补零5
    dd补零05

    日历组件事件 (Calendar Events)

    事件名称说明返回值备注
    bind:linchange选中的日期触发选中项发生变化时触发 linchange 事件,event.detail = { current: [ 选中项的日期 ]}-
    bind:linconfirm确定按钮点击时触发event.detail = {current: [ 选中项的日期 ], msg: linconfirm: ok }-
    bind:lincancel取消按钮点击时触发图片预览触发 linpreview 事件,event.detail = { msg: lincancel: ok }-