ng2-date-picker-raul-solution v0.6.4

Date Picker

This is a configurable date-picker build for Angular2 applications and uses MomentJS as its dependency.
DEMO

Installation:

1. Download from npm: npm install ng2-date-picker --save
2. import the DpDatePickerModule module:
   import {DpDatePickerModule} from 'ng2-date-picker';
3. Add DpDatePickerModule to your module imports:

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

Usage

Put the dp-date-picker component wherever you need it.

Attributes:

Configuration:

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

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

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 bellow:
Container component:

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

@Component({
selector: 'my-container',
template: `
<div>
    <h1>Container</h1>
    <dp-day-picker #dayPicker></dp-day-picker>
    <button (click)="open()"></button>
    <button (click)="close()"></button>
</div>
`
});
class MyContainer {
    @ViewChild('dayPicker') dayPicker: DpDayPickerComponent;
    
    open() {
        this.dayPicker.api.open();
    }
     
    close() {
         this.dayPicker.api.close();
    } 
}  

Here is the list of APIs:

Inline

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

i.e.

<dp-calendar [(selected)]="dates" [config]="calendarConfig"></dp-calendar>

Inputs

Outputs