kylefang/angular-datepicker
1
0
Fork 0
mirror of https://github.com/HackPlan/angular-datepicker.git synced 2026-01-12 22:44:06 +08:00
Code Issues Packages Projects Releases Wiki Activity

stage 3

Browse Source
This commit is contained in:
g00fy
2013-10-08 00:22:07 +02:00
parent 29cafba56e
commit c3cbe2c86e
8 changed files with 626 additions and 469 deletions
Download Patch File Download Diff File Expand all files Collapse all files

129
app/index.html
View File

@@ -12,7 +12,6 @@
<!-- endbuild -->
</head>
<body ng-app="sample">
<h1> {{ start }} </h1>
<div class="row-fluid">
<div class="span6">
<h2>Calendar</h2>
@@ -21,66 +20,81 @@
<h5>default</h5>
<pre>&lt;div date-picker="start"&gt;&lt;/div&gt; </pre>
{{ start }}
<div date-picker="start" ></div>
<div date-picker="start" max-view="date" min-view="date"></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 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>-->
<h5>year</h5>
<pre>&lt;div date-picker="start" <strong>year</strong>&gt;&lt;/div&gt; </pre>
<div date-picker="start" view="year"></div>
<h5>month</h5>
<pre>&lt;div date-picker="start <strong>month</strong>&gt;&lt;/div&gt; </pre>
<div date-picker="start" view="month"></div>
<h5>date</h5>
<pre>&lt;div date-picker="start" <strong>date</strong>&gt;&lt;/div&gt; </pre>
<div date-picker="start" view="date"></div>
<h5>hours</h5>
<pre>&lt;div date-picker="start" <strong>hours</strong>&gt;&lt;/div&gt; </pre>
<div date-picker="start" view="hours"></div>
<h5>minutes</h5>
<pre>&lt;div date-picker="start" <strong>minutes</strong>&gt;&lt;/div&gt; </pre>
<div date-picker="start" view="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>-->
<!--&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="span6">
<h3>Input</h3>
<h5>default</h5>
<pre></pre>
<input type="text" date-time ng-model="start" required="true" view="hours">
<!--<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>-->
<h3>Input with append</h3>
<h5>default</h5>
<pre>&lt;input type="datetime" <strong>ng-model="model" date-time</strong>&gt;&lt;/div&gt; </pre>
<div class="input-append" date-time-append>
<input type="text" date-time ng-model="start" required="true" view="hours">
<span class="add-on"><i class="icon-calendar"></i></span>
</div>
<h3>Input with prepend</h3>
<h5>default</h5>
<pre>&lt;input type="datetime" <strong>ng-model="model" date-time</strong>&gt;&lt;/div&gt; </pre>
<div class="input-prepend" date-time-append>
<span class="add-on"><i class="icon-calendar"></i></span>
<input type="text" date-time ng-model="start" required="true" view="hours">
</div>
<!--<div class="dropdown">-->
<!--<a class="dropdown-toggle btn btn-danger">-->
<!--{{(a|date)||"pick start"}} - {{(b|date)||"pick end"}}-->
<!--</a>-->
<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="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-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-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>
@@ -88,6 +102,9 @@
<script src="components/angular-bootstrap/ui-bootstrap.js"></script>
<!-- build:js module.min.js -->
<script src="scripts/module.js"></script>
<script src="scripts/datePicker.js"></script>
<script src="scripts/dateRange.js"></script>
<script src="scripts/input.js"></script>
<!-- endbuild -->
<script>
angular.module('sample', ['datePicker', 'ui.bootstrap']);

273
app/scripts/datePicker.js Normal file
View File

@@ -0,0 +1,273 @@
(function (angular) {
'use strict';
var Module = angular.module('datePicker', []);
Module.constant('datePickerConfig', {
template: 'templates/datepicker.html',
view: 'month',
views: ['year', 'month', 'date', 'hours', 'minutes']
});
function getVisibleMinutes(date) {
date = new Date(date || new Date());
date = new Date(date.getFullYear(), date.getMonth(), date.getDate(), date.getHours());
var minutes = [];
var step = 5;
var stop = date.getTime() + 60 * 60 * 1000;
while (date.getTime() < stop) {
minutes.push(date);
date = new Date(date.getTime() + step * 60 * 1000);
}
return minutes;
}
function getVisibleWeeks(date) {
date = new Date(date || new Date());
date.setDate(1);
date.setHours(0);
date.setMinutes(0);
date.setSeconds(0);
date.setMilliseconds(0);
if (date.getDay() === 0) {
date.setDate(-5);
} else {
date.setDate(date.getDate() - (date.getDay() - 1));
}
if (date.getDate() === 1) {
date.setDate(-6);
}
var weeks = [];
while (weeks.length < 6) {
var week = [];
for (var i = 0; i < 7; i++) {
week.push(new Date(date));
date.setDate(date.getDate() + 1);
}
weeks.push(week);
}
return weeks;
}
function getVisibleYears(date) {
var years = [];
date = new Date(date || new Date());
date.setFullYear(date.getFullYear() - (date.getFullYear() % 10));
for (var i = 0; i < 12; i++) {
years.push(new Date(date.getFullYear() + (i - 1), 0, 1));
}
return years;
}
function getDaysOfWeek(date) {
date = new Date(date || new Date());
date = new Date(date.getFullYear(), date.getMonth(), date.getDate());
date.setDate(date.getDate() - (date.getDay() - 1));
var days = [];
for (var i = 0; i < 7; i++) {
days.push(new Date(date));
date.setDate(date.getDate() + 1);
}
return days;
}
function getVisibleMonths(date) {
date = new Date(date || new Date());
var year = date.getFullYear();
var months = [];
for (var month = 0; month < 12; month++) {
months.push(new Date(year, month, 1));
}
return months;
}
function getVisibleHours(date) {
date = new Date(date || new Date());
date.setHours(0);
date.setMinutes(0);
date.setSeconds(0);
date.setMilliseconds(0);
var hours = [];
for (var i = 0; i < 24; i++) {
hours.push(date);
date = new Date(date.getTime() + 60 * 60 * 1000);
}
return hours;
}
Module.directive('datePicker', function datePickerDirective(datePickerConfig) {
//noinspection JSUnusedLocalSymbols
return {
// this is a bug ?
template:'<div ng-include="template"></div>',
// replace: true,
scope: {
model: '=datePicker',
after: '=?',
before: '=?'
},
link: function (scope, element, attrs) {
scope.date = new Date(scope.model || new Date());
scope.views = datePickerConfig.views.concat();
scope.view = attrs.view || datePickerConfig.view;
scope.now = new Date();
scope.template = attrs.template || datePickerConfig.template;
var index;
if (attrs.minView) {
index = scope.views.indexOf(attrs.minView);
scope.views.splice(0, index);
}
if (attrs.maxView) {
index = scope.views.indexOf(attrs.maxView);
scope.views.splice(index + 1);
}
if (scope.views.length == 1) {
scope.view = scope.views[0];
}
scope.setView = function (nextView) {
if (scope.views.indexOf(nextView) != -1) {
scope.view = nextView;
}
};
scope.setDate = function (date) {
scope.date = date;
// change next view
var nextView = scope.views[scope.views.indexOf(scope.view) + 1];
if (!nextView || scope.model) {
scope.model = new Date(scope.model || date);
//noinspection FallThroughInSwitchStatementJS
switch (scope.view) {
case 'minutes':
scope.model.setMinutes(date.getMinutes());
case 'hours':
scope.model.setHours(date.getHours());
case 'date':
scope.model.setDate(date.getDate());
case 'month':
scope.model.setMonth(date.getMonth());
case 'year':
scope.model.setFullYear(date.getFullYear());
}
scope.$emit('setDate', scope.model, scope.view);
}
if (nextView) {
scope.setView(nextView);
}
};
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(date);
break;
}
}
function watch(){
if(scope.view!='date'){
return scope.view;
}
return scope.model ? scope.model.getMonth(): null;
}
scope.$watch(watch,update);
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 scope.after ? scope.after.getTime() <= date.getTime() : false;
};
scope.isBefore = function (date) {
return scope.before ? scope.before.getTime() >= date.getTime() : false;
};
scope.isSameMonth = function (date) {
return scope.isSameYear(date) && scope.model.getMonth() == date.getMonth();
};
scope.isSameYear = function (date) {
return (scope.model ? scope.model.getFullYear() == date.getFullYear() : false);
};
scope.isSameDay = function (date) {
return scope.isSameMonth(date) && scope.model.getDate() == date.getDate();
};
scope.isSameHour = function (date) {
return scope.isSameDay(date) && scope.model.getHours() == date.getHours();
};
scope.isSameMinutes = function (date) {
return scope.isSameHour(date) && scope.model.getMinutes() == date.getMinutes();
};
scope.isNow = function (date) {
var is = true;
var now = scope.now;
//noinspection FallThroughInSwitchStatementJS
switch (scope.view) {
case 'hour':
is &= date.getHours() == now.getHours();
case 'date':
is &= date.getDate() == now.getDate();
case 'month':
is &= date.getMonth() == now.getMonth();
case 'year':
is &= date.getFullYear() == now.getFullYear();
}
return is;
}
}
};
});
})(angular);

26
app/scripts/dateRange.js Normal file
View File

@@ -0,0 +1,26 @@
(function (angular) {
'use strict';
var Module = angular.module('datePicker');
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);

130
app/scripts/input.js Normal file
View File

@@ -0,0 +1,130 @@
(function (angular) {
'use strict';
var PRISTINE_CLASS = 'ng-pristine',
DIRTY_CLASS = 'ng-dirty';
var Module = angular.module('datePicker');
Module.constant('dateTimeConfig',{
template:function(attrs){
return ''+
'<div '+
'date-picker="' + attrs.ngModel + '" ' +
'view="'+attrs.view+'" ' +
(attrs.maxView ? 'max-view="'+attrs.maxView+'" ' : '')+
(attrs.template ? 'template="'+attrs.template+'" ' : '')+
(attrs.minView ? 'min-view="'+attrs.minView+'" ' : '')+
'class="datetimepicker datetimepicker-dropdown-bottom-left dropdown-menu"></div>';
},
format:'yyyy-MM-dd HH:mm',
views: ['date', 'year', 'month', 'hours', 'minutes', 'month'],
dismiss:false
});
Module.directive('dateTimeAppend',function(){
return {
link:function(scope,element,attrs){
element.bind('click',function(){
element.find('input').focus();
})
}
}
});
Module.directive('dateTime', function ($compile, $document, $filter, dateTimeConfig, $parse) {
var body = $document.find('body');
var dateFilter = $filter('date');
return {
require: 'ngModel',
link: function (scope, element, attrs, ngModel) {
var format = attrs.format || dateTimeConfig.format;
var parentForm = element.inheritedData('$formController');
var views = $parse(attrs.views)(scope) || dateTimeConfig.views.concat();
var view = attrs.view || views[0];
var index = views.indexOf(view);
var dismiss = attrs.dismiss ? $parse(attrs.dismiss)(scope) : dateTimeConfig.dismiss;
var picker = null;
if(index == -1){
views.splice(index,1);
}
views.unshift(view);
function formatter(value) {
return dateFilter(value, format);
}
function parser(value){
return ngModel.$modelValue;
}
ngModel.$formatters.push(formatter);
ngModel.$parsers.unshift(parser);
var template = dateTimeConfig.template(attrs);
function updateInput(event) {
event.stopPropagation();
if (ngModel.$pristine) {
ngModel.$dirty = true;
ngModel.$pristine = false;
element.removeClass(PRISTINE_CLASS).addClass(DIRTY_CLASS);
if (parentForm) {
parentForm.$setDirty();
}
ngModel.$render();
}
}
function dismissPicker(){
if(dismiss){
clear();
}
}
function clear() {
if (picker) {
console.log('remove',picker);
window.picker = picker;
picker.remove();
picker = null;
}
}
function showPicker() {
if (picker)return;
// create picker element
picker = $compile(template)(scope);
body.append(picker);
scope.$digest();
console.log(picker[0]);
window.picker = picker;
scope.$on('setDate', function(event){
updateInput(event);
dismissPicker();
});
// move picker below input element
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;
});
}
element.bind('focus', showPicker);
element.bind('blur', clear);
}
};
});
})(angular);

290
app/scripts/module.js
View File

@@ -1,294 +1,4 @@
(function (angular) {
'use strict';
var Module = angular.module('datePicker', []);
Module.directive('datePicker', function () {
var views = ['year', 'month', 'date', 'hours', 'minutes'];
var noop = angular.noop;
function getVisibleMinutes(date) {
date = new Date(date || new Date());
date = new Date(date.getFullYear(), date.getMonth(), date.getDate(), date.getHours());
var minutes = [];
var step = 5;
var stop = date.getTime() + 60 * 60 * 1000;
while (date.getTime() < stop) {
minutes.push(date);
date = new Date(date.getTime() + step * 60 * 1000);
}
return minutes;
}
function getVisibleWeeks(date) {
date = new Date(date || new Date());
date.setDate(1);
date.setHours(0);
date.setMinutes(0);
date.setSeconds(0);
date.setMilliseconds(0);
if (date.getDay() === 0) {
date.setDate(-5);
} else {
date.setDate(date.getDate() - (date.getDay() - 1));
}
if (date.getDate() === 1) {
date.setDate(-6);
}
var weeks = [];
while (weeks.length < 6) {
var week = [];
for (var i = 0; i < 7; i++) {
week.push(new Date(date));
date.setDate(date.getDate() + 1);
}
weeks.push(week);
}
return weeks;
}
function getVisibleYears(date) {
var years = [];
date = new Date(date || new Date());
date.setFullYear(date.getFullYear() - (date.getFullYear() % 10));
for (var i = 0; i < 12; i++) {
years.push(new Date(date.getFullYear() + (i - 1), 0, 1));
}
return years;
}
function getDaysOfWeek(date) {
date = new Date(date || new Date());
date = new Date(date.getFullYear(), date.getMonth(), date.getDate());
date.setDate(date.getDate() - (date.getDay() - 1));
var days = [];
for (var i = 0; i < 7; i++) {
days.push(new Date(date));
date.setDate(date.getDate() + 1);
}
return days;
}
function getVisibleMonths(date) {
date = new Date(date || new Date());
var year = date.getFullYear();
var months = [];
for (var month = 0; month < 12; month++) {
months.push(new Date(year, month, 1));
}
return months;
}
function getVisibleHours(date) {
date = new Date(date || new Date());
date.setHours(0);
date.setMinutes(0);
date.setSeconds(0);
date.setMilliseconds(0);
var hours = [];
for (var i = 0; i < 24; i++) {
hours.push(date);
date = new Date(date.getTime() + 60 * 60 * 1000);
}
return hours;
}
return {
templateUrl: 'templates/datepicker.html',
replace:true,
scope : {
model: '=datePicker',
view : '=?',
after : '=?',
before: '=?'
},
link : function (scope, element, attrs) {
// if model value was updated or already existing;
var updated = !!scope.model;
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(!nextView || updated){
scope.model = date;
}
};
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(date);
break;
}
}
scope.$watch('view', function (view) {
update();
});
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('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);

3
app/styles/style.less Normal file
View File

@@ -0,0 +1,3 @@
[date-picker] {
}

238
app/templates/datepicker.html
View File

@@ -1,132 +1,130 @@
<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)}"-->
</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>
<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-class="{'active':isSameDay(day),'disabled':(day.getMonth()!=date.getMonth()),'after':isAfter(day),'before':isBefore(day)}"
ng-click="setDate(day)" ng-bind="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="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),'btn-danger':isNow(year)}" class="year"
ng-repeat="year in years"
ng-click="setDate(year)" ng-bind="year.getFullYear()"></span>
</td>
</tr>
</tbody>
</table>
</div>
</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">
<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-class="{'active':isSameMonth(month),'after':isAfter(month),'before':isBefore(month),'btn-danger':isNow(month)}"
ng-click="setDate(month)">{{month|date:'MMM'}}</span>
</td>
</tr>
</tbody>
<tfoot>
<tr>
<th colspan="7" class="today" style="display: none;">Today</th>
</tr>
</tfoot>
</table>
</div>
</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">
<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="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)}"-->
ng-click="setDate(hour)" ng-bind="hour.getHours()+':00'"></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">
<span class="minute" ng-repeat="minute in minutes"
ng-class="{active:isSameMinutes(minute)}"
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>
</td>
</tr>
</tbody>
<tfoot>
<tr>
<th colspan="7" class="today" style="display: none;">Today</th>
</tr>
</tfoot>
</table>
</div>
</div>
</div>
</div>

6
app/templates/daterange.html
View File

@@ -2,11 +2,11 @@
<table>
<tr>
<td valign="top">
<div date-picker="start" class="date-picker" date after="start" before="end"></div>
<div date-picker="start" class="date-picker" date after="start" before="end" min-view="date" max-view="date"></div>
</td>
<td valign="top">
<div date-picker="end" class="date-picker" date after="start" before="end"></div>
<div date-picker="end" class="date-picker" date after="start" before="end" min-view="date" max-view="date"></div>
</td>
</tr>
</table>
</div>
</div>