guide.md 3.4 KB
使用场景
Calendar 组件用于选择单个日期、多个日期或日期范围。
注意事项
传入的 startMonth、endMonth、initMonth 必须是 YYYYMM 格式的字符串，且 initMonth 必须在 startMonth 和 endMonth 之间。另外其他传入用到年月或年月日的属性时，请保证传入的数据格式都是 YYYYMM 或 YYYYMMDD，月和日如果不足两位数时，需要在前面补 0。
周开始
部分国家或地区在日常生活中习惯将周日作为一周的第一天，但是按照国际标准 ISO 8601 规定，一周的第一天是周一。同时从「周末」这个词的含义来看，周六周日应该是一周的末尾，而不是开头。
所以 Calendar 组件默认周一作为一周的第一天，也建议大家尽量以此为标准。如果需要将周日作为一周的第一天，可以通过 startSunday 属性来设置。
infoDates
Calendar 组件可以通过传入 infoDates 属性来显示某天的一些提示信息，建议传入的 info 信息长度尽量简短，否则可能造成日历显示不美观。
disabledDates
Calendar 组件可以通过传入 disabledDates 属性来禁用某些日期，此时如果是范围选择模式，选择的日期中会自动过滤掉禁用的日期。
快捷选择
当处于范围选择模式时，Calendar 组件可以通过传入 quickSelects 这个数组属性来决定启用哪些快捷选择方式。
- 当传入的 quickSelects 包含 week 字符时，可以点击当前周快速选定一周的日期范围；当传入的 quickSelects 包含 month 字符时，可以点击当前月快速选定一个月的日期范围；当传入的 quickSelects 包含 quarter 字符时，可以点击当前季度快速选定一个季度的日期范围。
- 当传入的 quickSelects 包含正整数时，组件内部会显示对应的未来几天的快捷选择按钮，比如传入 [3, 7] 时，会显示未来 3 天、7 天的快捷选择按钮，点击后会自动选定对应的日期范围。
- 当传入的 quickSelects 包含负整数时，组件内部会显示对应的过去几天的快捷选择按钮，比如传入 [-3, -7] 时，会显示最近 3 天、7 天的快捷选择按钮，点击后会自动选定对应的日期范围。
- 当使用快捷选择指定天数时，默认是不包含当天的，可以通过修改 includeToday 的值来决定是否包含今天，请参考示例。
返回日期格式
当点击 Calendar 组件底部的确定按钮时，会触发 confirm 事件，此时会将当前选中的所有日期数据字符组成数组返回。每个日期的数据格式由 outFormat 决定，返回后的格式中的年与 outFormat 中的 Y 对应，月与 outFormat 中的 M 对应，日与 outFormat 中的 D 对应。请参考示例。
月份水印
Calendar 组件可以通过传入 monthMark 属性来决定是否在日历的每个月内显示月份文字的水印，考虑不同语言的月份文字长度不同，可以通过 monthMarkSize 属性来设置水印的字体大小。
说明
Calendar 是在 Popup 基础上封装的，通过预先定义一些 Popup 的 Props 实现，因此可以通过传入 Popup 的属性来实现不同的效果。比如示例中通过设置 popup 的 radius 改变圆角风格。
Calendar 内底部的确定按钮使用了 Button 组件，可以通过传入 button 参数来自定义按钮的样式，请参考示例。