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

working my way up to angular 1.2

Browse Source
This commit is contained in:
Piotrek
2013-10-03 13:56:44 +02:00
parent 9fc989986c
commit 369d5ac1ef
4 changed files with 83 additions and 76 deletions
Download Patch File Download Diff File Expand all files Collapse all files

128
app/index.html
View File

@@ -1,51 +1,51 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title></title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width">
<!-- build:css styles/main.css -->
<link rel="stylesheet" href="styles/bootstrap.css">
<link rel="stylesheet" href="styles/date.css"/>
<!-- endbuild -->
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title></title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width">
<!-- build:css styles/main.css -->
<link rel="stylesheet" href="styles/bootstrap.css">
<link rel="stylesheet" href="styles/date.css"/>
<!-- endbuild -->
</head>
<body ng-app="sample">
<div class="row-fluid">
<div class="span6">
<h2>Calendar</h2>
<div class="span6">
<h2>Calendar</h2>
<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>
<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>
</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>
<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>
<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>
</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)}}
@@ -54,40 +54,40 @@
&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">
<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">
<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 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>
<script src="components/angular-unstable/angular.js"></script>
<script src="components/angular/angular.js"></script>
<script src="components/angular-bootstrap/ui-bootstrap.js"></script>
<!-- build:js module.min.js -->
<script src="scripts/module.js"></script>
<!-- endbuild -->
<script>
angular.module('sample', ['datePicker', 'ui.bootstrap']);
angular.module('sample', ['datePicker', 'ui.bootstrap']);
</script>
</body>
</html>

13
app/scripts/module.js
View File

@@ -53,7 +53,6 @@
return weeks;
}
function getVisibleYears(date) {
var years = [];
date = new Date(date || new Date());
@@ -355,8 +354,7 @@
});
},
transclude : true,
replace : true,
replace:true,
templateUrl: 'templates/datepicker.html'
};
});
@@ -378,6 +376,13 @@
}
}
scope.$watch(''+attrs.ngModel+'.getTime()',function(a,b){
if(a!=b){
ngModel.$setViewValue(a);
}
});
function formatter(value) {
return dateFilter(value, format);
}
@@ -433,4 +438,4 @@
}
};
});
})(angular);
})(angular);

6
app/templates/datepicker.html
View File

@@ -1,4 +1,5 @@
<div ng-transclude ng-switch="view">
<div>
<div ng-switch="view">
<div class="datetimepicker-days" ng-switch-when="date">
<table class=" table-condensed">
<thead>
@@ -122,4 +123,5 @@
</tfoot>
</table>
</div>
</div>
</div>
</div>

12
bower.json
View File

@@ -1,19 +1,19 @@
{
"name": "angular-datepicker",
"main": ["module.min.js","date.min.css"],
"license": "MIT",
"version": "0.0.1",
"version": "0.0.2",
"ignore": [
".gitignore","README.md"
],
"dependencies": {},
"devDependencies": {
"angular-unstable": "latest",
"json3": "~3.2.4",
"es5-shim": "~2.0.8",
"angular": "1.2.0-rc.2",
"jquery": "~2.0.2",
"angular-mocks": "~1.0.5",
"angular-scenario": "~1.0.5",
"angular-bootstrap": "~0.3.0"
},
"resolutions": {
"angular": "1.2.0-rc.2"
}
}
}