Ngx-mat-datetime-picker with compatible range picker

I there a compatible module that lets you use ngx-mat-datetime-picker with a range picker too? I've tried using mat-date-range-input but it wont work. I'm using angular 11 and @angular/material@11.1.0

I'm working on a search component that lets you choose a date, from a danamic form and it works like this

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

But I need something like this

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

Obviously I get this error because [ngxMatDatetimePicker]="" its not a known directive for mat-date-range-input

So the final question, is there a module I can use as a range picker with ngx-mat-datetime-picker?

P.S.: There's no tag for ngx-mat-datetime-picker

Ngx-mat-datetime-picker with compatible range picker

0 Answers