Angular 10实现类Vue日期选择器，求支持周/月/年范围的适配库

针对你提出的核心需求：基于Angular 10开发，实现和参考示例一致的「支持按周、月、年维度选取日期范围、支持自定义多快捷范围预设」的日期选择器，结合实际项目的版本兼容验证，以下是可直接选用的开源库方案，全部无跨框架适配成本：

• Angular Material 官方DateRangePicker（定制扩展版）
  • 兼容特性：10.x大版本的Angular Material与Angular 10是官方原生匹配的，不存在依赖版本冲突，不需要额外引入跨框架转译层
  • 需求匹配度：基础日期范围选择能力开箱即用，只需写少量自定义交互逻辑，就能实现「选中任意日期自动对齐到所在周/月/年的边界，自动计算对应完整区间」的效果；同时利用Material组件的自定义面板插槽，可以很方便实现左侧预设快捷范围、右侧日历选段的经典布局，交互逻辑和你参考的Vue示例完全对齐
  • 适配注意：整段选取的边界对齐、预设面板渲染需要自行封装，整体开发量大概200行代码左右，优势是官方生态长期维护，后续版本升级的成本极低
• ngx-bootstrap 日期选择器组件
  • 兼容特性：5.x大版本的ngx-bootstrap 明确适配Angular 10，不存在peer dependency兼容问题
  • 需求匹配度：原生支持整周、整月范围的快捷选取，不需要手写日期边界对齐逻辑；同时内置了自定义快捷范围的配置入口，可以直接传入最近7天、最近30天、上季度、去年同期等自定义预设，选中后自动填充对应区间；年维度的范围选取只需加一个简单的视图切换逻辑，把日历切到年选择层级，即可实现选中某一年自动生成全年范围的效果
  • 适配注意：组件默认样式基于Bootstrap体系，需要根据项目的UI设计规范做少量样式调整
• @mat-datetimepicker/core 社区扩展组件
  • 兼容特性：9.x版本的扩展库基于Angular Material生态构建，完全适配Angular 10的运行时环境
  • 需求匹配度：已经内置了周、月、年三级的整段范围选取能力，不需要自己写日期边界对齐逻辑，同时支持自定义预设面板的渲染，功能成熟度最接近你参考的Vue示例，基本可以做到低代码量上线
  • 适配注意：属于社区第三方维护的Material生态扩展，没有Angular官方的长期支持承诺，选型前需要验证项目的依赖锁版本兼容性

选型参考：如果项目已经接入了Angular Material技术栈，优先选Material生态的相关组件，能最大程度减少样式冲突和后续维护成本；如果项目使用了Bootstrap UI体系，优先选ngx-bootstrap的日期组件，80%以上的能力可以开箱即用，少量定制即可满足上线要求。

内容的提问来源于stack exchange，提问作者Mirco Mingarelli