Skip to content

Commit 97cb34a

Browse files
author
Sandro Tajè
committed
version 2.0.0
1 parent 7bbd4e2 commit 97cb34a

File tree

4 files changed

+82
-69
lines changed

4 files changed

+82
-69
lines changed

‎angular-datepicker.css

+11-1
Original file line numberDiff line numberDiff line change
@@ -17,7 +17,7 @@
1717
/*opacity: 0;*/
1818
/*}*/
1919

20-
.datepicker .table table{
20+
.datepicker .table > table{
2121
position: fixed;
2222
background-color: #f8faf9;
2323
line-height: 45px;
@@ -108,6 +108,16 @@
108108
border-radius: 12px;
109109
}
110110

111+
.datepicker .table tr td.focus:focus, .datepicker .table tr td.focus:active {
112+
background-color: #c8c8c8;
113+
color: white !important;
114+
border-radius: 12px;
115+
}
116+
117+
.datepicker table.month-in-year-selection {
118+
text-align: center;
119+
}
120+
111121
.datepicker-button-clear {
112122
float: right;
113123
font-size: 13px;

‎angular-datepicker.js

+68-64
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
angular.module("angular-datepicker", []).directive("datepicker", ['$timeout', 'padFilter', '$filter', function ($timeout, padFilter, $filter) {
1+
angular.module("angular-datepicker", []).directive("datepicker", ['$timeout', 'padFilter', '$filter', '$compile', function ($timeout, padFilter, $filter, $compile) {
22
return {
33
restrict: "A",
44
scope: {
@@ -12,52 +12,51 @@ angular.module("angular-datepicker", []).directive("datepicker", ['$timeout', 'p
1212
require: 'ngModel',
1313
link: function ($scope, elem, attrs, ngModel) {
1414

15-
function init(value) {
15+
var first = true;
1616

17+
ngModel.$render = function () {
18+
var html = elem.contents();
19+
elem.empty();
20+
if (!ngModel.$modelValue) {
21+
elem.html($scope.dateFormat);
22+
} else {
23+
elem.html($filter("date")(ngModel.$modelValue, $scope.dateFormat));
24+
}
25+
elem.on("click", function () {
26+
$scope.$applyAsync(function () {
27+
$scope.opened = true;
28+
$scope.daySelectionOpened = true;
29+
});
30+
});
31+
if (first) {
32+
first = false;
33+
elem.after($compile(html)($scope));
34+
}
35+
};
36+
37+
ngModel.$parsers.push(function (value) {
38+
return Date.parse(value);
39+
});
40+
41+
ngModel.$formatters.push(function (value) {
1742
if (/^-?\d+$/.test(value)) {
18-
$scope.modelDate = new Date(value);
19-
$scope.generateMonth($scope.modelDate);
43+
$scope.generateMonth(new Date(value));
44+
return $filter("date")(value, $scope.dateFormat);
2045
} else if (angular.isDate(value)) {
21-
$scope.modelDate = value;
2246
$scope.generateMonth(value);
47+
return $filter("date")(value, $scope.dateFormat);
2348
} else if (value) {
2449
throw "Model format is wrong, only timestamp or javascript date object are supported";
2550
} else {
26-
$scope.modelDate = value;
51+
//has to be a date for now
2752
$scope.generateMonth($scope.standardDate);
53+
return $filter("date")($scope.standardDate, $scope.dateFormat);
2854
}
29-
}
30-
31-
ngModel.$render = function () {
32-
init(ngModel.$modelValue);
33-
}
34-
35-
ngModel.$parsers.push(function (value) {
36-
return value ? value.getTime() : null;
37-
});
38-
39-
ngModel.$formatters.push(function (value) {
40-
return $filter('date')(value, $scope.dateFormat);
4155
});
4256

4357
$scope.opened = false;
4458
$scope.daySelectionOpened = false;
4559

46-
// if ($scope.fromDate) {
47-
// $scope.fromDate.setUTCHours(0);
48-
// $scope.fromDate.setUTCMinutes(0);
49-
// $scope.fromDate.setUTCSeconds(0);
50-
// $scope.fromDate.setUTCMilliseconds(0);
51-
// }
52-
53-
54-
// if ($scope.toDate) {
55-
// $scope.toDate.setUTCHours(0);
56-
// $scope.toDate.setUTCMinutes(0);
57-
// $scope.toDate.setUTCSeconds(0);
58-
// $scope.toDate.setUTCMilliseconds(0);
59-
// }
60-
6160
var defaultMonths = ["January", "February", "March", "April", "May", "June", "July", "August", "Settember", "October", "November", "December"];
6261
var defaultDays = ["Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday", "Sunday"];
6362
var defaultCleanName = "Clean";
@@ -103,11 +102,19 @@ angular.module("angular-datepicker", []).directive("datepicker", ['$timeout', 'p
103102
};
104103
$scope.generatedTimes.push(tmpObj);
105104

106-
if ($scope.modelDate && $scope.modelDate.getHours() == tmpObj.hour && $scope.modelDate.getMinutes() == tmpObj.minute && $scope.modelDate.getSeconds() == tmpObj.second) {
105+
var selectedDate = new Date(ngModel.$modelValue);
106+
107+
if (selectedDate && selectedDate.getHours() == tmpObj.hour && selectedDate.getMinutes() == tmpObj.minute && selectedDate.getSeconds() == tmpObj.second) {
107108
$scope.selectedTime = tmpObj;
108109
}
109110
}
110111

112+
$scope.closeWrapper = function () {
113+
$scope.opened = false;
114+
$scope.daySelectionOpened = true;
115+
$scope.yearSelectionOpened = false;
116+
}
117+
111118

112119
$scope.generateMonth = function (selectedDate) {
113120
// selectedDate.setUTCHours(0);
@@ -157,7 +164,7 @@ angular.module("angular-datepicker", []).directive("datepicker", ['$timeout', 'p
157164

158165
var jsonDay = {
159166
number: tmpDay.getUTCDate(),
160-
isSelectedDate: $scope.modelDate && tmpDay.getTime() === $scope.modelDate.getTime(),
167+
isSelectedDate: selectedDate && tmpDay.getTime() === selectedDate.getTime(),
161168
isToday: tmpDay.getTime() === today.getTime(),
162169
date: tmpDay,
163170
differentMonth: tmpDay.getUTCMonth() !== selectedDate.getUTCMonth(),
@@ -174,19 +181,19 @@ angular.module("angular-datepicker", []).directive("datepicker", ['$timeout', 'p
174181

175182
$scope.years = [];
176183

177-
var count = 0;
178-
for (var num = $scope.month.selectedDate.getUTCFullYear() - 17; num <= $scope.month.selectedDate.getUTCFullYear() + 17; num++) {
179-
if (!$scope.years[count]) {
180-
$scope.years[count] = [];
184+
for (var num = $scope.month.selectedDate.getUTCFullYear() - 2; num <= $scope.month.selectedDate.getUTCFullYear() + 1; num++) {
185+
var months = [];
186+
for (var i = 0; i < 12; i++) {
187+
months.push({
188+
num: i,
189+
isActualMonth: today.getUTCMonth() === i && today.getUTCFullYear() === num,
190+
isSelectedMonth: selectedDate && selectedDate.getUTCMonth() === i && selectedDate.getUTCFullYear() === num
191+
});
181192
}
182-
$scope.years[count].push({
193+
$scope.years.push({
183194
num: num,
184-
isActualYear: today.getUTCFullYear() === num,
185-
isSelectedYear: $scope.modelDate && $scope.modelDate.getUTCFullYear() === num
195+
months: months
186196
});
187-
if ($scope.years[count].length === 5) {
188-
count++;
189-
}
190197
}
191198

192199
};
@@ -198,9 +205,9 @@ angular.module("angular-datepicker", []).directive("datepicker", ['$timeout', 'p
198205

199206

200207
$scope.selectDay = function (date) {
201-
$scope.modelDate = date;
202-
!$scope.timepicker && $scope.close();
208+
// $scope.modelDate = date;
203209
$scope.generateMonth(angular.copy(date));
210+
!$scope.timepicker && $scope.close(date);
204211
};
205212

206213
$scope.addMonth = function (selectedDate) {
@@ -230,10 +237,11 @@ angular.module("angular-datepicker", []).directive("datepicker", ['$timeout', 'p
230237
}
231238
};
232239

233-
$scope.selectYear = function (year) {
240+
$scope.selectYear = function (year, month) {
234241
$scope.toggleYearSelection();
235242
var newDate = angular.copy($scope.month.selectedDate);
236243
newDate.setUTCFullYear(year);
244+
newDate.setUTCMonth(month);
237245
$scope.generateMonth(newDate);
238246
};
239247

@@ -245,45 +253,41 @@ angular.module("angular-datepicker", []).directive("datepicker", ['$timeout', 'p
245253

246254
$scope.precYears = function () {
247255
var newDate = angular.copy($scope.month.selectedDate);
248-
newDate.setUTCFullYear(newDate.getUTCFullYear() - 21);
256+
newDate.setUTCFullYear(newDate.getUTCFullYear() - 3);
249257
$scope.generateMonth(newDate);
250258
};
251259

252260
$scope.succYears = function () {
253261
var newDate = angular.copy($scope.month.selectedDate);
254-
newDate.setUTCFullYear(newDate.getUTCFullYear() + 21);
262+
newDate.setUTCFullYear(newDate.getUTCFullYear() + 3);
255263
$scope.generateMonth(newDate);
256264
};
257265

258266
$scope.clear = function () {
259267

260268
ngModel.$setViewValue(null);
261-
// ngModel.$modelValue = null;
262-
// $scope.selectedTime = null;
263-
$scope.modelDate = null;
269+
ngModel.$render();
270+
// $scope.modelDate = null;
264271
$scope.opened = false;
265272
$scope.generateMonth($scope.standardDate);
266273
};
267274

268275
$scope.changeTime = function (time) {
269-
$scope.modelDate.setHours(time.hour);
270-
$scope.modelDate.setMinutes(time.minute);
271-
$scope.modelDate.setSeconds(time.second);
276+
ngModel.$modelValue.setHours(time.hour);
277+
ngModel.$modelValue.setMinutes(time.minute);
278+
ngModel.$modelValue.setSeconds(time.second);
272279
}
273280

274-
$scope.close = function () {
281+
$scope.close = function (date) {
275282
$scope.opened = false;
276-
ngModel.$setViewValue($scope.modelDate);
283+
ngModel.$setViewValue($filter("date")(date, $scope.dateFormat));
284+
ngModel.$render();
277285
$timeout(function () {
278286
$scope.events.onDaySelected && $scope.events.onDaySelected();
279287
});
280-
}
281-
// init(ngModel.$modelValue);
282-
283-
284-
//functions
288+
};
285289
},
286-
template: '<div class="datepicker"> <div data-ng-click="opened=!disabled;daySelectionOpened=!disabled" class="selectable"><i class="fa fa-calendar"></i> {{modelDate | date: dateFormat | datepickerEmptyFilter: dateFormat}}</div> <div class="datepicker-wrapper" data-ng-show="opened" data-ng-click="opened=!opened;daySelectionOpened=true;yearSelectionOpened=false;"></div> <div class="datepicker-close" data-ng-show="opened" data-ng-click="opened=!opened;daySelectionOpened=true;yearSelectionOpened=false;"> <button type="button"></button> </div> <div class="datepicker-table-wrapper table" data-ng-show="daySelectionOpened && opened"> <table> <thead> <tr class="month-header"> <th><a data-ng-click="subMonth(month.selectedDate)">❮ {{getPreviousMonthName()}}</a></th> <th colspan="5"> {{monthNames[month.selectedDate.getMonth()]}} <a data-ng-click="toggleYearSelection()" class="button-month" type="button"> {{month.selectedDate.getFullYear()}}</a></th> <th><a data-ng-click="addMonth(month.selectedDate)">{{getSuccessiveMonthName()}} ❯</a></th> </tr> <tr> <th data-ng-repeat="d in dayNames">{{d | substring}}</th> </tr> </thead> <tbody> <tr data-ng-repeat="week in month.weeks"> <td data-ng-click="!day.isDisabled && selectDay(day.date)" data-ng-repeat="day in week" data-ng-class="{\'disabled\': day.isDisabled,\'selected-date\': day.isSelectedDate, \'today\': day.isToday, \'different-month\': !day.isDisabled && day.differentMonth}"><a>{{day.number}}</a></td> </tr> <tr> <td colspan="3"><select class="timeselect" data-ng-if="timepicker" data-ng-disabled="!modelDate" data-ng-model="selectedTime" ng-options="t.label for t in generatedTimes" data-ng-change="changeTime(selectedTime)"></select></td> <td colspan="4"> <button style="margin-left: 5px" class="datepicker-button-clear" data-ng-if="timepicker" data-ng-click="close()">Select</button> <button type="button" class="datepicker-button-clear" data-ng-click="clear()">{{cleanName}}</button> </td> </tr> </tbody> </table> </div> <div class="datepicker-table-wrapper table" data-ng-show="yearSelectionOpened && opened"> <table> <thead> <tr class="month-header"> <th><a data-ng-click="precYears()">prev</a></th> <th colspan="3">{{years[0][0].num}}-{{years[years.length - 1][years[years.length - 1].length - 1].num}}</th> <th><a data-ng-click="succYears()">next</a></th> </tr> </thead> <tbody> <tr data-ng-repeat="list in years"> <td data-ng-repeat="year in list" data-ng-click="selectYear(year.num)" data-ng-class="{\'selected-date\': year.isSelectedYear, \'today\': year.isActualYear}"> <a>{{year.num}}</a> </td> </tr> <tr></tr> </tbody> </table> </div></div>'
290+
template: '<div class="datepicker"> <div class="datepicker-wrapper" data-ng-show="opened" data-ng-click="closeWrapper()"></div> <div class="datepicker-close" data-ng-show="opened" data-ng-click="closeWrapper()"> <button type="button"></button> </div> <div class="datepicker-table-wrapper table" data-ng-show="daySelectionOpened && opened"> <table> <thead> <tr class="month-header"> <th style="width: 15%"><a data-ng-click="subMonth(month.selectedDate)">{{getPreviousMonthName()}}</a></th> <th style="width: 70%" colspan="5"> {{monthNames[month.selectedDate.getMonth()]}} <a data-ng-click="toggleYearSelection($event)" class="button-month" type="button"> {{month.selectedDate.getFullYear()}}</a></th> <th style="width: 15%"><a data-ng-click="addMonth(month.selectedDate)">{{getSuccessiveMonthName()}}</a></th> </tr> <tr> <th data-ng-repeat="d in dayNames">{{d | substring}}</th> </tr> </thead> <tbody> <tr data-ng-repeat="week in month.weeks"> <td class="focus" data-ng-click="!day.isDisabled && selectDay(day.date)" data-ng-repeat="day in week" data-ng-class="{\'disabled\': day.isDisabled,\'selected-date\': day.isSelectedDate, \'today\': day.isToday, \'different-month\': !day.isDisabled && day.differentMonth}"><a>{{day.number}}</a></td> </tr> <tr> <td colspan="3"><select class="timeselect" data-ng-if="timepicker" data-ng-disabled="!modelDate" data-ng-model="selectedTime" ng-options="t.label for t in generatedTimes" data-ng-change="changeTime(selectedTime)"></select></td> <td colspan="4"> <button style="margin-left: 5px" class="datepicker-button-clear" data-ng-if="timepicker" data-ng-click="close()">Select</button> <button type="button" class="datepicker-button-clear" data-ng-click="clear()">{{cleanName}}</button> </td> </tr> </tbody> </table> </div> <div class="datepicker-table-wrapper table" data-ng-show="yearSelectionOpened && opened"> <table> <thead> <tr class="month-header"> <th style="width: 25%"><a data-ng-click="precYears()">prev</a></th> <th style="width: 50%" colspan="3">{{years[0].num}}-{{years[years.length - 1].num}}</th> <th style="width: 25%"><a data-ng-click="succYears()">next</a></th> </tr> </thead> <tbody> <tr data-ng-repeat="y in years"> <td>{{y.num}}</td> <td colspan="4"> <table class="month-in-year-selection"> <tr> <td class="focus" data-ng-repeat="m in y.months | limitTo: 6" data-ng-click="selectYear(y.num, m.num)" data-ng-class="{\'selected-date\': m.isSelectedMonth, \'today\': m.isActualMonth}">{{monthNames[m.num] | substring}}</td> </tr> <tr> <td class="focus" data-ng-repeat="m in y.months | limitTo: 12 : 6" data-ng-click="selectYear(y.num, m.num)" data-ng-class="{\'selected-date\': m.isSelectedMonth, \'today\': m.isActualMonth}">{{monthNames[m.num] | substring}}</td> </tr> </table> </td> </tr> <tr></tr> </tbody> </table> </div></div>'
287291
};
288292
}]).filter("datepickerEmptyFilter", function () {
289293
return function (input, placeholder) {

‎example/index.html

+2-3
Original file line numberDiff line numberDiff line change
@@ -5,8 +5,7 @@
55

66
<body ng-controller="ExampleController">
77

8-
<button data-datepicker ng-model="day" data-options="options" data-events="events" ng-change="onChange(d)"></button>
9-
8+
<button type="text" data-datepicker ng-model="day" data-options="options" data-events="events" ng-change="onChange(d)"></button>
109
{{day}}
1110

1211
<button ng-click="clear()">Clear</button>
@@ -39,7 +38,7 @@
3938
}
4039

4140
function onDaySelected() {
42-
console.log($scope.day);
41+
// console.log($scope.day);
4342
}
4443
});
4544

‎package.json

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "angular-datepicker",
3-
"version": "1.0.4",
3+
"version": "2.0.0",
44
"description": "angular responsive datepicker",
55
"main": "angular-datepicker.js",
66
"directories": {

0 commit comments

Comments
 (0)