feat(datepicker): update to Bootstrap 3

angular-ui · Dec 28, 2013 · 3768433 · 3768433
1 parent eadf934
commit 3768433
Show file tree

Hide file tree

Showing 4 changed files with 32 additions and 24 deletions.
diff --git a/src/datepicker/docs/demo.html b/src/datepicker/docs/demo.html
@@ -9,18 +9,26 @@ <h4>Inline</h4>
     </div>
 
     <h4>Popup</h4>
-    <div class="form-horizontal">
-        <p>
-            <input type="text" datepicker-popup="{{format}}" ng-model="dt" is-open="opened" min="minDate" max="'2015-06-22'" datepicker-options="dateOptions" date-disabled="disabled(date, mode)" ng-required="true" close-text="Close" />
-            <button class="btn" ng-click="open($event)"><i class="icon-calendar"></i></button>
-        </p>
-        <p><i>Format options:</i> <select ng-model="format" ng-options="f for f in formats"><option></option></select></p>
+    <div class="row">
+        <div class="col-md-6">
+            <p class="input-group">
+              <input type="text" class="form-control" datepicker-popup="{{format}}" ng-model="dt" is-open="opened" min="minDate" max="'2015-06-22'" datepicker-options="dateOptions" date-disabled="disabled(date, mode)" ng-required="true" close-text="Close" />
+              <span class="input-group-btn">
+                <button class="btn btn-default" ng-click="open($event)"><i class="glyphicon glyphicon-calendar"></i></button>
+              </span>
+            </p>
+        </div>
+    </div>
+    <div class="row">
+        <div class="col-md-6">
+            <label>Format:</label> <select class="form-control" ng-model="format" ng-options="f for f in formats"><option></option></select>
+        </div>
     </div>
 
     <hr />
-    <button class="btn btn-small btn-inverse" ng-click="today()">Today</button>
-    <button class="btn btn-small btn-inverse" ng-click="dt = '2009-08-24'">2009-08-24</button>
-    <button class="btn btn-small btn-success" ng-click="toggleWeeks()" tooltip="For inline datepicker">Toggle Weeks</button>
-    <button class="btn btn-small btn-danger" ng-click="clear()">Clear</button>
-    <button class="btn btn-small" ng-click="toggleMin()" tooltip="After today restriction">Min date</button>
+    <button class="btn btn-sm btn-info" ng-click="today()">Today</button>
+    <button class="btn btn-sm btn-default" ng-click="dt = '2009-08-24'">2009-08-24</button>
+    <button class="btn btn-sm btn-success" ng-click="toggleWeeks()" tooltip="For inline datepicker">Toggle Weeks</button>
+    <button class="btn btn-sm btn-danger" ng-click="clear()">Clear</button>
+    <button class="btn btn-sm btn-default" ng-click="toggleMin()" tooltip="After today restriction">Min date</button>
 </div>
diff --git a/src/datepicker/test/datepicker.spec.js b/src/datepicker/test/datepicker.spec.js
@@ -164,7 +164,7 @@ describe('datepicker directive', function () {
     var options = getAllOptionsEl();
     for (var i = 0; i < 5; i ++) {
       for (var j = 0; j < 7; j ++) {
-        expect(options[i][j].find('button').find('span').hasClass('muted')).toBe( ((i === 0 && j < 3) || (i === 4 && j > 4)) );
+        expect(options[i][j].find('button').find('span').hasClass('text-muted')).toBe( ((i === 0 && j < 3) || (i === 4 && j > 4)) );
       }
     }
   });

diff --git a/template/datepicker/datepicker.html b/template/datepicker/datepicker.html
@@ -1,20 +1,20 @@
 <table>
   <thead>
-    <tr class="text-center">
-      <th><button type="button" class="btn pull-left" ng-click="move(-1)"><i class="icon-chevron-left"></i></button></th>
-      <th colspan="{{rows[0].length - 2 + showWeekNumbers}}"><button type="button" class="btn btn-block" ng-click="toggleMode()"><strong>{{title}}</strong></button></th>
-      <th><button type="button" class="btn pull-right" ng-click="move(1)"><i class="icon-chevron-right"></i></button></th>
+    <tr>
+      <th><button type="button" class="btn btn-default btn-sm pull-left" ng-click="move(-1)"><i class="glyphicon glyphicon-chevron-left"></i></button></th>
+      <th colspan="{{rows[0].length - 2 + showWeekNumbers}}"><button type="button" class="btn btn-default btn-sm btn-block" ng-click="toggleMode()"><strong>{{title}}</strong></button></th>
+      <th><button type="button" class="btn btn-default btn-sm pull-right" ng-click="move(1)"><i class="glyphicon glyphicon-chevron-right"></i></button></th>
     </tr>
-    <tr class="text-center" ng-show="labels.length > 0">
-      <th ng-show="showWeekNumbers">#</th>
-      <th ng-repeat="label in labels">{{label}}</th>
+    <tr ng-show="labels.length > 0" class="h6">
+      <th ng-show="showWeekNumbers" class="text-center">#</th>
+      <th ng-repeat="label in labels" class="text-center">{{label}}</th>
     </tr>
   </thead>
   <tbody>
     <tr ng-repeat="row in rows">
       <td ng-show="showWeekNumbers" class="text-center"><em>{{ getWeekNumber(row) }}</em></td>
       <td ng-repeat="dt in row" class="text-center">
-        <button type="button" style="width:100%;" class="btn" ng-class="{'btn-info': dt.selected}" ng-click="select(dt.date)" ng-disabled="dt.disabled"><span ng-class="{muted: dt.secondary}">{{dt.label}}</span></button>
+        <button type="button" style="width:100%;" class="btn btn-default btn-sm" ng-class="{'btn-info': dt.selected}" ng-click="select(dt.date)" ng-disabled="dt.disabled"><span ng-class="{'text-muted': dt.secondary}">{{dt.label}}</span></button>
       </td>
     </tr>
   </tbody>

diff --git a/template/datepicker/popup.html b/template/datepicker/popup.html
@@ -2,10 +2,10 @@
 	<li ng-transclude></li>
 	<li ng-show="showButtonBar" style="padding:10px 9px 2px">
 		<span class="btn-group">
-			<button type="button" class="btn btn-small btn-inverse" ng-click="today()">{{currentText}}</button>
-			<button type="button" class="btn btn-small btn-info" ng-click="showWeeks = ! showWeeks" ng-class="{active: showWeeks}">{{toggleWeeksText}}</button>
-			<button type="button" class="btn btn-small btn-danger" ng-click="clear()">{{clearText}}</button>
+			<button type="button" class="btn btn-sm btn-info" ng-click="today()">{{currentText}}</button>
+			<button type="button" class="btn btn-sm btn-default" ng-click="showWeeks = ! showWeeks" ng-class="{active: showWeeks}">{{toggleWeeksText}}</button>
+			<button type="button" class="btn btn-sm btn-danger" ng-click="clear()">{{clearText}}</button>
 		</span>
-		<button type="button" class="btn btn-small btn-success pull-right" ng-click="isOpen = false">{{closeText}}</button>
+		<button type="button" class="btn btn-sm btn-success pull-right" ng-click="isOpen = false">{{closeText}}</button>
 	</li>
 </ul>