persian-date-ranger v2.2.1

Persian Date Ranger

Overview

Overview The Persian Date Ranger is a comprehensive Persian date picker component for Angular projects. It allows users to easily integrate a Jalali (Persian) calendar with various features such as date range selection, date format customization, and navigation options.

This package is free for use in Angular projects and helps developers add a Persian date picker to their web applications.

Features

Persian Calendar: Provides a Persian (Jalali) date picker. Date Range Picker (rangePicker): Enables users to select a date range for reservations or any other use cases. Customizable Date Formats: Supports various date formats including YYYY-MM-DD, jYYYY/jMM/jDD, and others. Positioning: The calendar can be positioned relative to the input element using the stickyFlipPosition directive.

Installation

To install the Persian Date Ranger package, use the following command:

npm install persian-date-ranger

Make sure you have the following peer dependencies installed in your Angular project:

@angular/common version ^16.0.0
@angular/core version ^16.0.0

Usage

Import the Module In your Angular module (e.g., app.module.ts), import the PersianDateRangerModule:

import {PersianDateRangerModule} from 'persian-date-ranger';

@NgModule({
  declarations: [AppComponent],
  imports: [PersianDateRangerModule],
  bootstrap: [AppComponent]
})
export class AppModule {
}

Using the Component in HTML To use the PersianDateRanger in your component's template:

<persian-date-ranger
  [placeholder]="'Select a date'"
  (selectedDate)="onDateSelected($event)">
</persian-date-ranger>

Or

<persian-date-ranger
  [placeholder]="'Select a date'"
  [(ngModel)]="date"
  (selectedDate)="onDateSelected($event)">
</persian-date-ranger>

Example of Range Picker (For Reservation) You can use the rangePicker feature to allow users to select a range of dates:

<persian-date-ranger
  [minDate]="'1400/01/01'"
  [maxDate]="'1403/01/01'"
  (selectedDate)="onDateRangeSelected($event)">
</persian-date-ranger>

If you want to use the calendar only for display, you can use the following tag:

<persian-date-calendar></persian-date-calendar>

To select a specific date for display, you can use the following tag:

<persian-date-calendar [selectedMonth]="8" selectedDay="2" [selectedYear]="1403"></persian-date-calendar>

API

Inputs

Outputs

Methods

Features in Detail

rangePicker The rangePicker feature allows users to select multiple dates in a range (e.g., for reservations). Once enabled, it allows selecting a start date and end date. This feature can be enhanced in future versions to handle more complex range-based use cases.

minDate and maxDate The minDate and maxDate inputs let you restrict the date range the user can select. These dates should be passed in Jalali format (jYYYY/jMM/jDD).

Example usage:

<persian-date-ranger
  [minDate]="'1400/01/01'"
  [maxDate]="'1403/01/01'"
  (selectedDate)="onDateSelected($event)">
</persian-date-ranger>

Date Formats

This package supports several date formats:

jYYYY/jMM/jDD: Persian date format (default). jYYYY-jMM-jDD: Alternative Persian date format. timestamp: Returns the date as a Unix timestamp. YYYY-MM-DD: Gregorian date format. Example usage for date formats:

Positions

position-top
position-bottom
position-left
position-right
position-top-right
position-top-left
position-bottom-right
position-bottom-left

DateFormat

'YYYYMMDD'
'YYYY-MM-DD'
'YYYY/MM/DD'
'jYYYY/jMM/jDD'
'jYYYY-jMM-jDD'
'jYYYYjMMjDD'
'timestamp'

<persian-date-ranger [returnFormat]="'YYYY-MM-DD'"></persian-date-ranger>

Conclusion

You can also use ngModel, ngModelChange, or Forms to capture the data. This feature allows you to easily retrieve data from the inputs and interact with it through two-way binding.

The Persian Date Ranger is a powerful and flexible component for integrating a Persian (Jalali) calendar in Angular applications. It offers a wide range of features, including customizable date formats, date range selection, and flexible positioning, making it perfect for projects that require Persian date support.