<!DOCTYPE html>
<html>
<head>
<title>Angular 2 Datepicker - Example</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- CSS file -->
<link rel="stylesheet" type="text/css" href="style.css">
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" >
<!-- IE polyfills, keep the order please -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/es6-shim/0.33.3/es6-shim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.20/system-polyfills.js"></script>
<!-- Agular 2 -->
<script src="https://code.angularjs.org/2.0.0-beta.7/angular2-polyfills.js"></script>
<script src="https://code.angularjs.org/tools/system.js"></script>
<script src="https://code.angularjs.org/tools/typescript.js"></script>
<script src="https://code.angularjs.org/2.0.0-beta.7/Rx.js"></script>
<script src="https://code.angularjs.org/2.0.0-beta.7/angular2.dev.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.12.0/moment.min.js"></script>
<!-- Config Agular 2 and Typescript -->
<script>
System.config({
transpiler: 'typescript',
typescriptOptions: { emitDecoratorMetadata: true },
packages: {'app': {defaultExtension: 'ts'}}
});
System.import('app/main')
.then(null, console.error.bind(console));
</script>
</head>
<!-- Run the application -->
<body>
<h1>Angular 2 Datepicker</h1>
<my-app class="container" style="display: block">Loading Sample...</my-app>
<div style="padding-top:50px">
<a target="_blank" href="http://www.angulartypescript.com/angular-2-tutorial/" title="Angular 2 Tutorial">
<img src="http://www.angulartypescript.com/wp-content/uploads/2016/03/learn-more-angular-2.png" alt="Smiley face" height="200" width="500">
</a>
<ul class="nav nav-pills nav-stacked" >
<li><a target="_blank" href="http://www.angulartypescript.com/angular-2-tutorial/" title="Angular 2 Home"> Angular 2 Tutorial </a></li>
<li><a target="_blank" href="http://www.angulartypescript.com/angular-2-introduction/">Angular 2 Introduction</a></li>
<li><a target="_blank" href="http://www.angulartypescript.com/angular-2-architecture/">Angular 2 Architecture</a></li>
<li><a target="_blank" href="http://www.angulartypescript.com/angular-2-annotations/">Angular 2 Annotations</a></li>
<li><a target="_blank" href="http://www.angulartypescript.com/angular-2-getting-started/">Angular 2 Setup</a></li>
<li><a target="_blank" href="http://www.angulartypescript.com/angular-2-hello-world/">Angular 2 Hello World</a></li>
<li><a target="_blank" href="http://www.angulartypescript.com/angular-2-components/">Angular 2 Components</a></li>
<li><a target="_blank" href="http://www.angulartypescript.com/angular-2-template-syntax/">Angular 2 Template Syntax</a></li>
<li><a target="_blank" href="http://www.angulartypescript.com/angular-2-data-binding/">Angular 2 Data Binding</a></li>
<li><a target="_blank" href="http://www.angulartypescript.com/angular-2-forms/">Angular 2 Forms</a></li>
<li><a target="_blank" href="http://www.angulartypescript.com/angular-2-formbuilder-example/">Angular 2 Formbuilder</a></li>
<li><a target="_blank" href="http://www.angulartypescript.com/angular-2-router-example/">Angular 2 Router</a></li>
<li><a target="_blank" href="http://www.angulartypescript.com/angular-2-http-example-typescript/">Angular 2 HTTP</a></li>
<li><a target="_blank" href="http://www.angulartypescript.com/angular-2-services/">Angular 2 Service</a></li>
</ul>
</div>
</body>
</html>
<!--
Copyright 2016 angulartypescript.com. All Rights Reserved.
Everyone can use this source code; don’t forget to indicate the source please:
http://www.angulartypescript.com/
-->
/* Styles go here */
/**
* Created by Tareq Boulakjar. from angulartypescript.com
*/
import {bootstrap} from 'angular2/platform/browser';
import {Angular2Datepicker} from './datepicker-example';
bootstrap(Angular2Datepicker);
/*
Copyright 2016 angulartypescript.com. All Rights Reserved.
Everyone can use this source code; don’t forget to indicate the source please:
http://www.angulartypescript.com/
*/
import {Component, Self, Input} from 'angular2/core';
import {
CORE_DIRECTIVES,
FORM_DIRECTIVES,
ControlValueAccessor,
NgModel
} from 'angular2/common';
import {DatePickerInner} from './datepicker-container';
import {DayPicker} from './daypicker';
import {MonthPicker} from './monthpicker';
import {YearPicker} from './yearpicker';
@Component({
selector: 'datepicker[ngModel], [datepicker][ngModel]',
template: `
<datepicker-inner [activeDate]="activeDate"
(update)="onUpdate($event)"
[datepickerMode]="datepickerMode"
[initDate]="initDate"
[minDate]="minDate"
[maxDate]="maxDate"
[minMode]="minMode"
[maxMode]="maxMode"
[showWeeks]="showWeeks"
[formatDay]="formatDay"
[formatMonth]="formatMonth"
[formatYear]="formatYear"
[formatDayHeader]="formatDayHeader"
[formatDayTitle]="formatDayTitle"
[formatMonthTitle]="formatMonthTitle"
[startingDay]="startingDay"
[yearRange]="yearRange"
[customClass]="customClass"
[dateDisabled]="dateDisabled"
[templateUrl]="templateUrl"
[onlyCurrentMonth]="onlyCurrentMonth"
[shortcutPropagation]="shortcutPropagation">
<daypicker tabindex="0"></daypicker>
<monthpicker tabindex="0"></monthpicker>
<yearpicker tabindex="0"></yearpicker>
</datepicker-inner>
`,
directives: [DatePickerInner, DayPicker, MonthPicker, YearPicker, FORM_DIRECTIVES, CORE_DIRECTIVES]
})
export class DatePicker implements ControlValueAccessor {
private _activeDate:Date;
@Input() public datepickerMode:string;
@Input() public initDate:Date;
@Input() public minDate:Date;
@Input() public maxDate:Date;
@Input() public minMode:string;
@Input() public maxMode:string;
@Input() public showWeeks:boolean;
@Input() public formatDay:string;
@Input() public formatMonth:string;
@Input() public formatYear:string;
@Input() public formatDayHeader:string;
@Input() public formatDayTitle:string;
@Input() public formatMonthTitle:string;
@Input() public startingDay:number;
@Input() public yearRange:number;
@Input() public onlyCurrentMonth:boolean;
@Input() public shortcutPropagation:boolean;
@Input() public get activeDate():Date {
return this._activeDate || this._now;
}
// todo: change type during implementation
public customClass:any;
// todo: change type during implementation
@Input() public dateDisabled:any;
constructor(@Self() public cd:NgModel) {
// hack
cd.valueAccessor = this;
}
private _now:Date = new Date();
public set activeDate(value:Date) {
this._activeDate = value;
}
private onUpdate(event:any) {
this.writeValue(event);
this.cd.viewToModelUpdate(event);
}
// todo: support null value
writeValue(value:any) {
// todo: fix something sends here new date all the time
// if (value) {
// if (typeof value !== 'Date') {
// value = new Date(value);
// }
//
// this.activeDate = value;
// }
if (value === this._activeDate) {
return;
}
if (value && value instanceof Date) {
this.activeDate = value;
return;
}
this.activeDate = value ? new Date(value) : null;
}
onChange = (_:any) => {
};
onTouched = () => {
};
registerOnChange(fn:(_:any) => {}):void {
this.onChange = fn;
}
registerOnTouched(fn:() => {}):void {
this.onTouched = fn;
}
}
import {Component, OnInit, EventEmitter, Input} from 'angular2/core';
import {
CORE_DIRECTIVES, FORM_DIRECTIVES, NgClass, NgModel
} from 'angular2/common';
import {DateFormatter} from './moment-date-formatter';
const FORMAT_DAY:string = 'DD';
const FORMAT_MONTH:string = 'MMMM';
const FORMAT_YEAR:string = 'YYYY';
const FORMAT_DAY_HEADER:string = 'dd';
const FORMAT_DAY_TITLE:string = 'MMMM YYYY';
const FORMAT_MONTH_TITLE:string = 'YYYY';
const DATEPICKER_MODE:string = 'day';
const MIN_MODE:string = 'day';
const MAX_MODE:string = 'year';
const SHOW_WEEKS:boolean = true;
const ONLY_CURRENT_MONTH:boolean = false;
const STARTING_DAY:number = 0;
const YEAR_RANGE:number = 20;
const MIN_DATE:Date = null;
const MAX_DATE:Date = null;
const SHORTCUT_PROPAGATION:boolean = false;
const DAYS_IN_MONTH = [31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31];
const KEYS = {
13: 'enter',
32: 'space',
33: 'pageup',
34: 'pagedown',
35: 'end',
36: 'home',
37: 'left',
38: 'up',
39: 'right',
40: 'down'
};
@Component({
selector: 'datepicker-inner',
events: ['update'],
template: `
<div [hidden]="!datepickerMode" class="well well-sm bg-faded p-a card" role="application" ><!--<!–ng-keydown="keydown($event)"–>-->
<ng-content></ng-content>
</div>
`,
directives: [FORM_DIRECTIVES, CORE_DIRECTIVES, NgClass, NgModel]
})
export class DatePickerInner implements OnInit {
@Input()
public datepickerMode:string;
@Input()
public startingDay:number;
@Input()
public yearRange:number;
public stepDay:any = {};
public stepMonth:any = {};
public stepYear:any = {};
private modes:Array<string> = ['day', 'month', 'year'];
private dateFormatter:DateFormatter = new DateFormatter();
private uniqueId:string;
private _activeDate:Date;
private selectedDate:Date;
private _initDate:Date;
private activeDateId:string;
@Input()
private minDate:Date;
@Input()
private maxDate:Date;
@Input()
private minMode:string;
@Input()
private maxMode:string;
@Input()
private showWeeks:boolean;
@Input()
private formatDay:string;
@Input()
private formatMonth:string;
@Input()
private formatYear:string;
@Input()
private formatDayHeader:string;
@Input()
private formatDayTitle:string;
@Input()
private formatMonthTitle:string;
@Input()
private onlyCurrentMonth:boolean;
@Input()
private shortcutPropagation:boolean;
@Input()
private customClass:any;
@Input()
private dateDisabled:any;
@Input()
private templateUrl:string;
private refreshViewHandlerDay:Function;
private compareHandlerDay:Function;
private refreshViewHandlerMonth:Function;
private compareHandlerMonth:Function;
private refreshViewHandlerYear:Function;
private compareHandlerYear:Function;
private update:EventEmitter<Date> = new EventEmitter();
@Input()
private get initDate():Date {
return this._initDate;
}
private set initDate(value:Date) {
this._initDate = value;
}
@Input()
private get activeDate():Date {
return this._activeDate;
}
private set activeDate(value:Date) {
this._activeDate = value;
this.refreshView();
}
ngOnInit() {
this.formatDay = this.formatDay || FORMAT_DAY;
this.formatMonth = this.formatMonth || FORMAT_MONTH;
this.formatYear = this.formatYear || FORMAT_YEAR;
this.formatDayHeader = this.formatDayHeader || FORMAT_DAY_HEADER;
this.formatDayTitle = this.formatDayTitle || FORMAT_DAY_TITLE;
this.formatMonthTitle = this.formatMonthTitle || FORMAT_MONTH_TITLE;
this.showWeeks = (this.showWeeks === undefined ? SHOW_WEEKS : this.showWeeks);
this.onlyCurrentMonth = (this.onlyCurrentMonth === undefined ? ONLY_CURRENT_MONTH : this.onlyCurrentMonth);
this.startingDay = this.startingDay || STARTING_DAY;
this.yearRange = this.yearRange || YEAR_RANGE;
this.shortcutPropagation = this.shortcutPropagation || SHORTCUT_PROPAGATION;
this.datepickerMode = this.datepickerMode || DATEPICKER_MODE;
this.minMode = this.minMode || MIN_MODE;
this.maxMode = this.maxMode || MAX_MODE;
this.uniqueId = 'datepicker-' + '-' + Math.floor(Math.random() * 10000);
if (this.initDate) {
this.activeDate = this.initDate;
} else {
this.activeDate = new Date();
}
this.selectedDate = new Date(this.activeDate.valueOf());
this.update.emit(this.activeDate);
this.refreshView();
}
public setCompareHandler(handler:Function, type:string) {
if (type === 'day') {
this.compareHandlerDay = handler;
}
if (type === 'month') {
this.compareHandlerMonth = handler;
}
if (type === 'year') {
this.compareHandlerYear = handler;
}
}
public compare(date1:Date, date2:Date):number {
if (this.datepickerMode === 'day' && this.compareHandlerDay) {
return this.compareHandlerDay(date1, date2);
}
if (this.datepickerMode === 'month' && this.compareHandlerMonth) {
return this.compareHandlerMonth(date1, date2);
}
if (this.datepickerMode === 'year' && this.compareHandlerYear) {
return this.compareHandlerYear(date1, date2);
}
return null;
}
public setRefreshViewHandler(handler:Function, type:string) {
if (type === 'day') {
this.refreshViewHandlerDay = handler;
}
if (type === 'month') {
this.refreshViewHandlerMonth = handler;
}
if (type === 'year') {
this.refreshViewHandlerYear = handler;
}
}
public refreshView() {
if (this.datepickerMode === 'day' && this.refreshViewHandlerDay) {
this.refreshViewHandlerDay();
}
if (this.datepickerMode === 'month' && this.refreshViewHandlerMonth) {
this.refreshViewHandlerMonth();
}
if (this.datepickerMode === 'year' && this.refreshViewHandlerYear) {
this.refreshViewHandlerYear();
}
}
public dateFilter(date:Date, format:string):string {
return this.dateFormatter.format(date, format);
}
private isActive(dateObject:any):boolean {
if (this.compare(dateObject.date, this.activeDate) === 0) {
this.activeDateId = dateObject.uid;
return true;
}
return false;
}
private createDateObject(date:Date, format:string):any {
let dateObject:any = {};
dateObject.date = date;
dateObject.label = this.dateFilter(date, format);
dateObject.selected = this.compare(date, this.selectedDate) === 0;
dateObject.disabled = this.isDisabled(date);
dateObject.current = this.compare(date, new Date()) === 0;
return dateObject;
}
private isDisabled(date:Date):boolean {
// todo: implement dateDisabled attribute
return ((this.minDate && this.compare(date, this.minDate) < 0) ||
(this.maxDate && this.compare(date, this.maxDate) > 0));
};
private split(arr:Array<any>, size:number) {
let arrays:Array<any> = [];
while (arr.length > 0) {
arrays.push(arr.splice(0, size));
}
return arrays;
}
public fixTimeZone(date:Date) {
let hours = date.getHours();
date.setHours(hours === 23 ? hours + 2 : 0);
}
public select(date:Date) {
if (this.datepickerMode === this.minMode) {
if (!this.activeDate) {
this.activeDate = new Date(0, 0, 0, 0, 0, 0, 0);
}
this.activeDate.setFullYear(date.getFullYear(), date.getMonth(), date.getDate());
} else {
this.activeDate = date;
this.datepickerMode = this.modes[this.modes.indexOf(this.datepickerMode) - 1];
}
this.selectedDate = new Date(this.activeDate.valueOf());
this.update.emit(this.activeDate);
this.refreshView();
}
public move(direction:number) {
let expectedStep:any;
if (this.datepickerMode === 'day') {
expectedStep = this.stepDay;
}
if (this.datepickerMode === 'month') {
expectedStep = this.stepMonth;
}
if (this.datepickerMode === 'year') {
expectedStep = this.stepYear;
}
if (expectedStep) {
let year = this.activeDate.getFullYear() + direction * (expectedStep.years || 0);
let month = this.activeDate.getMonth() + direction * (expectedStep.months || 0);
this.activeDate.setFullYear(year, month, 1);
this.refreshView();
}
}
public toggleMode(direction:number) {
direction = direction || 1;
if ((this.datepickerMode === this.maxMode && direction === 1) ||
(this.datepickerMode === this.minMode && direction === -1)) {
return;
}
this.datepickerMode = this.modes[this.modes.indexOf(this.datepickerMode) + direction];
this.refreshView();
}
}
import {Component, OnInit} from 'angular2/core';
import {CORE_DIRECTIVES, FORM_DIRECTIVES, NgClass} from 'angular2/common';
import {DatePickerInner} from './datepicker-container';
@Component({
selector: 'daypicker, [daypicker]',
template: `
<table [hidden]="datePicker.datepickerMode!=='day'" role="grid" aria-labelledby="uniqueId+'-title'" aria-activedescendant="activeDateId">
<thead>
<tr>
<th>
<button type="button" class="btn btn-default btn-secondary btn-sm pull-left" (click)="datePicker.move(-1)" tabindex="-1">
<i class="glyphicon glyphicon-chevron-left"></i>
</button>
</th>
<th [attr.colspan]="5 + datePicker.showWeeks">
<button [id]="datePicker.uniqueId + '-title'"
type="button" class="btn btn-default btn-secondary btn-sm"
(click)="datePicker.toggleMode()"
[disabled]="datePicker.datepickerMode === datePicker.maxMode"
[ngClass]="{disabled: datePicker.datepickerMode === datePicker.maxMode}" tabindex="-1" style="width:100%;">
<strong>{{title}}</strong>
</button>
</th>
<th>
<button type="button" class="btn btn-default btn-secondary btn-sm pull-right" (click)="datePicker.move(1)" tabindex="-1">
<i class="glyphicon glyphicon-chevron-right"></i>
</button>
</th>
</tr>
<tr>
<th [hidden]="!datePicker.showWeeks"></th>
<th *ngFor="#labelz of labels" class="text-center"><small aria-label="labelz.full"><b>{{labelz.abbr}}</b></small></th>
</tr>
</thead>
<tbody>
<template ngFor [ngForOf]="rows" #rowz="$implicit" #index="index">
<tr *ngIf="!(datePicker.onlyCurrentMonth && rowz[0].secondary && rowz[6].secondary)">
<td [hidden]="!datePicker.showWeeks" class="text-center h6"><em>{{ weekNumbers[index] }}</em></td>
<!-- [ngClass]="dtz.customClass" -->
<td *ngFor="#dtz of rowz" class="text-center" role="gridcell" [id]="dtz.uid">
<button type="button" style="min-width:100%;" class="btn btn-default btn-sm"
*ngIf="!(datePicker.onlyCurrentMonth && dtz.secondary)"
[ngClass]="{'btn-info': dtz.selected, active: datePicker.isActive(dtz), disabled: dtz.disabled}"
[disabled]="dtz.disabled"
(click)="datePicker.select(dtz.date)" tabindex="-1">
<span [ngClass]="{'text-muted': dtz.secondary, 'text-info': dtz.current}">{{dtz.label}}</span>
</button>
</td>
</tr>
</template>
</tbody>
</table>
`,
directives: [FORM_DIRECTIVES, CORE_DIRECTIVES, NgClass]
})
export class DayPicker implements OnInit {
public labels:Array<any> = [];
public title:string;
public rows:Array<any> = [];
public weekNumbers:Array<number> = [];
constructor(public datePicker:DatePickerInner) {
}
private getDates(startDate:Date, n:number) {
let dates:Array<Date> = new Array(n);
let current = new Date(startDate.getTime());
let i = 0;
let date:Date;
while (i < n) {
date = new Date(current.getTime());
this.datePicker.fixTimeZone(date);
dates[i++] = date;
current.setDate(current.getDate() + 1);
}
return dates;
}
private getISO8601WeekNumber(date:Date):number {
let checkDate = new Date(date.getTime());
// Thursday
checkDate.setDate(checkDate.getDate() + 4 - (checkDate.getDay() || 7));
let time = checkDate.getTime();
// Compare with Jan 1
checkDate.setMonth(0);
checkDate.setDate(1);
return Math.floor(Math.round((time - checkDate.getTime()) / 86400000) / 7) + 1;
}
ngOnInit() {
let self = this;
this.datePicker.stepDay = {months: 1};
this.datePicker.setRefreshViewHandler(function () {
let year = this.activeDate.getFullYear();
let month = this.activeDate.getMonth();
let firstDayOfMonth = new Date(year, month, 1);
let difference = this.startingDay - firstDayOfMonth.getDay();
let numDisplayedFromPreviousMonth = (difference > 0) ? 7 - difference : -difference;
let firstDate = new Date(firstDayOfMonth.getTime());
if (numDisplayedFromPreviousMonth > 0) {
firstDate.setDate(-numDisplayedFromPreviousMonth + 1);
}
// 42 is the number of days on a six-week calendar
let _days:Array<Date> = self.getDates(firstDate, 42);
let days:Array<any> = [];
for (let i = 0; i < 42; i++) {
let _dateObject = this.createDateObject(_days[i], this.formatDay);
_dateObject.secondary = _days[i].getMonth() !== month;
_dateObject.uid = this.uniqueId + '-' + i;
days[i] = _dateObject;
}
self.labels = [];
for (let j = 0; j < 7; j++) {
self.labels[j] = {};
self.labels[j].abbr = this.dateFilter(days[j].date, this.formatDayHeader);
self.labels[j].full = this.dateFilter(days[j].date, 'EEEE');
}
self.title = this.dateFilter(this.activeDate, this.formatDayTitle);
self.rows = this.split(days, 7);
if (this.showWeeks) {
self.weekNumbers = [];
let thursdayIndex = (4 + 7 - this.startingDay) % 7,
numWeeks = self.rows.length;
for (let curWeek = 0; curWeek < numWeeks; curWeek++) {
self.weekNumbers.push(self.getISO8601WeekNumber(self.rows[curWeek][thursdayIndex].date));
}
}
}, 'day');
this.datePicker.setCompareHandler(function (date1:Date, date2:Date) {
let d1 = new Date(date1.getFullYear(), date1.getMonth(), date1.getDate());
let d2 = new Date(date2.getFullYear(), date2.getMonth(), date2.getDate());
return d1.getTime() - d2.getTime();
}, 'day');
this.datePicker.refreshView();
}
// todo: key events implementation
}
/**
* Created by Tareq Boulakjar. from angulartypescript.com
*/
// <reference path="/typings/moment/moment.d.ts" />
//import * as moment_ from 'moment';
//const moment:moment.MomentStatic = (<any>moment_)['default'] || moment_;
export class DateFormatter {
public format(date:Date, format:string):string {
return moment(date.getTime()).format(format);
//return date.getTime().toString() ;
}
}
import {
Component, View, Host,
OnInit, EventEmitter,
ElementRef, ViewContainerRef,
Self, Renderer
} from 'angular2/core';
import {CORE_DIRECTIVES, FORM_DIRECTIVES,
DefaultValueAccessor, NgIf, NgClass, NgModel
} from 'angular2/common';
import {DatePickerInner} from './datepicker-container';
@Component({
selector: 'monthpicker, [monthpicker]',
template: `
<table [hidden]="datePicker.datepickerMode!=='month'" role="grid">
<thead>
<tr>
<th>
<button type="button" class="btn btn-default btn-sm pull-left"
(click)="datePicker.move(-1)" tabindex="-1">
<i class="glyphicon glyphicon-chevron-left"></i>
</button></th>
<th>
<button [id]="uniqueId + '-title'"
type="button" class="btn btn-default btn-sm"
(click)="datePicker.toggleMode()"
[disabled]="datePicker.datepickerMode === maxMode"
[ngClass]="{disabled: datePicker.datepickerMode === maxMode}" tabindex="-1" style="width:100%;">
<strong>{{title}}</strong>
</button>
</th>
<th>
<button type="button" class="btn btn-default btn-sm pull-right"
(click)="datePicker.move(1)" tabindex="-1">
<i class="glyphicon glyphicon-chevron-right"></i>
</button>
</th>
</tr>
</thead>
<tbody>
<tr *ngFor="#rowz of rows">
<td *ngFor="#dtz of rowz" class="text-center" role="gridcell" id="{{dtz.uid}}" [ngClass]="dtz.customClass">
<button type="button" style="min-width:100%;" class="btn btn-default"
[ngClass]="{'btn-info': dtz.selected, active: datePicker.isActive(dtz), disabled: dtz.disabled}"
[disabled]="dtz.disabled"
(click)="datePicker.select(dtz.date)" tabindex="-1"><span [ngClass]="{'text-info': dtz.current}">{{dtz.label}}</span></button>
</td>
</tr>
</tbody>
</table>
`,
directives: [FORM_DIRECTIVES, CORE_DIRECTIVES, NgClass]
})
export class MonthPicker implements OnInit {
public title:string;
public rows:Array<any> = [];
constructor(public datePicker:DatePickerInner) {
}
ngOnInit() {
let self = this;
this.datePicker.stepMonth = {years: 1};
this.datePicker.setRefreshViewHandler(function () {
let months:Array<any> = new Array(12);
let year:number = this.activeDate.getFullYear();
let date:Date;
for (let i = 0; i < 12; i++) {
date = new Date(year, i, 1);
this.fixTimeZone(date);
months[i] = this.createDateObject(date, this.formatMonth);
months[i].uid = this.uniqueId + '-' + i;
}
self.title = this.dateFilter(this.activeDate, this.formatMonthTitle);
self.rows = this.split(months, 3);
}, 'month');
this.datePicker.setCompareHandler(function (date1:Date, date2:Date) {
let d1 = new Date(date1.getFullYear(), date1.getMonth());
let d2 = new Date(date2.getFullYear(), date2.getMonth());
return d1.getTime() - d2.getTime();
}, 'month');
this.datePicker.refreshView();
}
}
import {
Component, View, Host,
OnInit, EventEmitter,
ElementRef, ViewContainerRef,
Self, Renderer
} from 'angular2/core';
import {CORE_DIRECTIVES, FORM_DIRECTIVES,
DefaultValueAccessor, NgIf, NgClass, NgModel
} from 'angular2/common';
import {DatePickerInner} from './datepicker-container';
@Component({
selector: 'yearpicker, [yearpicker]',
template: `
<table [hidden]="datePicker.datepickerMode!=='year'" role="grid">
<thead>
<tr>
<th>
<button type="button" class="btn btn-default btn-sm pull-left"
(click)="datePicker.move(-1)" tabindex="-1">
<i class="glyphicon glyphicon-chevron-left"></i>
</button>
</th>
<th colspan="3">
<button [id]="uniqueId + '-title'" role="heading"
type="button" class="btn btn-default btn-sm"
(click)="datePicker.toggleMode()"
[disabled]="datePicker.datepickerMode === datePicker.maxMode"
[ngClass]="{disabled: datePicker.datepickerMode === datePicker.maxMode}" tabindex="-1" style="width:100%;">
<strong>{{title}}</strong>
</button>
</th>
<th>
<button type="button" class="btn btn-default btn-sm pull-right"
(click)="datePicker.move(1)" tabindex="-1">
<i class="glyphicon glyphicon-chevron-right"></i>
</button>
</th>
</tr>
</thead>
<tbody>
<tr *ngFor="#rowz of rows">
<td *ngFor="#dtz of rowz" class="text-center" role="gridcell">
<button type="button" style="min-width:100%;" class="btn btn-default"
[ngClass]="{'btn-info': dtz.selected, active: datePicker.isActive(dtz), disabled: dtz.disabled}"
[disabled]="dtz.disabled"
(click)="datePicker.select(dtz.date)" tabindex="-1">
<span [ngClass]="{'text-info': dtz.current}">{{dtz.label}}</span>
</button>
</td>
</tr>
</tbody>
</table>
`,
directives: [FORM_DIRECTIVES, CORE_DIRECTIVES, NgClass]
})
export class YearPicker implements OnInit {
private title:string;
private rows:Array<any> = [];
constructor(public datePicker:DatePickerInner) {
}
private getStartingYear(year:number) {
// todo: parseInt
return ((year - 1) / this.datePicker.yearRange) * this.datePicker.yearRange + 1;
}
ngOnInit() {
let self = this;
this.datePicker.stepYear = {years: this.datePicker.yearRange};
this.datePicker.setRefreshViewHandler(function () {
let years:Array<any> = new Array(this.yearRange);
let date:Date;
for (let i = 0, start = self.getStartingYear(this.activeDate.getFullYear()); i < this.yearRange; i++) {
date = new Date(start + i, 0, 1);
this.fixTimeZone(date);
years[i] = this.createDateObject(date, this.formatYear);
years[i].uid = this.uniqueId + '-' + i;
}
self.title = [years[0].label, years[this.yearRange - 1].label].join(' - ');
self.rows = this.split(years, 5);
}, 'year');
this.datePicker.setCompareHandler(function (date1:Date, date2:Date) {
return date1.getFullYear() - date2.getFullYear();
}, 'year');
this.datePicker.refreshView();
}
// todo: key events implementation
}
/**
* Created by Tareq Boulakjar. from angulartypescript.com
*/
import {Component} from 'angular2/core';
import {CORE_DIRECTIVES, FORM_DIRECTIVES} from 'angular2/common';
import {DatePicker} from './datepicker';
/*Angular 2 Datepicker Example*/
@Component({
selector: 'my-app',
template:`
<h3>Angular 2 Datepicker Example</h3>
<div>
<p>The current selected date is: <span *ngIf="currentDate">{{ getDate() | date:'fullDate'}}</span></p>
<button type="button" class="btn btn-sm btn-info" (click)="setToday()">Set The Current Date (Today)</button>
<button type="button" class="btn btn-sm btn-default btn-info" (click)="setADate();">Set this date : 2020-02-02</button>
<div style="width: 350px;">
<datepicker [(ngModel)]="currentDate" [minDate]="minDate" [showWeeks]="true"></datepicker>
</div>
<hr />
<button type="button" class="btn btn-sm btn-info" (click)="clearTheCurrentDate()">Clear The Current Selected Date !</button>
</div>
`,
styles:[`
.full button span {
background-color: limegreen;
border-radius: 32px;
color: black;
}
.partially button span {
background-color: orange;
border-radius: 32px;
color: black;
}
`],
directives: [DatePicker, CORE_DIRECTIVES, FORM_DIRECTIVES]
})
export class Angular2Datepicker {
public currentDate:Date = new Date();
private events:Array<any>;
private tomorrow:Date;
private afterTomorrow:Date;
private formats:Array<string> = ['DD-MM-YYYY', 'YYYY/MM/DD', 'DD.MM.YYYY', 'shortDate'];
private format = this.formats[0];
private dateOptions:any = {
formatYear: 'YY',
startingDay: 1
};
private opened:boolean = false;
constructor() {
(this.tomorrow = new Date()).setDate(this.tomorrow.getDate() + 1);
(this.afterTomorrow = new Date()).setDate(this.tomorrow.getDate() + 2);
this.events = [
{date: this.tomorrow, status: 'full'},
{date: this.afterTomorrow, status: 'partially'}
];
}
//set your date
private setADate() {
this.currentDate = moment('2020-02-02', 'YYYY-MM-DD').toDate();
}
// get the current selected date
public getDate():number {
return this.currentDate && this.currentDate.getTime() || new Date().getTime();
}
//set a new value to the current date
private setToday() {
this.currentDate = new Date();
}
private getDayClass(date:any, mode:string) {
if (mode === 'day') {
let dayToCheck = new Date(date).setHours(0, 0, 0, 0);
for (let i = 0; i < this.events.length; i++) {
let currentDay = new Date(this.events[i].date).setHours(0, 0, 0, 0);
if (dayToCheck === currentDay) {
return this.events[i].status;
}
}
}
return '';
}
private disabled(date:Date, mode:string):boolean {
return ( mode === 'day' && ( date.getDay() === 0 || date.getDay() === 6 ) );
}
private open() {
this.opened = !this.opened;
}
private clearTheCurrentDate() {
this.currentDate = null;
}
}