ng-jalali-date-time
Jalali date / month / range picker for Angular with Material Design support
This library uses Angular 10
Table of contents
Installation
ng new my-application
cd my-application
ng add @angular/material
npm install --save jalali-date-time ng-jalali-date-time
Usage
import NgJalaliDateTimeModule
import { NgJalaliDateTimeModule } from 'ng-jalali-date-time';
@NgModule({
...
imports: [
...
NgJalaliDateTimeModule
],
...
})
jalali-date-time Directive
<span jalali-date-time></span>
Properties
Name |
Type |
Description |
form |
FormGroup |
Components FormGroup (Reactive Forms) |
name |
string |
Form object name (Reactive Forms) |
appearance |
string |
Form object appearance (legacy, standard, fill, outline) |
config |
NgJalaliDateTimeConfigInterface |
Object configurations |
css |
NgJalaliDateTimeCssInterface |
Object css styles |
date |
string |
Default date value |
time |
string |
Default time value |
label |
string |
mat-form-field label |
Events
Sample
# component.ts
import {
NgJalaliDateTimeConfigInterface,
NgJalaliDateTimeCssInterface,
NgJalaliDateTimeValueInterface
} from 'ng-jalali-date-time';
export class MyComponent implements OnInit {
public form: FormGroup
public name: string = 'date';
public config: NgJalaliDateTimeConfigInterface = {
required: true,
min: '1300-01-01',
max: '1400-01-01',
reset: true,
error: 'مشخص کردن مقدار الزامی است',
time: true,
second: false
};
public css: NgJalaliDateTimeCssInterface = {
font: 'yekan'
};
public date: string = '';
public time: string = '';
public label: string = 'انتخاب تاریخ';
ngOnInit() {
this.form = new FormGroup({})
}
dateChanged(value: NgJalaliDateTimeValueInterface) {
console.log(value);
}
}
# component.html
<span
jalali-date-time
[form]="form"
[name]="name"
[config]="config"
[css]="css"
[date]="date"
[time]="time"
[label]="label"
(changed)="dateChanged($event)"
>
</span>
jalali-month Directive
<span jalali-month></span>
Properties
Name |
Type |
Description |
form |
FormGroup |
Components FormGroup (Reactive Forms) |
name |
string |
Form object name (Reactive Forms) |
appearance |
string |
Form object appearance (legacy, standard, fill, outline) |
config |
NgJalaliDateTimeConfigInterface |
Object configurations |
css |
NgJalaliDateTimeCssInterface |
Object css styles |
month |
string |
Default month value |
label |
string |
mat-form-field label |
Events
Sample
# component.ts
import {
NgJalaliDateTimeConfigInterface,
NgJalaliDateTimeCssInterface,
NgJalaliMonthValueInterface
} from 'ng-jalali-date-time';
export class MyComponent implements OnInit {
public form: FormGroup
public name: string = 'date';
public config: NgJalaliDateTimeConfigInterface = {
required: true,
min: '1300-01',
max: '1400-01',
reset: true,
error: 'مشخص کردن مقدار الزامی است'
};
public css: NgJalaliDateTimeCssInterface = {
font: 'yekan'
};
public month: string = '';
public label: string = 'انتخاب ماه';
ngOnInit() {
this.form = new FormGroup({})
}
dateChanged(value: NgJalaliMonthValueInterface) {
console.log(value);
}
}
# component.html
<span
jalali-month
[form]="form"
[name]="name"
[config]="config"
[css]="css"
[month]="month"
[label]="label"
(changed)="dateChanged($event)"
>
</span>
jalali-range Directive
<span jalali-range></span>
Properties
Name |
Type |
Description |
form |
FormGroup |
Components FormGroup (Reactive Forms) |
name |
string |
Form object name (Reactive Forms) |
appearance |
string |
Form object appearance (legacy, standard, fill, outline) |
config |
NgJalaliDateTimeConfigInterface |
Object configurations |
css |
NgJalaliDateTimeCssInterface |
Object css styles |
from |
string |
Default range's first date (from) value |
to |
string |
Default range's last date (to) value |
label |
string |
mat-form-field label |
Events
Sample
# component.ts
import {
NgJalaliDateTimeConfigInterface,
NgJalaliDateTimeCssInterface,
NgJalaliRangeValueInterface
} from 'ng-jalali-date-time';
export class MyComponent implements OnInit {
public form: FormGroup
public name: string = 'date';
public config: NgJalaliDateTimeConfigInterface = {
required: true,
min: '1300-01-01',
max: '1400-01-01',
reset: true,
error: 'مشخص کردن مقدار الزامی است'
};
public css: NgJalaliDateTimeCssInterface = {
font: 'yekan'
};
public from: string = '';
public to: string = '';
public label: string = 'انتخاب دوره زمانی';
ngOnInit() {
this.form = new FormGroup({})
}
dateChanged(value: NgJalaliRangeValueInterface) {
console.log(value);
}
}
# component.html
<span
jalali-date-time
[form]="form"
[name]="name"
[config]="config"
[css]="css"
[from]="from"
[to]="to"
[label]="label"
(changed)="dateChanged($event)"
>
</span>
Interfaces
NgJalaliDateTimeConfigInterface
Name |
Type |
Description |
required |
boolean |
Set object as required on Reactive Forms |
min |
string |
Minimum acceptable date value |
max |
string |
Maximum acceptable date value |
reset |
boolean |
Show reset button if date is selected |
error |
string |
Error message (Required object) |
time |
boolean |
Show time selector |
second |
boolean |
Active second selector (if time value is true) |
NgJalaliDateTimeCssInterface
Name |
Type |
Description |
font |
string |
Font family name |
field |
[NgStyle] object |
mat-form-field CSS style |
input |
[NgStyle] object |
Input CSS style |
reset |
[NgStyle] object |
Reset button CSS style |
box |
[NgStyle] object |
Calendar box CSS style |
arrow |
[NgStyle] object |
First/Previous/Next/Last arrows CSS style |
header |
[NgStyle] object |
Calendar header (month/year title) CSS style |
item |
[NgStyle] object |
Calendar date/month items CSS style |
selected |
[NgStyle] object |
Selected date/month item CSS style |
current |
[NgStyle] object |
Current date/month item CSS style |
date |
object |
jalali-date-time Directive CSS styles |
range |
object |
jalali-range Directive CSS styles |
jalali-date-time Directive CSS styles
Name |
Type |
Description |
name |
[NgStyle] object |
Day names CSS style |
time |
[NgStyle] object |
Time selectors (inputs) CSS style |
jalali-range Directive CSS styles
Name |
Type |
Description |
tool |
[NgStyle] object |
Selector tools CSS style |
custom |
[NgStyle] object |
Custom range selector CSS style |
confirm |
[NgStyle] object |
Confirm selector CSS style |
name |
[NgStyle] object |
Day names CSS style |
date |
[NgStyle] object |
Custom date title CSS style |
NgJalaliDateTimeValueInterface
Name |
Type |
jalali |
string |
gregorian |
string |
date |
Date |
time |
string |
timestamp |
number |
Sample
{
"jalali": "1398-07-27",
"gregorian": "2019-10-19",
"date": "2019-10-19T09:04:00.000Z",
"time": "12:34:00",
"timestamp": 1571475840
}
NgJalaliMonthValueInterface
Name |
Type |
month |
string |
days |
number |
gregorian |
Object |
gregorian .first |
string |
gregorian .last |
string |
Sample
{
"month": "1398-07",
"days": 30,
"gregorian": {
"first": "2019-09-23",
"last": "2019-10-22"
}
}
NgJalaliRangeValueInterface
Name |
Type |
range |
string |
from |
string |
to |
string |
days |
number |
hours |
number |
minutes |
number |
seconds |
number |
gregorian |
Object |
gregorian .from |
string |
gregorian .to |
string |
Sample
{
"range": "1398-07-01|1398-07-30",
"from": "1398-07-01",
"to": "1398-07-30",
"days": 30,
"hours": 720,
"minutes": 43200,
"seconds": 2592000,
"gregorian": {
"from": "2019-09-23",
"to": "2019-10-22"
}
}
Pipes
Pipe |
Sample |
Result |
jalaliDate (date) |
'1398-07-27' | jalaliDate |
Sat Oct 19 2019 00:00:00 GMT+0330 (Iran Standard Time) |
jalaliDate (date/time) |
'1398-07-27 16:52:23' | jalaliDate |
Sat Oct 19 2019 16:52:23 GMT+0330 (Iran Standard Time) |
jalaliMonth |
'1398-07' | jalaliMonth |
مهر ۱۳۹۸ |
jalaliRange |
'1398-07-01|1398-07-30' | jalaliRange |
۱ تا ۳۰ مهر ۱۳۹۸ |
jalaliFull (string) |
'1398-07-27 16:52:23' | jalaliFull |
شنبه، ۲۷ مهر ۱۳۹۸ ۱۶:۵۲:۲۳ |
jalaliFull (timestamp) |
1571491343 | jalaliFull |
شنبه، ۲۷ مهر ۱۳۹۸ ۱۶:۵۲:۲۳ |
jalaliTitle (string) |
'1398-07-27' | jalaliTitle |
شنبه، ۲۷ مهر ۱۳۹۸ |
jalaliTitle (timestamp) |
1571491343 | jalaliTitle |
شنبه، ۲۷ مهر ۱۳۹۸ |
jalaliTimestamp (date) |
'1398-07-27' | jalaliTimestamp |
1571430600 |
jalaliTimestamp (date/time) |
'1398-07-27 16:52:23' | jalaliTimestamp |
1571491343 |
jalaliDays (range) |
'1398-07-01|1398-07-30' | jalaliDays |
30 |
jalaliDays (date) |
'1398-07-27' | jalaliDays |
1 |