ng-asax-jalali-date-range-picker

Angular ASAX Jalali DatePicker

This is a configurable jalali (persian, khorshidi, shamsi) date-picker build for Angular 2 applications and uses jalali-moment as its dependency.

Click to preview a simple Demo

Screenshots

1. Download from npm: npm install ng-asax-jalali-date-picker
2. import the NgAsaxJalaliDatepickerModule module in typescript (.ts) or es6 files like below:
   import { NgAsaxJalaliDatepickerModule } from 'ng-asax-jalali-date-range-picker';
3. Add NgAsaxJalaliDatepickerModule to your module imports:

 @NgModule({
   ...
   imports: [
     ...
     NgAsaxJalaliDatepickerModule
   ]
 })

How to use

<ng-asax-jalali-date-range-picker [toDate]="toDate" [fromDate]="fromDate" [maxDate]="maxDate" [minDate]="minDate" (onChange)="handleChange($event)"></ng-asax-jalali-date-range-picker>

import moment, { Moment } from "jalali-moment";

import { Component } from "@angular/core";

@Component({
  selector: "app-root",
  templateUrl: "./app.component.html",
  styleUrl: "./app.component.scss",
})
export class AppComponent {
  handleChange({ fromDate, toDate }: { fromDate: moment.Moment; toDate: moment.Moment }) {
    this.fromDate = fromDate;
    this.toDate = toDate;
  }

  fromDate: Moment = moment().startOf("jYear");
  minDate: Moment = moment().add(-1, "jYear");
  maxDate: Moment = moment();
  toDate: Moment = moment();
}

How to use the output as a jalali (shamsi) date

import * as moment from 'jalali-moment';
dateObject.format('jYYYY/jMM/jD)'

read jalali-moment

Attributes (Input):

all attributes in the following table could be used as

Name	Type	Default	Description
fromDate	Moment	moment().startOf('year')	This is a validation rule, if the selected date will be before minDate the containing form will be invalid. Note: if provided as string format configuration should be provided in the config object.
toDate	Moment	moment()	This is a validation rule, if the selected date will be before minDate the containing form will be invalid. Note: if provided as string format configuration should be provided in the config object.
minDate	Moment	moment().add(-1,'jYear').startOf('year')	This is a validation rule, if the selected date will be before minDate the containing form will be invalid. Note: if provided as string format configuration should be provided in the config object.
maxDate	Moment	moment()	This is a validation rule, if the selected date will be before minDate the containing form will be invalid. Note: if provided as string format configuration should be provided in the config object.

Attributes (Output):

Name	Event Arguments	Applies To	Description
onChange	CalendarValue	All Pickers	This event will be emitted on every valid value change, if you want to receive every value (valid and invalid) please use the native ngModelChange output.