نمونه‌های Angular

نمونه‌هایی از نحوه استفاده از کامپوننت انتخاب تاریخ در پروژه‌های Angular.

تنظیمات اولیه

برای استفاده از کامپوننت تاریخ شمسی در پروژه Angular خود، دو روش وجود دارد:

روش ۱: استفاده از ماژول (Module-based)

در فایل Module خود کتابخانه را Import کنید:

// app.module.ts
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { NgxPersianDatepickerModule } from 'ngx-persian-datepicker-element';

import { AppComponent } from './app.component';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    NgxPersianDatepickerModule // افزودن ماژول به imports
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

روش ۲: استفاده از کامپوننت مستقل (Standalone)

در کامپوننت خود، NgxPersianDatepickerComponent را به صورت مستقیم import کنید:

// app.component.ts
import { Component } from '@angular/core';
import { NgxPersianDatepickerComponent } from 'ngx-persian-datepicker-element';

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [NgxPersianDatepickerComponent],
  template: `
    <ngx-persian-datepicker-element 
      placeholder="تاریخ را انتخاب کنید"
      format="YYYY/MM/DD"
      [showEvents]="true"
      (dateChange)="onDateChange($event)">
    </ngx-persian-datepicker-element>
  `
})
export class AppComponent {
  onDateChange(event: PersianDateChangeEvent) {
    console.log('تاریخ شمسی:', event.jalali); // [سال, ماه, روز]
    console.log('تاریخ میلادی:', event.gregorian);
    console.log('آیا تعطیل است:', event.isHoliday);
    console.log('رویدادها:', event.events);
  }
}

استفاده پایه

حالا می‌توانید از کامپوننت تاریخ شمسی در تمپلیت‌های خود استفاده کنید:

<ngx-persian-datepicker-element 
  placeholder="تاریخ را انتخاب کنید"
  format="YYYY/MM/DD"
  [showEvents]="true"
  (dateChange)="onDateChange($event)">
</ngx-persian-datepicker-element>

مثال‌های پیشرفته

استفاده با Two-way Binding

<ngx-persian-datepicker-element 
  [(ngModel)]="selectedDate"
  placeholder="تاریخ را انتخاب کنید"
  format="YYYY/MM/DD">
</ngx-persian-datepicker-element>

استفاده با Reactive Forms

// app.component.ts
import { Component } from '@angular/core';
import { FormBuilder, FormGroup } from '@angular/forms';
import { NgxPersianDatepickerComponent } from 'ngx-persian-datepicker-element';

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [NgxPersianDatepickerComponent, ReactiveFormsModule],
  template: `
    <form [formGroup]="dateForm">
      <ngx-persian-datepicker-element 
        formControlName="date"
        placeholder="تاریخ را انتخاب کنید"
        format="YYYY/MM/DD">
      </ngx-persian-datepicker-element>
    </form>
  `
})
export class AppComponent {
  dateForm: FormGroup;

  constructor(private fb: FormBuilder) {
    this.dateForm = this.fb.group({
      date: ['']
    });
  }
}

استفاده با ViewChild

// app.component.ts
import { Component, ViewChild } from '@angular/core';
import { NgxPersianDatepickerComponent } from 'ngx-persian-datepicker-element';

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [NgxPersianDatepickerComponent],
  template: `
    <ngx-persian-datepicker-element 
      #datepicker
      placeholder="تاریخ را انتخاب کنید"
      format="YYYY/MM/DD">
    </ngx-persian-datepicker-element>
    <button (click)="clearDate()">پاک کردن تاریخ</button>
  `
})
export class AppComponent {
  @ViewChild('datepicker') datepicker!: NgxPersianDatepickerComponent;

  clearDate() {
    this.datepicker.setValue('');
  }
}

مثال‌های کاربردی

// app.component.html
<ngx-persian-datepicker-element 
  placeholder="انتخاب تاریخ"
  class="custom-datepicker">
</ngx-persian-datepicker-element>

// app.component.ts
export class AppComponent {
  // Add your custom styles in your component's CSS file
}

// app.component.html
<div>
  <button (click)="toggleDarkMode()">
    تغییر به حالت {{ isDarkMode ? 'روشن' : 'تاریک' }}
  </button>
  
  <ngx-persian-datepicker-element
    placeholder="تاریخ را انتخاب کنید"
    [darkMode]="isDarkMode">
  </ngx-persian-datepicker-element>
</div>

// app.component.ts
export class AppComponent {
  isDarkMode = false;
  
  toggleDarkMode() {
    this.isDarkMode = !this.isDarkMode;
  }
}

// app.component.html
<div>
  <ngx-persian-datepicker-element #datepicker
    placeholder="از دکمه‌ها استفاده کنید">
  </ngx-persian-datepicker-element>
  
  <div style="margin-top: 1rem">
    <button (click)="getValue()">دریافت مقدار</button>
    <button (click)="setValue()">تنظیم به ۱۵ دی ۱۴۰۲</button>
    <button (click)="openCalendar()">باز کردن تقویم</button>
    <button (click)="closeCalendar()">بستن تقویم</button>
  </div>
</div>

// app.component.ts
import { Component, ViewChild } from '@angular/core';
import { NgxPersianDatepickerComponent } from 'ngx-persian-datepicker-element';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html'
})
export class AppComponent {
  @ViewChild('datepicker') datepicker: NgxPersianDatepickerComponent;
  
  getValue() {
    const value = this.datepicker.getValue();
    console.log('مقدار فعلی:', value);
  }
  
  setValue() {
    // تنظیم تاریخ به ۱۵ دی ۱۴۰۲
    this.datepicker.setValue(1402, 10, 15);
  }
  
  openCalendar() {
    this.datepicker.open();
  }
  
  closeCalendar() {
    this.datepicker.close();
  }
}

// app.component.html
<div>
  <ngx-persian-datepicker-element
    eventTypes="Iran,Afghanistan,AncientIran,International"
    placeholder="نمایش همه تعطیلات">
  </ngx-persian-datepicker-element>

  <ngx-persian-datepicker-element
    eventTypes="Afghanistan"
    placeholder="تعطیلات افغانستان">
  </ngx-persian-datepicker-element>

  <ngx-persian-datepicker-element
    eventTypes="all"
    placeholder="نمایش همه انواع تعطیلات">
  </ngx-persian-datepicker-element>
</div>

ویژگی‌های ورودی (Input Properties)

رویدادها (Events)

متدها (Methods)

نکات مهم

• در حالت standalone، حتماً باید NgxPersianDatepickerComponent را در imports کامپوننت خود اضافه کنید.
• برای استفاده از Two-way binding، باید FormsModule را نیز import کنید.
• برای استفاده از Reactive Forms، باید ReactiveFormsModule را import کنید.
• در صورت نیاز به دسترسی مستقیم به کامپوننت، می‌توانید از ViewChild استفاده کنید.

ویژگی‌ها (Inputs)

رویدادها (Outputs)

پشتیبانی از TypeScript

این کتابخانه شامل تعاریف TypeScript برای تمام ویژگی‌ها است:

import { Component } from '@angular/core';
import { 
  NgxPersianDatepickerComponent,
  PersianDateChangeEvent,
  DateTuple 
} from 'ngx-persian-datepicker-element';

@Component({
  selector: 'app-root',
  template: `
    <ngx-persian-datepicker-element (dateChange)="handleDateChange($event)"></ngx-persian-datepicker-element>
  `
})
export class AppComponent {
  selectedDate: DateTuple | null = null;
  
  handleDateChange(event: PersianDateChangeEvent) {
    this.selectedDate = event.jalali;
    
    // دسترسی به مقادیر تاریخ
    const [year, month, day] = event.jalali;
    console.log(`سال: ${year}, ماه: ${month}, روز: ${day}`);
  }
}

پشتیبانی از مرورگرها

این کامپوننت از Web Components استفاده می‌کند و با تمام مرورگرهای مدرن سازگار است.

مجوز

MIT