日历 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 }-