Angular Jalali Date Picker

This is a configurable jalali (persian, khorshidi, shamsi) date-picker build for Angular 2 applications and uses jalali-moment as its dependency. DEMO

Read this in other languages: فارسی

Screenshots

Installation:

1. Download from npm: npm install ng2-jalali-date-picker --save
2. import the DpDatePickerModule module in typescript (.ts) or es6 files like below:
   import {DpDatePickerModule} from 'ng2-jalali-date-picker';
3. Add DpDatePickerModule to your module imports:

 @NgModule({
   ...
   imports: [
     ...
     DpDatePickerModule
   ]
 })

How to use

 dateObject = "";
 
 //OR if you have initial value you could use following code
 import * as moment from 'jalali-moment';
 dateObject = moment('1395-11-22','jYYYY,jMM,jDD');

Demo

How to use the output as a jalali (shamsi) date

import * as moment from 'jalali-moment';
dateObject.format('jYYYY/jMM/jD)'

read jalali-moment

How to use it with system.js

this Demo is using system.js.

Attributes (Input):

all attributes in the following table could be used as

// a future selector

Attributes (Output):

Configuration:

In order to provide configurations to the date-picker you need to pass it to the dp-date-picker component:

datePickerConfig = {
    drops: 'up',
    format: 'YY/M/D'
}

Here are the available configurations:

API:

In order to use the date-picker api user the @ViewChild annotation in the date-picker containing component class, take at the example below:
Container component:

import {Component, ViewChild} from '@angular/core';
import {DatePickerComponent} from 'ng2-jalali-date-picker';

@Component({
selector: 'my-container',
template: `
<div>
    <h1>Container</h1>
    
    <button></button>
    <button></button>
</div>
`
});
class MyContainer {
    @ViewChild('dayPicker') datePicker: DatePickerComponent;

    open() {
        this.datePicker.api.open();
    }

    close() {
         this.datePicker.api.close();
    }
}  

If you want to use API with Directive - you can do it by using #dateDirectivePicker, like below:

import {Component, ViewChild} from '@angular/core';
import {DatePickerDirective} from 'ng2-date-picker';

@Component({
selector: 'my-container',
template: `
<div>
    <input>
    <button></button>
</div>
`
});
class MyContainer {
    @ViewChild('dateDirectivePicker') datePickerDirective: DatePickerDirective;
	
    close() {
         this.datePickerDirective.api.close();
    }
}  

Here is the list of APIs:

Inline - Day Calendar

You can use the `` component to display the calendar widget without an associated input box.

i.e.

Attributes:

Attributes (Output):

Configuration:

In order to provide configurations to the day-calendar you need to pass it to the dp-day-calendar component:

Here are the available configurations:

Inline - Month Calendar

You can use the `` component to display the calendar widget without an associated input box. i.e.

Attributes:

Attributes (Output):

Configuration:

In order to provide configurations to the month-calendar you need to pass it to the dp-month-calendar component:

Here are the available configurations:

Here is the list of APIs:

Inline - Time Select

You can use the `` component to display the time select widget without an associated input box.

i.e.

Attributes:

Attributes (Output):

Configuration:

In order to provide configurations to the time-select you need to pass it to the dp-time-select component:

Here are the available configurations: