kylefang/angular-datepicker
1
0
Fork 0
mirror of https://github.com/HackPlan/angular-datepicker.git synced 2026-04-30 04:35:37 +08:00
Code Issues Packages Projects Releases Wiki Activity

angular-ui dropdownToggle support

Browse Source
This commit is contained in:
g00fy
2013-06-12 16:40:36 +02:00
parent 1b3834fd39
commit ac42ee1b5c
3 changed files with 38 additions and 7 deletions
Download Patch File Download Diff File Expand all files Collapse all files

34
app/index.html
View File

@@ -16,7 +16,7 @@
<link rel="stylesheet" href="styles/date.css"/> <link rel="stylesheet" href="styles/date.css"/>
<!-- endbuild --> <!-- endbuild -->
</head> </head>
<body ng-app="dateInput"> <body ng-app="sample">
<div class="row-fluid"> <div class="row-fluid">
<div class="span6"> <div class="span6">
@@ -50,16 +50,46 @@
<h5>Input format</h5> <h5>Input format</h5>
<pre>&lt;input type="datetime" ng-model="model" date-time <strong>format="long"</strong>&gt;&lt;/div&gt; </pre> <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"> <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-picker="date" class="datetimepicker"></div>
</div>
</div>
<h5>Date range</h5> <h5>Date range</h5>
<pre>&lt;div date-range start="start" end="end" &gt;&lt;/div&gt; </pre> <pre>&lt;div date-range start="start" end="end" &gt;&lt;/div&gt; </pre>
<div date-range start="a" end="b" style="position: relative"></div> <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>
</div> </div>
<script src="components/jquery/jquery.js"></script> <script src="components/jquery/jquery.js"></script>
<script src="components/angular/angular.js"></script> <script src="components/angular/angular.js"></script>
<script src="components/angular-bootstrap/ui-bootstrap.js"></script>
<!-- build:js module.min.js --> <!-- build:js module.min.js -->
<script src="scripts/module.js"></script> <script src="scripts/module.js"></script>
<!-- endbuild --> <!-- endbuild -->
<script>
angular.module('sample',['dateInput','ui.bootstrap'])
</script>
</body> </body>
</html> </html>

8
app/scripts/module.js
View File

@@ -384,12 +384,12 @@
if (!picker) { if (!picker) {
picker = $compile('<div date-picker="' + attrs.ngModel + '" class="datetimepicker datetimepicker-dropdown-bottom-left dropdown-menu" format="' + format + '" ' + views.join(' ') + '></div>')(scope); picker = $compile('<div date-picker="' + attrs.ngModel + '" class="datetimepicker datetimepicker-dropdown-bottom-left dropdown-menu" format="' + format + '" ' + views.join(' ') + '></div>')(scope);
body.append(picker); body.append(picker);
scope.$digest();
var pos = angular.extend({}, element.position(), { height: element[0].offsetHeight });
picker.css({ top: pos.top + pos.height, left: pos.left, display: 'block', position: 'absolute'});
picker.bind('mousedown', function () { picker.bind('mousedown', function () {
return false; return false;
}); });
var pos = angular.extend({}, element.position(), { height: element[0].offsetHeight });
picker.css({ top: pos.top + pos.height, left: pos.left, display: 'block', position: 'absolute'});
scope.$digest();
} }
return false; return false;
}); });
@@ -405,7 +405,7 @@
Module.directive('dateRange', function () { Module.directive('dateRange', function () {
return { return {
template: '<div class="dropdown-menu" style="display: block">\n <table >\n <tr>\n <td valign="top"><div date-picker="start" class="datetimepicker" date after="start" before="end"></div></td>\n <td valign="top"><div date-picker="end" class="datetimepicker" date after="start" before="end"></div></td>\n </tr>\n </table>\n \n \n</div>', template: '<div>\n <table >\n <tr>\n <td valign="top"><div date-picker="start" class="datetimepicker" date after="start" before="end"></div></td>\n <td valign="top"><div date-picker="end" class="datetimepicker" date after="start" before="end"></div></td>\n </tr>\n </table>\n \n \n</div>',
scope : { scope : {
start: '=', start: '=',
end : '=' end : '='

3
bower.json
View File

@@ -15,6 +15,7 @@
"es5-shim": "~2.0.8", "es5-shim": "~2.0.8",
"jquery": "~2.0.2", "jquery": "~2.0.2",
"angular-mocks": "~1.0.5", "angular-mocks": "~1.0.5",
"angular-scenario": "~1.0.5" "angular-scenario": "~1.0.5",
"angular-bootstrap": "~0.3.0"
} }
} }