求推荐兼容Angular 16且适配Tailwind CSS的日期选择器库

问题背景 #

我有一个基于Angular 16.0.0版本的表单应用，此前使用vilo的ng2-date-picker库时，运行应用出现如下优化 bailout 警告：

Warning: /Users/harshachinnaswamy/harsha/web-messenger/node_modules/ng2-date-picker/fesm2022/ng2-date-picker.mjs depends on 'dayjs'. CommonJS or AMD dependencies can cause optimization bailouts.
For more info see: https://angular.io/guide/build#configuring-commonjs-dependencies

Warning: /Users/harshachinnaswamy/harsha/web-messenger/node_modules/ng2-date-picker/fesm2022/ng2-date-picker.mjs depends on 'dayjs/plugin/customParseFormat'. CommonJS or AMD dependencies can cause optimization bailouts.
For more info see: https://angular.io/guide/build#configuring-commonjs-dependencies

Warning: /Users/harshachinnaswamy/harsha/web-messenger/node_modules/ng2-date-picker/fesm2022/ng2-date-picker.mjs depends on 'dayjs/plugin/isBetween'. CommonJS or AMD dependencies can cause optimization bailouts.
For more info see: https://angular.io/guide/build#configuring-commonjs-dependencies

Warning: /Users/harshachinnaswamy/harsha/web-messenger/node_modules/ng2-date-picker/fesm2022/ng2-date-picker.mjs depends on 'dayjs/plugin/isSameOrAfter'. CommonJS or AMD dependencies can cause optimization bailouts.
For more info see: https://angular.io/guide/build#configuring-commonjs-dependencies

Warning: /Users/harshachinnaswamy/harsha/web-messenger/node_modules/ng2-date-picker/fesm2022/ng2-date-picker.mjs depends on 'dayjs/plugin/isSameOrBefore'. CommonJS or AMD dependencies can cause optimization bailouts.
For more info see: https://angular.io/guide/build#configuring-commonjs-dependencies

Warning: /Users/harshachinnaswamy/harsha/web-messenger/node_modules/ng2-date-picker/fesm2022/ng2-date-picker.mjs depends on 'dayjs/plugin/isoWeek'. CommonJS or AMD dependencies can cause optimization bailouts.
For more info see: https://angular.io/guide/build#configuring-commonjs-dependencies

尝试使用@angular-material-components/datetime-picker库时，因项目使用Tailwind CSS，该库需完整安装Material UI才能正常显示主题、按钮等UI元素，不符合需求。现寻求兼容Angular 16的替代日期选择器库，需具备以下功能：

• 禁用日期（设置最小、最大日期）
• 日期格式化（mm-dd-yyyy）
• 日期范围选择
• 变更检测、月份及年份选择功能

推荐库及适配说明 #

1. ngx-bootstrap Datepicker #

• 功能匹配：
  • 支持通过minDate/maxDate配置禁用日期范围
  • 可通过dateInputFormat设置mm-dd-yyyy格式
  • 自带日期范围选择组件bsDaterangepicker
  • 内置变更检测机制，支持直接切换月份、年份
• 优势：基于Bootstrap但可通过Tailwind覆盖样式，无强制Material依赖，完全兼容Angular 16，输出为ESM模块，不会触发CommonJS bailout警告。

2. PrimeNG Calendar #

• 功能匹配：
  • 用minDate/maxDate控制可选择日期范围
  • 通过dateFormat配置mm-dd-yyyy格式
  • 支持range模式实现日期范围选择
  • 自带月份、年份快速切换器，组件变更会触发Angular变更检测
• 优势：样式可通过Tailwind自定义，无需完整Material UI，Angular 16兼容良好，采用ESM打包，无CommonJS依赖问题。

3. ngx-flatpickr（Angular Flatpickr Wrapper） #

• 功能匹配：
  • 通过disable选项或minDate/maxDate禁用日期
  • 用dateFormat设置m-d-Y对应mm-dd-yyyy格式
  • 支持mode: "range"实现范围选择
  • 组件输出变更事件，自带年月选择面板
• 优势：轻量级，依赖的Flatpickr本身可通过Tailwind完全定制样式，Angular 16适配完善，ESM打包无CommonJS警告。

内容的提问来源于stack exchange，提问作者Harsha Sriram