ng-jalali-date-time v3.0.0

ng-jalali-date-time

Jalali date / month / range picker for Angular with Material Design support

This library uses Angular 10

Table of contents

• Installation
• Usage
• jalali-date-time Directive
• jalali-month Directive
• jalali-range Directive
• Interfaces
• Pipes

Installation

# Create new Angular Application
ng new my-application

# Go to application directory
cd my-application

# Add Material support to your application
# Choose YES when you asked for setting up "browser animations for Angular Material"
ng add @angular/material

# Install ng-jalali-date-time and it dependencies, using NPM
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

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

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

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

NgJalaliDateTimeCssInterface

jalali-date-time Directive CSS styles

jalali-range Directive CSS styles

NgJalaliDateTimeValueInterface

Sample

{
    "jalali": "1398-07-27",
    "gregorian": "2019-10-19",
    "date": "2019-10-19T09:04:00.000Z",
    "time": "12:34:00",
    "timestamp": 1571475840
}

NgJalaliMonthValueInterface

Sample

{
    "month": "1398-07",
    "days": 30,
    "gregorian": {
        "first": "2019-09-23",
        "last": "2019-10-22"
    }
}

NgJalaliRangeValueInterface

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