Angular 11环境下寻求兼容ngx-mat-datetime-picker的日期范围选择器模块

Great question! Let's break down the practical solutions to get a date range picker working alongside ngx-mat-datetime-picker in your Angular 11 project:

1. Use the Official Datetime Range Component from the Same Library #

The ngx-mat-datetime-picker you're using is typically part of the @angular-material-components/datetime-picker package, which does offer built-in datetime range picker support compatible with Angular 11. Here's how to set it up:

Step 1: Install Compatible Versions #

Make sure you install the package versions that match your Angular 11 setup:

npm install @angular-material-components/datetime-picker@11.0.0 @angular-material-components/moment-adapter@11.0.0 --save

(Use the moment-adapter if you rely on Moment.js for date handling; skip it if you prefer the native date adapter.)

Step 2: Import Required Modules #

Add these modules to your component's parent module:

import { MatDatetimePickerModule, MatDatetimeRangePickerModule } from '@angular-material-components/datetime-picker';
import { MatMomentDatetimeModule } from '@angular-material-components/moment-adapter'; // Optional, for Moment.js

@NgModule({
  imports: [
    // ... your existing modules (like ReactiveFormsModule, MatFormFieldModule)
    MatDatetimePickerModule,
    MatDatetimeRangePickerModule,
    MatMomentDatetimeModule // Include only if using Moment.js
  ]
})
export class YourFeatureModule { }

Step 3: Update Your Template #

Replace your original code with the official range picker syntax:

<ng-container *ngIf="dynamicInputMode === dynamicInputModes.Search">
  <div [formGroup]="dateForm">
    <mat-form-field appearance="outline" class="small poppins flex-grow font-15">
      <mat-datetime-range-input [rangePicker]="picker">
        <input matStartDate formControlName="start" placeholder="From:">
        <input matEndDate formControlName="end" placeholder="To: ">
      </mat-datetime-range-input>
      <mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>
      <mat-datetime-range-picker #picker [enableMeridian]="true"></mat-datetime-range-picker>
    </mat-form-field>
  </div>
</ng-container>

Step 4: Keep Your Form Setup #

Your existing dateForm structure works perfectly with this component:

import { FormBuilder, FormGroup } from '@angular/forms';

// Inside your component class
dateForm: FormGroup;

constructor(private fb: FormBuilder) {
  this.dateForm = this.fb.group({
    start: [null],
    end: [null]
  });
}

2. Custom Wrapper with Two Standalone Datetime Pickers #

If you need more control over the UI or logic, you can wrap two individual ngx-mat-datetime-picker instances and add date validation/linking:

Template Code #

<ng-container *ngIf="dynamicInputMode === dynamicInputModes.Search">
  <div [formGroup]="dateForm" class="flex gap-2">
    <mat-form-field appearance="outline" class="small poppins flex-grow font-15">
      <input formControlName="start" matInput [ngxMatDatetimePicker]="pickerFrom" placeholder="From:">
      <mat-datepicker-toggle matSuffix [for]="pickerFrom"></mat-datepicker-toggle>
      <ngx-mat-datetime-picker #pickerFrom [enableMeridian]="true" [max]="dateForm.get('end')?.value"></ngx-mat-datetime-picker>
    </mat-form-field>
    <mat-form-field appearance="outline" class="small poppins flex-grow font-15">
      <input formControlName="end" matInput [ngxMatDatetimePicker]="pickerTo" placeholder="To: ">
      <mat-datepicker-toggle matSuffix [for]="pickerTo"></mat-datepicker-toggle>
      <ngx-mat-datetime-picker #pickerTo [enableMeridian]="true" [min]="dateForm.get('start')?.value"></ngx-mat-datetime-picker>
    </mat-form-field>
  </div>
</ng-container>

Add Linking Logic #

In your component class, add validators to ensure the end date doesn't come before the start date:

import { Validators } from '@angular/forms';

// Inside ngOnInit()
ngOnInit(): void {
  // Update end date validation when start date changes
  this.dateForm.get('start')?.valueChanges.subscribe(startDate => {
    this.dateForm.get('end')?.setValidators([Validators.min(startDate)]);
    this.dateForm.get('end')?.updateValueAndValidity({ emitEvent: false });
  });

  // Update start date validation when end date changes
  this.dateForm.get('end')?.valueChanges.subscribe(endDate => {
    this.dateForm.get('start')?.setValidators([Validators.max(endDate)]);
    this.dateForm.get('start')?.updateValueAndValidity({ emitEvent: false });
  });
}

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