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

 <dp-date-picker 
   dir="rtl"
   [(ngModel)]="dateObject"
   mode="day"
   placeholder="تاریخ"
   theme="dp-material">
 </dp-date-picker>

 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
<dp-date-picker mode="day" placeholder="تاریخ" [minDate]="moment()" [(ngModel)]="selectedDate"></dp-date-picker>

Attributes (Output):

Configuration:

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

<dp-date-picker [(ngModel)]="selectedDate" [config]="datePickerConfig"></dp-date-picker>

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>
    <dp-date-picker #dayPicker></dp-date-picker>
    <button (click)="open()"></button>
    <button (click)="close()"></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 #dateDirectivePicker="dpDayPicker">
    <button (click)="close()"></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 <dp-day-calendar> component to display the calendar widget without an associated input box.

i.e.

<dp-day-calendar [(ngModel)]="selectedDate" [config]="config"></dp-day-calendar>

Attributes:

Attributes (Output):

Configuration:

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

<dp-day-calendar [(ngModel)]="selectedDate" [config]="config"></dp-day-calendar>

Here are the available configurations:

Inline - Month Calendar

You can use the <dp-month-calendar> component to display the calendar widget without an associated input box. i.e.

<dp-month-calendar [(ngModel)]="selectedDate" [config]="config"></dp-month-calendar>

Attributes:

Attributes (Output):

Configuration:

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

<dp-month-calendar [(ngModel)]="selectedDate" [config]="config"></dp-month-calendar>

Here are the available configurations:

Here is the list of APIs:

Inline - Time Select

You can use the <dp-time-select> component to display the time select widget without an associated input box.

i.e.

<dp-time-select [(ngModel)]="selectedDate" [config]="config"></dp-time-select>

Attributes:

Attributes (Output):

Configuration:

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

<dp-time-select [(ngModel)]="selectedDate" [config]="config"></dp-time-select>

Here are the available configurations:

Inline - DayTime Calendar

You can use the <dp-day-time-calendar> component to display the calendar widget and time select widget without an associated input box.

i.e.

<dp-day-time-calendar [(ngModel)]="selectedDate" [config]="config"></dp-day-time-calendar>

Attributes:

Attributes (Output):

Configuration:

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

<dp-day-time-calendar [(ngModel)]="selectedDate" [config]="config"></dp-day-time-calendar>

Here are the available configurations:

Directive

You can use the [dpDayPicker] directive to attach the picker to any component with an ngModel or a FormControl (using reactive forms).

i.e.

<input name="someName" [(ngModel)]="selectedDate" [dpDayPicker]="config" />

or using reactive forms:

<input name="someName" formControlName="selectedDate" [dpDayPicker]="config" />
<!-- OR -->
<input name="someName" [formControl]="selectedDateFormControl" [dpDayPicker]="config" />

or with @angular/material:

<md-input-container>
  <input mdInput name="someName" [(ngModel)]="selectedDate" [dpDayPicker]="config" theme="dp-material" attachTo=".mat-input-wrapper" />
</md-input-container>

Attributes:

Configuration:

In order to provide configurations to the date-picker you need to pass it to the [dpDayPicker] directive:

<input [(ngModel)]="selectedDate" [dpDayPicker]="datePickerConfig" />

The IDatePickerDirectiveConfig is identical to IDatePickerConfig above except that it lacks the showGoToCurrent property.

Here is the list of APIs:

Compatibility

Internet Explorer 10:

Internet explorer 10 doesn't support hidden attribut, but you can use a css rule on data-hidden to hide date picker components:

[data-hidden="true"] {
  display: none !important;
}