日历组件可让用户方便地选择日期或日期区间,这一功能从2.4版本起便已支持。日历组件与其他组件的结合使用也是可能的,用户在选定日期后,将触发一个确认事件。
如若需要允许用户选择多个日期,可以设置`type`为`multiple`。这种情况下,每次选中的日期都将被`confirm`事件以数组形式返回。此数组中包含若干个用户选中的日期。
当选择日期区间的需求成为主导时,`type`的设定则应当是`range`。在这种情况下,每次确认时返回的也将是一个数组。数组的第一个元素为开始时间,而第二个元素为结束时间。
如果用户不希望看到确认按钮,可以设置`show-confirm`为`false`。这样,选择完成后将立即触发`confirm`事件。
通过`color`属性,用户可以自定义日历的颜色,这个颜色将对选期和底部的按钮生效。
为了限制用户的选择范围,`min-date`和`max-date`参数可以定义日历的最小和最大可选日期。还可以通过`formatter`函数来对日历上每一格的内容进行格式化处理。
弹出层的弹出位置也可以通过`position`属性进行自定义设置,可选项包括top、left和right。如果日历弹窗应直接在页面内展示而非以弹层形式出现,可以设置`poppable`为`false`。
在Canlendar组件中,当其`poppable`属性为true时,会支持一系列额外的props参数。当Canlendar的type为range时或multiple时,也有特定的props参数支持。
在Canlendar中,每个日期都对应一个Day对象。通过formatter属性,用户可以自定义Day对象的内容格式。还提供了丰富的键名说明来描述Day对象的各个部分。
对于Canlendar组件的事件处理,如点击选期会触发select事件,日期选择完成后会触发confirm事件等。还提供了如打开和关闭弹出层的自定义事件等。
在组件的标题和底部区域内容方面,提供了自定义的title和footer功能。通过ref属性,用户还可以获取到Calendar实例并调用其方法进行操作。