ng2-datepicker-jalali

datepicker jalali and datepicker persian

Test

http://mehrabisajad.ir/lib/ng2-datepicker-jalali/

https://github.com/mehrabisajad/ng2-datepicker-jalali-test

Installation

To install this library, run:

$ npm install ng2-datepicker-jalali --save

Consuming

$ npm install ng2-datepicker-jalali

and then from your Angular AppModule:

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { AppComponent } from './app.component';

// Import NgbModule library
import {NgbModule} from '@ng-bootstrap/ng-bootstrap';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,

    // Specify NgbModule library as an import
    NgbModule.forRoot()
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

edit css styles.css

/*styles.css*/
@import '~bootstrap/dist/css/bootstrap.min.css';

Once NgbModule library is imported, you can use its components in your Angular application:

<!-- use ngb-datepicker component in app.component.html -->
<h1>
  {{title}}
</h1>
<ngb-datepicker [firstDayOfWeek]="6"></ngb-datepicker>

And set providers in app.component.ts

// app.component.ts
import {NgbDateStruct, NgbCalendar, NgbDatepickerI18n, NgbDatepickerConfig} from '@ng-bootstrap/ng-bootstrap';
import {NgbCalendarPersian} from "ng2-datepicker-jalali/persian/ngb-calendar-persian";
import {NgbDatepickerI18nPersian} from "ng2-datepicker-jalali/persian/ngb-datepicker-i18n-persian";


@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css'],
  providers: [
    {provide: NgbCalendar, useClass: NgbCalendarPersian},
    {provide: NgbDatepickerI18n, useClass: NgbDatepickerI18nPersian}
  ]
})
export class AppComponent {
    ...
}

License

MIT © Sajad Mehrabi