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 .