AkbariDatePicker

this is a fantastic persion datepicker and jalali datepicker for angular 9 . added responsive pretty mode. fix 31 days in first 6 month.

Demo

desktop mode

responsive mode

install

Run npm i akbari-date-picker

add Library to app.module.ts

import { AkbariDatePickerModule } from 'akbari-date-picker';/// add this line 
import { FormsModule } from '@angular/forms';/// add this line 

and import

imports: [
    BrowserModule,
    FormsModule,/// add this line 
    AkbariDatePickerModule,  /// and  add this line 
    AppRoutingModule,
  ],

full example of add to app.module.ts

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { FormsModule } from '@angular/forms';/// add this line 
import { AkbariDatePickerModule } from 'akbari-date-picker'; ///add this line 

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    FormsModule,/// add this line 
    AkbariDatePickerModule,  /// and  add this line 
    AppRoutingModule,
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

how to use => you can use angular ngModel to get datepicker value.

<akbari-date-picker  [(ngModel)]="date" ></akbari-date-picker>

inputs

input	type	default
date	string	system current date to persian
minDate	string	30 years old
maxDate	string	30 years later
width	string	'300px'
placeHolder	string	''
mobileMode	boolean	false

output

onChangeDate | function | null

Inputs

minDate => type ="string"

you can pass type string format;

example

<akbari-date-picker [minDate]="'1300/9/8'" ></akbari-date-picker>

or 

<akbari-date-picker minDate="1300/9/8"  ></akbari-date-picker>

maxDate => type ="string"

you can pass type string format;

example

<akbari-date-picker [maxDate]="'1300/9/8'" ></akbari-date-picker>

or 

<akbari-date-picker maxDate="1300/9/8"  ></akbari-date-picker>

date => type ="string" => default date

you can pass type string format;

example

<akbari-date-picker [date]="'1300/9/8'" ></akbari-date-picker>

or 

<akbari-date-picker date="1300/9/8"  ></akbari-date-picker>

width => type ="string"

you can pass type string format;

example

<akbari-date-picker width="350px" ></akbari-date-picker>

placeHolder => type ="string"

you can pass type string format;

example

<akbari-date-picker placeHolder="fromDate" ></akbari-date-picker>

mobileMode => type ="boolean"

you can pass type boolean format;

example

<akbari-date-picker mobileMode="true" ></akbari-date-picker>

Output

onChangeDate => when user select date this output emit.

in html

<akbari-date-picker (onChangeDate)="onChangeDate($event)" ></akbari-date-picker>

in .ts

onChangeDate(event){
    alert(event)
 }

validation

in html

  <akbari-date-picker  
   required 
   #datepickers="ngModel"
   name="test" 
   (onChangeDate)="onChangeDate($event)" 
   [(ngModel)]="test" 
   style="margin-left: 50px;"
   >
   </akbari-date-picker>

  <div *ngIf="datepickers.invalid && (datepickers.touched || datepickers.dirty)">datepicker has error  </div>

finall

hope to enjoy it .