使用angular框架的時候，之前用的時間控件是引入My97DatePicker組件實現的，但是因為
1.My97DatePicker樣式不太好看以及偶爾會出現底部被遮蓋的情況、點擊不可編輯input框使用backspace按鈕會出現格式不符合問題
2.angular-bootstrap 自帶兼容第三方ui-date，並且是基於bootstrap改造的
所以決定調研ui-date是否符合產品需求：
條件1.開始時間和結束時間之間有某種關系：開始時間可范圍最大值不超過結束時間值，結束時間可選最小值不小於開始時間值
條件2.有選擇今天日期按鈕
條件3.不能有清除日期按鈕
條件4.必須漢化
在引入該文件的時候，angular版本是1.5.0，angular-ui-bootstrap版本是1.1.2，修改代碼后為
1 <p class="input-group"> 2 <input type="text" class="form-control" uib-datepicker-popup readonly ng-model="dicQueryObj.startTime" is-open="startPopupOpened" min-date="minStartDate" max-date="maxStartDate" datepicker-options="dateOptions" ng-required="true" close-text="關閉" current-text="今天"/> 3 <span class="input-group-btn"> 4 <button type="button" class="btn btn-default" ng-click="startOpen()"><i class="glyphicon glyphicon-calendar"></i></button> 5 </span> 6</p>
1 <p class="input-group"> 2 <input type="text" class="form-control" uib-datepicker-popup readonly ng-model="dicQueryObj.endTime" is-open="endPopupOpened" min-date="minEndDate" max-date="maxEndDate" datepicker-options="dateOptions" ng-required="true" close-text="關閉" current-text="今天" /> 3 <span class="input-group-btn"> 4 <button type="button" class="btn btn-default" ng-click="endOpen()"><i class="glyphicon glyphicon-calendar"></i></button> 5 </span> 6</p>
//初始化查詢條件
$scope.dicQueryObj = {
fileName: '',
startTime:new Date(CommonServ.getLastMonthDate()),
endTime: new Date(CommonServ.getCurDate()),
order: '0'
};
//時間選擇器配置
$scope.minStartDate = 0; //開始時間的最小時間
$scope.maxStartDate = $scope.dicQueryObj.endTime; //開始時間的最大可選時間
$scope.minEndDate = $scope.dicQueryObj.startTime; //結束時間的最小可選時間要大於開始時間的設定值
$scope.maxEndDate = $scope.dicQueryObj.endTime; //結束時間的最大可選擇時間不超過結束時間的設定值
$scope.$watch('dicQueryObj.startTime', function(v){
$scope.minEndDate = v;
});
$scope.$watch('dicQueryObj.endTime', function(v){
$scope.maxStartDate = v;
});
$scope.dateOptions = {
formatYear: 'yy',
maxDate: new Date(),
startingDay: 1
};
$scope.startOpen = function() {
$timeout(function() {
$scope.startPopupOpened = true;
});
};
$scope.endOpen = function() {
$timeout(function() {
$scope.endPopupOpened = true;
});
};
$scope.startPopupOpened = false;
$scope.endPopupOpened = false;
然后隱藏清除按鈕：
1 /*ui-date樣式*/ 2 .uib-button-bar .btn-group button[ng-click^="select(null)"] { 3 display: none; 4 }
效果界面顯示如下：
條件1、條件2、條件3都符合，然后被組內小伙伴測出來bug！！！
bug描述：因為設置了日期可選范圍，界面確實對范圍外的日期呈不可選狀態，不可點擊，然后頂部前后年份以及月份都可滑動，關鍵是每次切換月份，月份的1號都會被莫名的自動選中，導致我ng-model綁定的數據變化！！然而居然$watch不出來！！！我就納悶了？
然后嘗試看源碼，然而各種看不懂啊。只有類似一句self.activeDate(year,mouth,1)，然而各種注釋都木有用，各種按照issue上面改代碼，然而作者說版本更新已經不適用了。。。我就放棄了，再說改源碼畢竟不好啊！
中途各種看issues（https://github.com/angular-ui/bootstrap/issues?utf8=%E2%9C%93）發現人家標為這是bug！！！
http://angular-ui.github.io/bootstrap/#/datepicker無奈研究了一下官網，他並沒有出現我遇到的問題，查看他用的版本，發現人用的版本不一樣啊！！！
然后重新下載版本bower install angular-bootstrap#1.3.2，引入解決了bug！
到目前為止就剩下條件4漢化了，查了一下issue，結果...
就在快要放棄的時候，大牛說是引入中文文件就OK，畢竟它改造之前是可以支持中文版本的，然后開始各種找，找到了i18n，bower install angular-i18n，下下來發現各種文件
然而查看發現
require('./angular-locale_zh-cn');
module.exports = 'ngLocale';
。。好吧 這個angular2.0的代碼
但是ngLocale這個模塊貌似就是漢化的重要線索，然后就找到這個了http://stackoverflow.com/questions/19671887/angularjs-angular-ui-bootstrap-changing-language-used-by-the-datepicker
里面提到解決方法，扒下來漢化文件https://github.com/angular/angular.js/blob/master/src/ngLocale/angular-locale_zh.js
然后引進項目中，完全漢化了！效果如下：
注意1：min-date以及max-date設置從html中轉義至controller中的options設置
<p class="input-group"> <input type="text" class="form-control" uib-datepicker-popup readonly ng-model="newWordQueryObj.startTime" is-open="startPopupOpened" datepicker-options="startDateOptions" ng-required="true" close-text="關閉" current-text="今天" /> <span class="input-group-btn"> <button type="button" class="btn btn-default" ng-click="startOpen()"><i class="glyphicon glyphicon-calendar"></i></button> </span> </p> <p class="input-group"> <input type="text" class="form-control" uib-datepicker-popup readonly ng-model="newWordQueryObj.endTime" is-open="endPopupOpened" datepicker-options="endDateOptions" ng-required="true" close-text="關閉" current-text="今天" /> <span class="input-group-btn"> <button type="button" class="btn btn-default" ng-click="endOpen()"><i class="glyphicon glyphicon-calendar"></i></button> </span> </p>
JS代碼修改：
1 //初始化查詢條件 2 $scope.newWordQueryObj = { 3 fileName: '', 4 startTime: new Date(CommonServ.getLastMonthDate()), 5 endTime: new Date(CommonServ.getCurDate()), 6 order: '0' 7 }; 8 9 10 //時間選擇器配置 11 //$scope.minStartDate = 0; //開始時間的最小時間 12 //$scope.maxStartDate = $scope.newWordQueryObj.endTime; //開始時間的最大可選時間 13 //$scope.minEndDate = $scope.newWordQueryObj.startTime; //結束時間的最小可選時間要大於開始時間的設定值 14 //$scope.maxEndDate = $scope.newWordQueryObj.endTime; //結束時間的最大可選擇時間不超過結束時間的設定值 15 $scope.startDateOptions = { 16 formatYear: 'yy', 17 maxDate: $scope.newWordQueryObj.endTime, 18 startingDay: 1 19 }; 20 $scope.endDateOptions = { 21 formatYear: 'yy', 22 minDate: $scope.newWordQueryObj.startTime, 23 maxDate: new Date(), 24 startingDay: 1 25 }; 26 27 $scope.$watch('newWordQueryObj.startTime', function(newValue,oldValue){ 28 //$scope.minEndDate = newValue; 29 $scope.endDateOptions.minDate = newValue; 30 }); 31 $scope.$watch('newWordQueryObj.endTime', function(newValue,oldValue){ 32 //$scope.maxStartDate = newValue; 33 $scope.startDateOptions.maxDate = newValue; 34 }); 35 $scope.startOpen = function() { 36 $timeout(function() { 37 $scope.startPopupOpened = true; 38 }); 39 }; 40 $scope.endOpen = function() { 41 $timeout(function() { 42 $scope.endPopupOpened = true; 43 }); 44 }; 45 $scope.startPopupOpened = false; 46 $scope.endPopupOpened = false; 47
注意2：這時如果要隱藏clear清除按鈕，css代碼得改變
1 /*ui-date樣式*/ 2 .uib-button-bar .btn-group button[ng-click^="select(null, $event)"] { 3 display: none; 4 }
完成~
接下來就可以重新測試一下了~
備注：
此時對accordion來說，如果自定義了templateUrl，此時templateUrl內需要添加一個屬性uib-accordion-header
1 <span data-toggle="collapse" aria-expanded="{{isOpen}}" aria-controls="{{::panelId}}" tabindex="0" class="accordion-toggle" uib-accordion-transclude="heading"><span ng-class="{'text-muted': isDisabled}" uib-accordion-header>{{heading}}</span></span>