This library Supports Angular CLI versions greater than or equal to 16.1.0.
nira-date-picker
is a date picker with some abilities like customizing theme , setting default date, ...
nira-date-picker
is a date picker based on Shamsi date and Jalali Moment package is used in it.
the Gregorian section in nira-date-picker
will be activate.
npm i nira-date-picker
-
First inject
NiraDatePickerModule
in the module you want to usenira-date-picker
like bellow:
import { NiraDatePickerModule } from 'nira-date-picker';
@NgModule({
//other inputs
imports: [
NiraDatePickerModule,
]})
- You should bind
nira-date-picker
with an HTML input tag byisOpenCalendar
;a two way bind property; the calendar will be opened byclick
on theinput
and changeisOpenCalendar
value totrue
. like bellow(incomponent.html
file):
<input (click)="_isOpenCalendar = true" />
<lib-nira-date-picker
[(isOpenCalendar)]="_isOpenCalendar">
</lib-nira-date-picker>
you must get selected date from datePickerResult
property like bellow (in component.html
file):
<input (click)="_isOpenCalendar = true" [value]="date" />
<lib-nira-date-picker
[(isOpenCalendar)]="_isOpenCalendar"
(datePickerResult)="date = $event">
</lib-nira-date-picker>
you must set default value by defaultDate
property in nira-date-picker
like bellow (in .component.html
file):
<input matInput id="datePickerInput " [value]="date" />
<lib-nira-date-picker
(click)="_isOpenCalendar = true"
[defaultDate]="date"
[(isOpenCalendar)]="_isOpenCalendar"
(datePickerResult)="date = $event">
</lib-nira-date-picker>
you might set selectToday
property to true
and get current date from todayDate
like bellow:
<lib-nira-date-picker
[selectToday]="true"
(todayDate)="getToday($event)"
[(isOpenCalendar)]="isOpen"
[defaultDate]="getDefaultDate()"
(datePickerResult)="date = $event">
</lib-nira-date-picker>