{{title}}

#### Datepicker:

The Angular2 Datepicker is a highly configurable component that adds datepicker functionality to your pages. You can customize the date format and language, restrict the selectable date ranges.

Note: `datepicker` requires moment for data parsing, until Intl polyfill will be implemented.

#### Datepicker Example:

##### Set Date

    Selected date is: {{ getDate() | date:'fullDate'}}

#### Inline

#### Datepicker Example Code:

##### markup

                <datepicker [(ngModel)]="dt" [minDate]="minDate" [maxDate]="maxDate" [showWeeks]="true" [formatDayTitle]="format" [yearRange]=10 [startingDay]="1" [onlyCurrentMonth]="onlyCurrentMonth"></datepicker>
                <button type="button" class="btn btn-sm btn-info" (click)="today()">Today</button>
                <button type="button" class="btn btn-sm btn-default btn-secondary" (click)="d20160606();">2016-06-06</button>
                <button type="button" class="btn btn-sm btn-default btn-secondary" (click)="toggleMin()">Min date</button>
                <button type="button" class="btn btn-sm btn-default btn-secondary" (click)="toggleMax()">Max date</button>
                <button type="button" class="btn btn-sm btn-default btn-secondary" (click)="onlyCurrentMonth=!onlyCurrentMonth">onlyCurrentMonth</button>
                <button type="button" class="btn btn-sm btn-danger" (click)="clear()">Clear</button>

##### typescript

                  export class DatepickerComponent {
                      public title="Datepicker Component";
                      public dt:Date = new Date();
                      public minDate:Date = void 0;
                      public maxDate:Date;
                      public events:Array<any>;
                      public tomorrow:Date;
                      public afterTomorrow:Date;
                      public formats:Array<string> = ['DD-MM-YYYY', 'YYYY/MM/DD', 'DD.MM.YYYY', 'shortDate'];
                      public format:string = this.formats[0]; //default format
                      public onlyCurrentMonth:boolean=false;
                      public dateOptions:any = {
                      formatYear: 'YY',
                      startingDay: 1
                    };
                    private opened:boolean = false;
                    public constructor() {
                      (this.tomorrow = new Date()).setDate(this.tomorrow.getDate() + 1);
                      (this.afterTomorrow = new Date()).setDate(this.tomorrow.getDate() + 2);
                      (this.minDate = new Date()).setDate(this.minDate.getDate() - 3650);
                      (this.maxDate=new Date()).setDate(this.maxDate.getDate()+3650);
                      this.events = [
                        {date: this.tomorrow, status: 'full'},
                        {date: this.afterTomorrow, status: 'partially'}
                      ];
                    }
                    public getDate():number {
                      return this.dt && this.dt.getTime() || new Date().getTime();
                    }
                    public today():void {
                      this.dt = new Date();
                    }
                    public d20160606():void {
                      this.dt = moment('2016-06-06', 'YYYY-MM-DD').toDate();
                    }
                    public open():void {
                      this.opened = !this.opened;
                    }
                    public clear():void {
                      this.dt = void 0;
                    }
                    public toggleMin():void {
                      this.dt = new Date(this.minDate.valueOf());
                    }
                    public toggleMax():void{
                      this.dt=new Date(this.maxDate.valueOf());
                    }
                  }

#### Date picker properties:

- `ngModel` (`:Date`) - binds to date
- `datepickerMode` (`?string='day'`) - sets datepicker mode, supports: `day`, `month`, `year`
- `minDate` (`?Date=null`) - oldest selectable date
- `maxDate` (`?Date=null`) - latest selectable date
- `dateDisabled` (`?Array<{date:Date, mode:string}>`) - array of disabled dates if `mode` is `day`, or years, etc.
- `customClass` (`?Array<{date:Date, mode:string, clazz:string}>`) - array of custom css classes to be applied to targeted dates
- `showWeeks` (`?boolean=true`) - if `false` week numbers will be hidden
- `startingDay` (`?number=0`) - starting day of the week from 0-6 (0=Sunday, ..., 6=Saturday).
- `initDate` (`?Date`) - default date to show if `ng-model` value is not specified
- `minMode` (`?string='day'`) - set lower datepicker mode, supports: `day`, `month`, `year`
- `maxMode` (`?string='year'`) - sets upper datepicker mode, supports: `day`, `month`, `year`
- `formatDay` (`?string='dd'`) - format of day in month
- `formatMonth` (`?string='MMMM'`) - format of month in year
- `formatMear` (`?string='yyyy'`) - format of year in year range
- `formatDayHeader` (`?string='EEE'`) - format of day in week header
- `formatDayTitle` (`?string='MMMM yyyy'`) - format of title when selecting day
- `formatMonthTitle` (`?string='yyyy'`) - format of title when selecting month
- `yearRange` (`?number=20`) - number of years displayed in year selection
- `shortcutPropagation` (`?boolean=false`) - if `true` shortcut`s event propagation will be disabled
- `onlyCurrentMonth` (`?boolean=false`) - if `true` only dates from the currently displayed month will be shown