kylefang/angular-datepicker
1
0
Fork 0
mirror of https://github.com/HackPlan/angular-datepicker.git synced 2026-01-13 16:52:17 +08:00
Code Issues Packages Projects Releases Wiki Activity

stage 2

Browse Source
This commit is contained in:
g00fy
2013-10-07 22:53:31 +02:00
parent cd5f6296cd
commit 29cafba56e
3 changed files with 355 additions and 501 deletions
Download Patch File Download Diff File Expand all files Collapse all files

111
app/index.html
View File

@@ -12,7 +12,7 @@
<!-- endbuild -->
</head>
<body ng-app="sample">
<h1> {{ start }} </h1>
<div class="row-fluid">
<div class="span6">
<h2>Calendar</h2>
@@ -20,64 +20,67 @@
<h3>views</h3>
<h5>default</h5>
<pre>&lt;div date-picker="start"&gt;&lt;/div&gt; </pre>
<div date-picker="start"></div>
<h5>year</h5>
<pre>&lt;div date-picker="start" <strong>year</strong>&gt;&lt;/div&gt; </pre>
{{ start }}
<div date-picker="start" ></div>
<!--<h5>year</h5>-->
<!--<pre>&lt;div date-picker="start" <strong>year</strong>&gt;&lt;/div&gt; </pre>-->
<div date-picker="start" year></div>
<h5>month</h5>
<pre>&lt;div date-picker="start <strong>month</strong>&gt;&lt;/div&gt; </pre>
<div date-picker="start" month></div>
<h5>date</h5>
<pre>&lt;div date-picker="start" <strong>date</strong>&gt;&lt;/div&gt; </pre>
<div date-picker="start" date></div>
<h5>hours</h5>
<pre>&lt;div date-picker="start" <strong>hours</strong>&gt;&lt;/div&gt; </pre>
<div date-picker="start" hours></div>
<h5>minutes</h5>
<pre>&lt;div date-picker="start" <strong>minutes</strong>&gt;&lt;/div&gt; </pre>
<div date-picker="start" minutes></div>
<!--<h5>month</h5>-->
<!--<pre>&lt;div date-picker="start <strong>month</strong>&gt;&lt;/div&gt; </pre>-->
<!--<div date-picker ng-model="start" month></div>-->
<!--<h5>date</h5>-->
<!--<pre>&lt;div date-picker="start" <strong>date</strong>&gt;&lt;/div&gt; </pre>-->
<!--<div date-picker ng-model="start" date></div>-->
<!--<h5>hours</h5>-->
<!--<pre>&lt;div date-picker="start" <strong>hours</strong>&gt;&lt;/div&gt; </pre>-->
<!--<div date-picker ng-model="start" hours></div>-->
<!--<h5>minutes</h5>-->
<!--<pre>&lt;div date-picker="start" <strong>minutes</strong>&gt;&lt;/div&gt; </pre>-->
<!--<div date-picker ng-model="start" minutes></div>-->
</div>
<div class="span6">
<h3>Input</h3>
<h5>default</h5>
<pre>&lt;input type="datetime" <strong>ng-model="model" date-time</strong>&gt;&lt;/div&gt; </pre>
<input type="datetime" date-time ng-model="start">
<h5>Input format</h5>
<pre>&lt;input type="datetime" ng-model="model" date-time <strong>format="long"</strong>&gt;&lt;/div&gt; </pre>
<input type="datetime" date-time ng-model="end" hours format="short">
<h5>A button</h5>
<pre ng-non-bindable>&lt;div class=&quot;dropdown&quot;&gt;
&lt;a class=&quot;dropdown-toggle btn btn-danger&quot;&gt;
pick a date: {{(date|date)}}
&lt;/a&gt;
&lt;div class=&quot;dropdown-menu&quot; ng-click=&quot;$event.preventDefault();$event.stopPropagation()&quot;&gt;
&lt;div date-picker=&quot;date&quot; class=&quot;datetimepicker&quot;&gt;&lt;/div&gt;
&lt;/div&gt;
&lt;/div&gt;</pre>
<div class="dropdown">
<a class="dropdown-toggle btn btn-danger">
pick a date: {{(date|date)}}
</a>
<!--<div class="span6">-->
<!--<h3>Input</h3>-->
<!--<h5>default</h5>-->
<!--<pre>&lt;input type="datetime" <strong>ng-model="model" date-time</strong>&gt;&lt;/div&gt; </pre>-->
<!--&lt;!&ndash;<input type="datetime" date-time ng-model="start">&ndash;&gt;-->
<!--<h5>Input format</h5>-->
<!--<pre>&lt;input type="datetime" ng-model="model" date-time <strong>format="long"</strong>&gt;&lt;/div&gt; </pre>-->
<!--&lt;!&ndash;<input type="datetime" date-time ng-model="end" hours format="short">&ndash;&gt;-->
<!--<h5>A button</h5>-->
<!--<pre ng-non-bindable>&lt;div class=&quot;dropdown&quot;&gt;-->
<!--&lt;a class=&quot;dropdown-toggle btn btn-danger&quot;&gt;-->
<!--pick a date: {{(date|date)}}-->
<!--&lt;/a&gt;-->
<!--&lt;div class=&quot;dropdown-menu&quot; ng-click=&quot;$event.preventDefault();$event.stopPropagation()&quot;&gt;-->
<!--&lt;div date-picker=&quot;date&quot; class=&quot;datetimepicker&quot;&gt;&lt;/div&gt;-->
<!--&lt;/div&gt;-->
<!--&lt;/div&gt;</pre>-->
<!--<div class="dropdown">-->
<!--<a class="dropdown-toggle btn btn-danger">-->
<!--pick a date: {{(date|date)}}-->
<!--</a>-->
<div class="dropdown-menu" ng-click="$event.preventDefault();$event.stopPropagation()">
<div date-picker="date"></div>
</div>
</div>
<h5>Date range</h5>
<pre>&lt;div date-range start="start" end="end" &gt;&lt;/div&gt; </pre>
<div date-range start="a" end="b" style="position: relative; z-index:0"></div>
<h5>Date range button</h5>
<!--<div class="dropdown-menu" ng-click="$event.preventDefault();$event.stopPropagation()">-->
<!--<div date-picker="date"></div>-->
<!--</div>-->
<!--</div>-->
<!--<h5>Date range</h5>-->
<!--<pre>&lt;div date-range start="start" end="end" &gt;&lt;/div&gt; </pre>-->
<!--<div date-range start="a" end="b" style="position: relative; z-index:0"></div>-->
<!--<h5>Date range button</h5>-->
<div class="dropdown">
<a class="dropdown-toggle btn btn-danger">
{{(a|date)||"pick start"}} - {{(b|date)||"pick end"}}
</a>
<!--<div class="dropdown">-->
<!--<a class="dropdown-toggle btn btn-danger">-->
<!--{{(a|date)||"pick start"}} - {{(b|date)||"pick end"}}-->
<!--</a>-->
<div class="dropdown-menu" ng-click="$event.preventDefault();$event.stopPropagation()">
<div date-range start="a" end="b"></div>
</div>
</div>
</div>
<!--<div class="dropdown-menu" ng-click="$event.preventDefault();$event.stopPropagation()">-->
<!--<div date-range start="a" end="b"></div>-->
<!--</div>-->
<!--</div>-->
<!--</div>-->
</div>
<script src="components/jquery/jquery.js"></script>

504
app/scripts/module.js
View File

@@ -4,11 +4,8 @@
Module.directive('datePicker', function () {
var viewOptions = ['month', 'date', 'year', 'month', 'hours', 'minutes'];
function isValidDate(date) {
return date instanceof Date && !isNaN(date.getTime());
}
var views = ['year', 'month', 'date', 'hours', 'minutes'];
var noop = angular.noop;
function getVisibleMinutes(date) {
date = new Date(date || new Date());
@@ -100,349 +97,198 @@
}
return {
templateUrl: 'templates/datepicker.html',
replace:true,
scope : {
date : '=datePicker',
model: '=datePicker',
view : '=?',
after : '=?',
before: '=?'
},
link : function (scope, element, attrs) {
scope.views = [];
// if model value was updated or already existing;
var updated = !!scope.model;
for (var attr in attrs) { //noinspection JSUnfilteredForInLoop
if (viewOptions.indexOf(attr) !== -1) { //noinspection JSUnfilteredForInLoop
scope.views.push(attr);
scope.date = new Date();
if(!scope.view){
// set default view
scope.view = views[0];
}
scope.setView= function(nextView){
scope.view = nextView;
};
scope.setDate = function(date){
scope.date = date;
// change next view
var nextView = views[views.indexOf(scope.view)+1];
if(nextView){
scope.view = nextView;
updated = true;
}
}
if (!scope.views.length) {
scope.views = ['date', 'month', 'year', 'hours', 'minutes'];
}
scope.view = scope.views[0];
function hasView(view) {
return scope.views.indexOf(view) !== -1;
}
function ensureDate() {
// we need to return new instance as ngModel $watch watches only for identity - not for equality
if (!(isValidDate(scope.date))) {
scope.date = new Date(2000, 1, 1);
if(!nextView || updated){
scope.model = date;
}
scope.date = new Date(scope.date);
}
function setYear(date) {
ensureDate();
scope.date.setFullYear(date.getFullYear());
}
function setMonth(date) {
setYear(date);
scope.date.setMonth(date.getMonth());
}
function setDate(date) {
setMonth(date);
scope.date.setDate(date.getDate());
}
function setHours(date) {
setDate(date);
scope.date.setHours(date.getHours());
}
function setMinutes(date) {
setHours(date);
scope.date.setMinutes(date.getMinutes());
}
scope.setYear = function (date) {
setYear(date);
scope.$emit('setYear', date);
};
scope.setMonth = function (date) {
setMonth(date);
scope.$emit('setMonth', date);
};
scope.setDate = function (date) {
setDate(date);
scope.$emit('setDate', date);
};
scope.setHours = function (date) {
setHours(date);
scope.$emit('setHours', date);
};
scope.setMinutes = function (date) {
setMinutes(date);
scope.$emit('setMinutes', date);
};
scope.setView = function setView(view) {
if (hasView(view)) {
scope.view = view;
switch (view) {
function update(){
var view = scope.view;
var date = scope.date;
switch (view) {
case 'year':
scope.years = getVisibleYears(date);
break;
case 'month':
scope.months = getVisibleMonths(date);
break;
case 'date':
scope.weekdays = scope.weekdays || getDaysOfWeek();
scope.weeks = getVisibleWeeks(date);
break;
case 'hours':
scope.hours = getVisibleHours(date);
break;
case 'minutes':
scope.minutes = getVisibleMinutes(scope.visibleDate);
scope.minutes = getVisibleMinutes(date);
break;
case 'hours' :
scope.hours = getVisibleHours(scope.visibleDate);
break;
case 'date' :
scope.weeks = getVisibleWeeks(scope.visibleDate);
break;
case 'month' :
scope.months = getVisibleMonths(scope.visibleDate);
break;
case 'year' :
scope.years = getVisibleYears(scope.visibleDate);
break;
}
}
};
scope.nextMonth = function (delta) {
scope.visibleDate.setMonth(scope.visibleDate.getMonth() + (delta || 1));
};
scope.prevMonth = function (delta) {
scope.nextMonth(-delta || -1);
};
scope.nextDay = function (delta) {
scope.visibleDate.setDate(scope.visibleDate.getDate() + (delta || 1));
};
scope.prevDay = function (delta) {
scope.nextDay(-delta || -1);
};
scope.nextHour = function (delta) {
scope.visibleDate.setHours(scope.visibleDate.getHours() + (delta || 1));
};
scope.prevHour = function (delta) {
scope.nextHour(-delta || -1);
};
scope.nextYear = function (delta) {
scope.visibleDate.setFullYear(scope.visibleDate.getFullYear() + (delta || 1));
};
scope.prevYear = function (delta) {
scope.nextYear(-delta || -1);
};
scope.visibleDate = new Date();
scope.$watch('date', function (date) {
if (date) {
scope.visibleDate = new Date(date);
}
});
scope.isAfter = function (date) {
return date >= scope.after;
};
scope.isBefore = function (date) {
return date <= scope.before;
};
function validDate() {
return scope.date instanceof Date;
}
scope.isSameMinutes = function (date) {
if (!validDate()){
return false;
}
var b = scope.date;
return (date.getTime() - date.getSeconds() * 1000 - date.getMilliseconds()) === (b.getTime() - b.getSeconds() * 1000 - b.getMilliseconds());
};
scope.isSameMonth = function (date) {
if (!validDate()){
return false;
}
return date.getFullYear() === scope.date.getFullYear() && date.getMonth() === scope.date.getMonth();
};
scope.isSameYear = function (date) {
if (!validDate()){
return false;
}
return date.getFullYear() === scope.date.getFullYear();
};
scope.isSameDate = function (date) {
if (!validDate()){
return false;
}
return scope.date.getDate() === date.getDate() && scope.isSameMonth(date);
};
scope.isSameHour = function (date) {
if (!validDate()){
return false;
}
return scope.date.getHours() === date.getHours() && scope.isSameDate(date);
};
scope.isOldMonth = function (date) {
return date
.getTime() < scope.visibleDate.getTime() && date.getMonth() !== scope.visibleDate.getMonth();
};
scope.isNewHour = function (date) {
return date.getTime() > scope.visibleDate.getTime() && date.getHours() !== scope.visibleDate.getHours();
};
scope.isOldHour = function (date) {
return date.getTime() < scope.visibleDate.getTime() && date.getHours() !== scope.visibleDate.getHours();
};
scope.isNewMonth = function (date) {
return date.getTime() > scope.visibleDate.getTime() && date.getMonth() !== scope.visibleDate.getMonth();
};
scope.$on('setDate', scope.setView.bind(null, 'hours'));
scope.$on('setMonth', scope.setView.bind(null, 'date'));
scope.$on('setHours', scope.setView.bind(null, 'minutes'));
scope.$on('setYear', scope.setView.bind(null, 'month'));
scope.$watch(function () {
return isValidDate(scope.visibleDate);
}, function (valid) {
if (!valid) {
scope.visibleDate = new Date();
}
});
//hours
scope.$watch('[visibleDate.getDate(),visibleDate.getHours()].join()', function () {
if (scope.view === 'hours') {
scope.hours = getVisibleHours(scope.visibleDate);
}
});
//date
scope.$watch('[visibleDate.getFullYear(),visibleDate.getMonth(),visibleDate.getDate()].join()', function () {
if (scope.view === 'date') {
scope.weeks = getVisibleWeeks(scope.visibleDate);
scope.weekdays = getDaysOfWeek(scope.visibleDate);
}
});
scope.$watch('[visibleDate.getFullYear(),visibleDate.getMonth()].join()', function () {
if (scope.view === 'month') {
scope.months = getVisibleMonths(scope.visibleDate);
}
});
scope.$watch('visibleDate.getYear()', function () {
if (scope.view === 'year') {
scope.years = getVisibleYears(scope.visibleDate);
}
});
scope.$watch('visibleDate.getTime()', function () {
if (scope.view === 'minutes') {
scope.minutes = getVisibleMinutes(scope.visibleDate);
}
});
},
replace:true,
templateUrl: 'templates/datepicker.html'
};
});
Module.directive('dateTime', function ($compile, $document, $filter) {
var body = $document.find('body');
var dateFilter = $filter('date');
return {
require: 'ngModel',
link : function (scope, element, attrs, ngModel) {
var format = attrs.format || 'yyyy-MM-dd HH:mm';
var viewsOptions = ['date', 'year', 'month', 'hours', 'minutes', 'month'];
var views = [];
for (var attr in attrs) {
//noinspection JSUnfilteredForInLoop
if (viewsOptions.indexOf(attr) !== -1) { //noinspection JSUnfilteredForInLoop
views.push(attr);
}
}
function formatter(value) {
return dateFilter(value, format);
}
ngModel.$formatters.push(formatter);
var picker = null;
var clear = function(){
if(picker){
picker.remove();
picker = null;
}
};
var template = '<div date-picker="' + attrs.ngModel + '" class="datetimepicker datetimepicker-dropdown-bottom-left dropdown-menu" format="' + format + '" ' + views.join(' ') + '></div>';
function update(obj,date){
ngModel.$setViewValue(date);
}
element.bind('focus', function () {
if (!picker) {
// create picker element
picker = $compile(template)(scope);
body.append(picker);
scope.$digest();
scope.$on('setDate', update);
scope.$on('setMonth',update);
scope.$on('setHours',update);
scope.$on('setYear', update);
var pos = angular.extend(element.offset(), { height: element[0].offsetHeight });
picker.css({ top: pos.top + pos.height, left: pos.left, display: 'block', position: 'absolute'});
picker.bind('mousedown', function () {
return false;
});
}
return false;
scope.$watch('view', function (view) {
update();
});
element.bind('blur', clear);
scope.next = function(delta){
var date = scope.date;
delta = delta || 1;
switch(scope.view){
case 'year':
case 'month':
date.setFullYear(date.getFullYear() + delta);
break;
case 'date':
date.setMonth(date.getMonth() + delta);
break;
case 'hours':
case 'minutes':
date.setHours(date.getHours() + delta);
break;
}
update();
};
scope.prev = function(delta){
return scope.next(delta || -1);
};
scope.isAfter = function(date){
return updated && scope.model ? scope.model.getTime() >= date.getTime(): false;
};
scope.isBefore = function(date){
return scope.model ? scope.model.getTime() <= date.getTime(): false;
};
scope.isSameMonth = function(date){
return scope.isSameYear(date) && scope.model ? scope.model.getMonth() == date.getMonth() : false;
};
scope.isSameYear= function(date){
return (scope.model ? scope.model.getFullYear() == date.getFullYear(): false);
};
scope.isSameDay = function(date){
return scope.isSameMonth(date) && scope.model ? scope.model.getDate() == date.getDate() : false;
};
}
};
});
Module.directive('dateRange', function () {
return {
templateUrl: 'templates/daterange.html',
scope : {
start: '=',
end : '='
},
link : function (scope) {
scope.$watch('start.getTime()', function (value) {
if (value && scope.end && value > scope.end.getTime()) {
scope.end = new Date(value);
}
});
scope.$watch('end.getTime()', function (value) {
if (value && scope.start && value < scope.start.getTime()) {
scope.start = new Date(value);
}
});
}
};
});
// Module.directive('dateTime', function ($compile, $document, $filter) {
// var body = $document.find('body');
// var dateFilter = $filter('date');
// return {
// require: 'ngModel',
// link : function (scope, element, attrs, ngModel) {
// var format = attrs.format || 'yyyy-MM-dd HH:mm';
//
// var viewsOptions = ['date', 'year', 'month', 'hours', 'minutes', 'month'];
// var views = [];
// for (var attr in attrs) {
// //noinspection JSUnfilteredForInLoop
// if (viewsOptions.indexOf(attr) !== -1) { //noinspection JSUnfilteredForInLoop
// views.push(attr);
// }
// }
//
// function formatter(value) {
// return dateFilter(value, format);
// }
//
// ngModel.$formatters.push(formatter);
//
// var picker = null;
// var clear = function(){
// if(picker){
// picker.remove();
// picker = null;
// }
// };
// var template = '<div date-picker="' + attrs.ngModel + '" class="datetimepicker datetimepicker-dropdown-bottom-left dropdown-menu" format="' + format + '" ' + views.join(' ') + '></div>';
//
// function update(obj,date){
// ngModel.$setViewValue(date);
// }
//
// element.bind('focus', function () {
// if (!picker) {
// // create picker element
// picker = $compile(template)(scope);
// body.append(picker);
// scope.$digest();
//
//
// scope.$on('setDate', update);
// scope.$on('setMonth',update);
// scope.$on('setHours',update);
// scope.$on('setYear', update);
//
// var pos = angular.extend(element.offset(), { height: element[0].offsetHeight });
// picker.css({ top: pos.top + pos.height, left: pos.left, display: 'block', position: 'absolute'});
// picker.bind('mousedown', function () {
// return false;
// });
// }
// return false;
// });
// element.bind('blur', clear);
// }
// };
// });
// Module.directive('dateRange', function () {
// return {
// templateUrl: 'templates/daterange.html',
// scope : {
// start: '=',
// end : '='
// },
// link : function (scope) {
// scope.$watch('start.getTime()', function (value) {
// if (value && scope.end && value > scope.end.getTime()) {
// scope.end = new Date(value);
// }
// });
// scope.$watch('end.getTime()', function (value) {
// if (value && scope.start && value < scope.start.getTime()) {
// scope.start = new Date(value);
// }
// });
// }
// };
// });
})(angular);

241
app/templates/datepicker.html
View File

@@ -1,127 +1,132 @@
<div>
<div ng-switch="view">
<div class="datetimepicker-days" ng-switch-when="date">
<table class=" table-condensed">
<thead>
<tr>
<th class="prev" style="visibility: visible;" ng-click="prevMonth()">‹</th>
<th colspan="5" class="switch" ng-click="setView('month')">{{visibleDate|date:"yyyy MMMM"}}</th>
<th class="next" style="visibility: visible;" ng-click="nextMonth()">›</i></th>
</tr>
<tr>
<th class="dow" ng-repeat="day in weekdays">{{ day|date:"EEE"}}</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="week in weeks">
<td class="day" ng-repeat="day in week"
ng-class="{'active':isSameDate(day),'old':isOldMonth(day),'new':isNewMonth(day),'after':isAfter(day),'before':isBefore(day)}"
ng-click="setDate(day)">{{ day.getDate() }}
</td>
</tr>
</tbody>
<tfoot>
<tr>
<th colspan="7" class="today" style="display: none;">Today</th>
</tr>
</tfoot>
</table>
</div>
<div class="datetimepicker-years" ng-switch-when="year">
<table class="table-condensed">
<thead>
<tr>
<th class="prev" style="visibility: visible;" ng-click="prevYear(10)">‹</th>
<th colspan="5" class="switch">{{years[0].getFullYear()}}-{{years[years.length-1].getFullYear()}}</th>
<th class="next" style="visibility: visible;" ng-click="nextYear(10)">›</i></th>
</tr>
</thead>
<tbody>
<tr>
<td colspan="7">
<span class="year" ng-repeat="year in years" ng-class="{'active':isSameYear(year)}"
ng-click="setYear(year)">{{year.getFullYear()}}</span>
</td>
</tr>
</tbody>
</table>
</div>
<div ng-switch="view">
<div class="datetimepicker-days" ng-switch-when="date">
<table class=" table-condensed">
<thead>
<tr>
<th class="prev" style="visibility: visible;" ng-click="prev()">‹</th>
<th colspan="5" class="switch" ng-click="setView('month')">{{date|date:"yyyy MMMM"}}</th>
<th class="next" style="visibility: visible;" ng-click="next()">›</i></th>
</tr>
<tr>
<th class="dow" ng-repeat="day in weekdays">{{ day|date:"EEE"}}</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="week in weeks">
<td class="day" ng-repeat="day in week"
ng-click="setDate(day)">{{ day.getDate() }}
<!--ng-class="{'active':isSameDay(day),'old':isOldMonth(day),'new':isNewMonth(day),'after':day.getTime()>=date.getTime(),'before':isBefore(day)}"-->
<div class="datetimepicker-months" ng-switch-when="month">
<table class="table-condensed">
<thead>
<tr>
<th class="prev" style="visibility: visible;" ng-click="prevYear()">‹</th>
<th colspan="5" class="switch" ng-click="setView('year')">{{ visibleDate|date:"yyyy" }}</th>
<th class="next" style="visibility: visible;" ng-click="nextYear()">›</i></th>
</tr>
</thead>
<tbody>
<tr>
<td colspan="7">
</td>
</tr>
</tbody>
<tfoot>
<tr>
<th colspan="7" class="today" style="display: none;">Today</th>
</tr>
</tfoot>
</table>
</div>
<div class="datetimepicker-years" ng-switch-when="year">
<table class="table-condensed">
<thead>
<tr>
<th class="prev" style="visibility: visible;" ng-click="prev(10)">‹</th>
<th colspan="5" class="switch">{{years[0].getFullYear()}}-{{years[years.length-1].getFullYear()}}</th>
<th class="next" style="visibility: visible;" ng-click="next(10)">›</i></th>
</tr>
</thead>
<tbody>
<tr>
<td colspan="7">
<span ng-class="{'active':isSameYear(year)}" class="year" ng-repeat="year in years"
ng-click="setDate(year)">{{year.getFullYear()}}</span>
</td>
</tr>
</tbody>
</table>
</div>
<div class="datetimepicker-months" ng-switch-when="month">
<table class="table-condensed">
<thead>
<tr>
<th class="prev" style="visibility: visible;" ng-click="prev()">‹</th>
<th colspan="5" class="switch" ng-click="setView('year')">{{ date|date:"yyyy" }}</th>
<th class="next" style="visibility: visible;" ng-click="next()">›</i></th>
</tr>
</thead>
<tbody>
<tr>
<td colspan="7">
<span class="month" ng-repeat="month in months"
ng-class="{'active':isSameMonth(month),'after':isAfter(month),'before':isBefore(month)}"
ng-click="setMonth(month)">{{month|date:'MMM'}}</span>
</td>
</tr>
</tbody>
<tfoot>
<tr>
<th colspan="7" class="today" style="display: none;">Today</th>
</tr>
</tfoot>
</table>
</div>
ng-click="setDate(month)">{{month|date:'MMM'}}</span>
<div class="datetimepicker-hours" ng-switch-when="hours">
<table class=" table-condensed">
<thead>
<tr>
<th class="prev" style="visibility: visible;" ng-click="prevDay()">‹</th>
<th colspan="5" class="switch" ng-click="setView('date')">{{ visibleDate|date:"dd MMMM yyyy" }}</th>
<th class="next" style="visibility: visible;" ng-click="nextDay()">›</i></th>
</tr>
</thead>
<tbody>
<tr>
<td colspan="7">
</td>
</tr>
</tbody>
<tfoot>
<tr>
<th colspan="7" class="today" style="display: none;">Today</th>
</tr>
</tfoot>
</table>
</div>
<div class="datetimepicker-hours" ng-switch-when="hours">
<table class=" table-condensed">
<thead>
<tr>
<th class="prev" style="visibility: visible;" ng-click="prev(24)">‹</th>
<th colspan="5" class="switch" ng-click="setView('date')">{{ date|date:"dd MMMM yyyy" }}</th>
<th class="next" style="visibility: visible;" ng-click="next(24)">›</i></th>
</tr>
</thead>
<tbody>
<tr>
<td colspan="7">
<span class="hour" ng-repeat="hour in hours"
ng-class="{'old':isOldHour(hour),'new':isNewHour(hour),'active':isSameHour(hour)}"
ng-click="setHours(hour)">{{hour|date:"HH:mm"}}</span>
</td>
</tr>
</tbody>
<tfoot>
<tr>
<th colspan="7" class="today" style="display: none;">Today</th>
</tr>
</tfoot>
</table>
</div>
<div class="datetimepicker-minutes" ng-switch-when="minutes">
<table class=" table-condensed">
<thead>
<tr>
<th class="prev" style="visibility: visible;" ng-click="prevHour()">‹</th>
<th colspan="5" class="switch" ng-click="setView('hours')">{{ visibleDate|date:"dd MMMM yyyy HH:mm" }}
</th>
<th class="next" style="visibility: visible;" ng-click="nextHour()">›</i></th>
</tr>
</thead>
<tbody>
<tr>
<td colspan="7">
<span class="minute" ng-repeat="minute in minutes" ng-class="{active:isSameMinutes(minute)}"
ng-click="setMinutes(minute)">{{minute|date:"HH:mm"}}</span>
</td>
</tr>
</tbody>
<tfoot>
<tr>
<th colspan="7" class="today" style="display: none;">Today</th>
</tr>
</tfoot>
</table>
</div>
ng-click="setDate(hour)">{{hour|date:"HH:mm"}}</span>
</td>
</tr>
</tbody>
<tfoot>
<tr>
<th colspan="7" class="today" style="display: none;">Today</th>
</tr>
</tfoot>
</table>
</div>
<div class="datetimepicker-minutes" ng-switch-when="minutes">
<table class=" table-condensed">
<thead>
<tr>
<th class="prev" style="visibility: visible;" ng-click="prev()">‹</th>
<th colspan="5" class="switch" ng-click="setView('hours')">{{ date|date:"dd MMMM yyyy HH:mm" }}
</th>
<th class="next" style="visibility: visible;" ng-click="next()">›</i></th>
</tr>
</thead>
<tbody>
<tr>
<td colspan="7">
<!--ng-class="{active:isSameMinutes(minute)}"-->
<span class="minute" ng-repeat="minute in minutes"
ng-click="setDate(minute)">{{minute|date:"HH:mm"}}</span>
</td>
</tr>
</tbody>
<tfoot>
<tr>
<th colspan="7" class="today" style="display: none;">Today</th>
</tr>
</tfoot>
</table>
</div>
</div>
</div>