ngx-arabic-datepicker

🗓️ A beautiful, reusable Angular datepicker component with full Arabic language support, RTL layout, and custom styling.

✨ Features

• 🌍 Multi-language Support: Arabic and French languages with dynamic switching
• 📱 RTL Layout: Full right-to-left support for Arabic
• 🎨 Custom Styling: Professional design with customizable colors
• 🔧 Angular Forms: Full ControlValueAccessor implementation
• 📅 ng-bootstrap Integration: Built on top of ng-bootstrap datepicker
• 🎯 Accessibility: ARIA labels and keyboard navigation
• 📦 Standalone Component: Easy to integrate and use

🚀 Installation

npm install ngx-arabic-datepicker

Peer Dependencies

Make sure you have the following peer dependencies installed:

npm install @angular/common @angular/core @angular/forms
npm install @ng-bootstrap/ng-bootstrap @ngx-translate/core rxjs

📖 Usage

1. Import the Module

import { NgxArabicDatepickerModule } from 'ngx-arabic-datepicker';

@NgModule({
  imports: [
    NgxArabicDatepickerModule,
    // ... other imports
  ],
  // ...
})
export class AppModule { }

2. Use in Template

<lib-ngx-arabic-datepicker
  [(ngModel)]="selectedDate"
  [placeholder]="'yyyy-mm-dd'"
  [errorMessage]="errorMessage"
  [disabled]="false"
  (dateChange)="onDateChange($event)">
</lib-ngx-arabic-datepicker>

3. Component Setup

import { Component } from '@angular/core';
import { TranslateService } from '@ngx-translate/core';

@Component({
  selector: 'app-example',
  templateUrl: './example.component.html'
})
export class ExampleComponent {
  selectedDate = '';
  errorMessage = '';

  constructor(private translateService: TranslateService) {
    // Set language (Arabic or French)
    this.translateService.use('ar'); // or 'fr'
  }

  onDateChange(date: string) {
    console.log('Selected date:', date);
  }
}

🎛️ API Reference

Inputs

| Property | Type | Default | Description | |----------|------|---------|-------------| | placeholder | string | 'yyyy-mm-dd' | Input placeholder text | | name | string | '' | Input name attribute | | maxDate | NgbDate | undefined | Maximum selectable date | | minDate | NgbDate | undefined | Minimum selectable date | | disabled | boolean | false | Disable the datepicker | | readonly | boolean | true | Make input readonly | | containerClass | string | '' | Additional CSS classes | | inputClass | string \| object | '' | Input CSS classes | | errorMessage | string | '' | Error message to display |

Outputs

| Event | Type | Description | |-------|------|-------------| | dateChange | EventEmitter<string> | Emitted when date changes |

Methods

| Method | Description | |--------|-------------| | getAriaLabel() | Returns localized ARIA label | | isRTL | Getter that returns true for Arabic language |

🌍 Language Support

The component automatically detects the current language from @ngx-translate/core and switches between:

• Arabic (ar): RTL layout with Arabic month names
• French (fr): LTR layout with French month names

Arabic Features

• Arabic month names: يناير، فبراير، مارس...
• Arabic weekday names: الأحد، الإثنين، الثلاثاء...
• RTL text direction
• Icon positioned on the left side

🎨 Styling

The component comes with beautiful default styling using a red theme (#EC3745). You can customize it by overriding CSS variables or classes.

Custom Colors

::ng-deep .ngb-dp-popup {
  .btn-primary,
  .bg-primary {
    background: #your-color !important;
    border-color: #your-color !important;
  }
}

🔧 Form Integration

The component implements ControlValueAccessor and works seamlessly with Angular forms:

Reactive Forms

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

export class MyComponent {
  form: FormGroup;

  constructor(private fb: FormBuilder) {
    this.form = this.fb.group({
      birthDate: ['', Validators.required]
    });
  }
}

<form [formGroup]="form">
  <lib-ngx-arabic-datepicker
    formControlName="birthDate"
    [errorMessage]="form.get('birthDate')?.errors?.['required'] ? 'Date is required' : ''"
  ></lib-ngx-arabic-datepicker>
</form>

Template-driven Forms

<lib-ngx-arabic-datepicker
  [(ngModel)]="selectedDate"
  name="birthDate"
  #dateInput="ngModel"
  required
  [errorMessage]="dateInput.errors?.['required'] ? 'Date is required' : ''"
></lib-ngx-arabic-datepicker>

🛠️ Development

Building the Library

ng build ngx-arabic-datepicker

Publishing

cd dist/ngx-arabic-datepicker
npm publish

📄 License

MIT License - see the LICENSE file for details.

🤝 Contributing

Contributions are welcome! Please feel free to submit a Pull Request.

📞 Support

If you have any questions or issues, please open an issue on GitHub.

Made with ❤️ for the Arabic-speaking Angular community