Right-to-left

Direction is a layout choice, separate from the calendar and the locale.

Use the CDK Dir directive

Set direction with the CDK Dir directive, or on the document root. The datepicker popup renders in an overlay outside the field, so a plain dir attribute on a wrapper element does not flip the popup. With Dir imported, the same dir attribute reaches the overlay too.

import { Dir } from '@angular/cdk/bidi';

@Component({
  imports: [Dir, ReactiveDateField],
  templateUrl: './booking.html',
})
export class Booking {}

<section dir="rtl">
  <ngx-mat-reactive-date-field formControlName="appointment" label="تاريخ الموعد" />
</section>

Direction, locale, and calendar are independent

An Arabic locale does not set right-to-left, and right-to-left does not select the Hijri calendar. Choose each one on purpose. The playground on the home page lets you combine them freely.