加入班级，一起学习鸿蒙开发！

有精彩福利等你来领~~~

场景介绍

选择日期范围是旅游园区类应用中高频使用场景之一，如用户在预订酒店时需要选择住宿日期。

本示例使用层叠布局和Grid组件实现选择日期范围后的颜色变化效果。

效果预览

实现思路

1. 通过Grid组件实现日历的日期排列，调用DateUtils.isDayLaterThan函数比较所选日期的早晚，确定日期范围。
2. 通过Stack布局，为选中的GridItem添加颜色叠加效果。

1. GridItem(){
2. Stack(){
3. Text(day.toString())
4. .onClick(() => {
5. // 确定日期范围
6. DateUtils.isDayLaterThan(this.startMonth, this.startDay, monthItem.num, day)
7. })
8. // 叠加颜色
9. Text()
10. .backgroundColor()
11. }
12. }

约束与限制

• 本示例支持API Version 16 Release及以上版本。
• 本示例支持Harmony 5.0.4 Release SDK及以上版本。
• 本示例需要使用DevEco Studio 5.0.4 Release及以上版本进行编译运行。

工程目录

1. ├──entry/src/main/ets // 代码区
2. │ ├──entryability
3. │ │ └──Entryability.ets
4. │ ├──model
5. │ │ ├──DataType.ets // 数据类型
6. │ │ ├──GetDate.ets // 获取数据
7. │ │ ├──MonthDataSource.ets // LazyForEach数据源
8. │ │ └──TabBarData.ets // 导航栏数据
9. │ ├──pages
10. │ │ ├──MainPage.ets // 主页
11. │ │ └──CalendarPage.ets // 日期选择页
12. │ └──util
13. │ └──DateUtils.ets // 日期大小比较
14. └──entry/src/main/resources // 应用资源目录

参考文档

Grid

Stack

代码下载

选择日期范围示例代码