Angular 5项目中无需Bootstrap/jQuery的日期时间范围选择器选型建议

嘿，刚好我对Angular 5的日期时间选择器方案挺熟的，结合你的需求——不依赖Bootstrap/jQuery、优先Angular Material，给你几个靠谱的方向：

如果不想引入额外第三方库，完全可以用Angular Material原生的MatDatepicker组件自己搭一个日期范围选择器，步骤很简单：

• 用两个独立的MatDatepicker，分别对应起始日期和结束日期
• 通过[min]属性给结束日期设置最小限制，确保它不会早于起始日期
• 还可以在组件逻辑里添加自定义校验，比如实时提示日期范围不合理的错误

示例代码参考：

<mat-form-field>
  <input matInput [matDatepicker]="startPicker" placeholder="起始日期" [(ngModel)]="startDate">
  <mat-datepicker-toggle matSuffix [for]="startPicker"></mat-datepicker-toggle>
  <mat-datepicker #startPicker></mat-datepicker>
</mat-form-field>

<mat-form-field>
  <input matInput [matDatepicker]="endPicker" placeholder="结束日期" [(ngModel)]="endDate" [min]="startDate">
  <mat-datepicker-toggle matSuffix [for]="endPicker"></mat-datepicker-toggle>
  <mat-datepicker #endPicker></mat-datepicker>
</mat-form-field>

这种方案完全零额外依赖，纯原生Angular Material+Angular 5逻辑，稳定性拉满。

如果想省掉自己写逻辑的麻烦，可以用专门基于Angular Material开发的日期时间范围选择器库，而且完全不依赖Bootstrap/jQuery。针对Angular 5，推荐用@angular-material-components/datetime-picker的1.x版本（这个版本专门适配Angular 5和Material 5）：

• 安装命令要对应版本：npm install @angular-material-components/datetime-picker@1.x --save
• 它封装好了日期时间范围选择的交互，支持直接切换到「范围模式」，还能自定义是否显示秒数、spinner控件等

示例用法参考：

<mat-form-field>
  <input matInput 
    [ngxMatDatetimePicker]="picker" 
    placeholder="选择日期时间范围" 
    [(ngModel)]="dateRange"
    [ngxMatDatetimePickerMode]="'range'">
  <mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>
  <ngx-mat-datetime-picker #picker [showSpinners]="true" [showSeconds]="false"></ngx-mat-datetime-picker>
</mat-form-field>

一定要注意版本兼容：Angular 5对应的Angular Material版本是5.x，所以安装任何第三方库时，都要选择适配Angular 5的版本，避免出现版本冲突导致的编译或运行错误。比如上面的datetime-picker库，1.x版本才是对应Angular 5的，别装最新版哦。

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