1 | import { Component } from '@angular/core';
|
2 | import { isBs3 } from '../utils/ng2-bootstrap-config';
|
3 | import { DatePickerInnerComponent } from './datepicker-inner.component';
|
4 |
|
5 | var TEMPLATE_OPTIONS = {
|
6 | 'bs4': {
|
7 | ARROW_LEFT: '<',
|
8 | ARROW_RIGHT: '>'
|
9 | },
|
10 | 'bs3': {
|
11 | ARROW_LEFT: "\n <i class=\"glyphicon glyphicon-chevron-left\"></i>\n ",
|
12 | ARROW_RIGHT: "\n <i class=\"glyphicon glyphicon-chevron-right\"></i>\n "
|
13 | }
|
14 | };
|
15 | export var DayPickerComponent = (function () {
|
16 | function DayPickerComponent(datePicker) {
|
17 | this.labels = [];
|
18 | this.rows = [];
|
19 | this.weekNumbers = [];
|
20 | this.CURRENT_THEME_TEMPLATE = isBs3()
|
21 | ? TEMPLATE_OPTIONS.bs3
|
22 | : TEMPLATE_OPTIONS.bs4;
|
23 | this.datePicker = datePicker;
|
24 | }
|
25 | Object.defineProperty(DayPickerComponent.prototype, "isBs4", {
|
26 | get: function () {
|
27 | return !isBs3();
|
28 | },
|
29 | enumerable: true,
|
30 | configurable: true
|
31 | });
|
32 | |
33 |
|
34 |
|
35 |
|
36 | DayPickerComponent.prototype.ngOnInit = function () {
|
37 | var self = this;
|
38 | this.datePicker.stepDay = { months: 1 };
|
39 | this.datePicker.setRefreshViewHandler(function () {
|
40 | var year = this.activeDate.getFullYear();
|
41 | var month = this.activeDate.getMonth();
|
42 | var firstDayOfMonth = new Date(year, month, 1);
|
43 | var difference = this.startingDay - firstDayOfMonth.getDay();
|
44 | var numDisplayedFromPreviousMonth = (difference > 0)
|
45 | ? 7 - difference
|
46 | : -difference;
|
47 | var firstDate = new Date(firstDayOfMonth.getTime());
|
48 | if (numDisplayedFromPreviousMonth > 0) {
|
49 | firstDate.setDate(-numDisplayedFromPreviousMonth + 1);
|
50 | }
|
51 |
|
52 | var _days = self.getDates(firstDate, 42);
|
53 | var days = [];
|
54 | for (var i = 0; i < 42; i++) {
|
55 | var _dateObject = this.createDateObject(_days[i], this.formatDay);
|
56 | _dateObject.secondary = _days[i].getMonth() !== month;
|
57 | _dateObject.uid = this.uniqueId + '-' + i;
|
58 | days[i] = _dateObject;
|
59 | }
|
60 | self.labels = [];
|
61 | for (var j = 0; j < 7; j++) {
|
62 | self.labels[j] = {};
|
63 | self.labels[j].abbr = this.dateFilter(days[j].date, this.formatDayHeader);
|
64 | self.labels[j].full = this.dateFilter(days[j].date, 'EEEE');
|
65 | }
|
66 | self.title = this.dateFilter(this.activeDate, this.formatDayTitle);
|
67 | self.rows = this.split(days, 7);
|
68 | if (this.showWeeks) {
|
69 | self.weekNumbers = [];
|
70 | var thursdayIndex = (4 + 7 - this.startingDay) % 7;
|
71 | var numWeeks = self.rows.length;
|
72 | for (var curWeek = 0; curWeek < numWeeks; curWeek++) {
|
73 | self.weekNumbers.push(self.getISO8601WeekNumber(self.rows[curWeek][thursdayIndex].date));
|
74 | }
|
75 | }
|
76 | }, 'day');
|
77 | this.datePicker.setCompareHandler(function (date1, date2) {
|
78 | var d1 = new Date(date1.getFullYear(), date1.getMonth(), date1.getDate());
|
79 | var d2 = new Date(date2.getFullYear(), date2.getMonth(), date2.getDate());
|
80 | return d1.getTime() - d2.getTime();
|
81 | }, 'day');
|
82 | this.datePicker.refreshView();
|
83 | };
|
84 | DayPickerComponent.prototype.getDates = function (startDate, n) {
|
85 | var dates = new Array(n);
|
86 | var current = new Date(startDate.getTime());
|
87 | var i = 0;
|
88 | var date;
|
89 | while (i < n) {
|
90 | date = new Date(current.getTime());
|
91 | date = this.datePicker.fixTimeZone(date);
|
92 | dates[i++] = date;
|
93 | current = new Date(current.getFullYear(), current.getMonth(), current.getDate() + 1);
|
94 | }
|
95 | return dates;
|
96 | };
|
97 | DayPickerComponent.prototype.getISO8601WeekNumber = function (date) {
|
98 | var checkDate = new Date(date.getTime());
|
99 |
|
100 | checkDate.setDate(checkDate.getDate() + 4 - (checkDate.getDay() || 7));
|
101 | var time = checkDate.getTime();
|
102 |
|
103 | checkDate.setMonth(0);
|
104 | checkDate.setDate(1);
|
105 | return Math.floor(Math.round((time - checkDate.getTime()) / 86400000) / 7) + 1;
|
106 | };
|
107 |
|
108 | DayPickerComponent.decorators = [
|
109 | { type: Component, args: [{
|
110 | selector: 'daypicker',
|
111 | template: "\n<table *ngIf=\"datePicker.datepickerMode==='day'\" role=\"grid\" [attr.aria-labelledby]=\"datePicker.uniqueId+'-title'\" aria-activedescendant=\"activeDateId\">\n <thead>\n <tr>\n <th>\n <button type=\"button\" \n class=\"btn btn-default btn-secondary btn-sm pull-left\" \n (click)=\"datePicker.move(-1)\" \n tabindex=\"-1\"\n [innerHTML]=\"CURRENT_THEME_TEMPLATE.ARROW_LEFT\">\n </button>\n </th>\n <th [attr.colspan]=\"5 + (datePicker.showWeeks ? 1 : 0)\">\n <button [id]=\"datePicker.uniqueId + '-title'\"\n type=\"button\" class=\"btn btn-default btn-secondary btn-sm\"\n (click)=\"datePicker.toggleMode()\"\n [disabled]=\"datePicker.datepickerMode === datePicker.maxMode\"\n [ngClass]=\"{disabled: datePicker.datepickerMode === datePicker.maxMode}\" tabindex=\"-1\" style=\"width:100%;\">\n <strong>{{title}}</strong>\n </button>\n </th>\n <th>\n <button type=\"button\" \n class=\"btn btn-default btn-secondary btn-sm pull-right\" \n (click)=\"datePicker.move(1)\" \n tabindex=\"-1\"\n [innerHTML]=\"CURRENT_THEME_TEMPLATE.ARROW_RIGHT\">\n </button>\n </th>\n </tr>\n <tr>\n <th *ngIf=\"datePicker.showWeeks\"></th>\n <th *ngFor=\"let labelz of labels\" class=\"text-center\">\n <small aria-label=\"labelz.full\"><b>{{labelz.abbr}}</b></small>\n </th>\n </tr>\n </thead>\n <tbody>\n <template ngFor [ngForOf]=\"rows\" let-rowz=\"$implicit\" let-index=\"index\">\n <tr *ngIf=\"!(datePicker.onlyCurrentMonth && rowz[0].secondary && rowz[6].secondary)\">\n <td *ngIf=\"datePicker.showWeeks\" class=\"h6\" class=\"text-center\">\n <em>{{ weekNumbers[index] }}</em>\n </td>\n <td *ngFor=\"let dtz of rowz\" class=\"text-center\" role=\"gridcell\" [id]=\"dtz.uid\">\n <button type=\"button\" style=\"min-width:100%;\" class=\"btn btn-sm {{dtz.customClass}}\"\n *ngIf=\"!(datePicker.onlyCurrentMonth && dtz.secondary)\"\n [ngClass]=\"{'btn-secondary': isBs4 && !dtz.selected && !datePicker.isActive(dtz), 'btn-info': dtz.selected, disabled: dtz.disabled, active: !isBs4 && datePicker.isActive(dtz), 'btn-default': !isBs4}\"\n [disabled]=\"dtz.disabled\"\n (click)=\"datePicker.select(dtz.date)\" tabindex=\"-1\">\n <span [ngClass]=\"{'text-muted': dtz.secondary || dtz.current, 'text-info': !isBs4 && dtz.current}\">{{dtz.label}}</span>\n </button>\n </td>\n </tr>\n </template>\n </tbody>\n</table>\n "
|
112 | },] },
|
113 | ];
|
114 |
|
115 | DayPickerComponent.ctorParameters = function () { return [
|
116 | { type: DatePickerInnerComponent, },
|
117 | ]; };
|
118 | return DayPickerComponent;
|
119 | }());
|
120 |
|
\ | No newline at end of file |