使用popup組件的過程中遇到時間選取的問題
官方文檔大致說使用date和mode 可以解決，奈何老夫是看不懂，寫的時候參考的有 官方文檔、echo2016的博文、liumang361的博文
先看圖
代碼：
<!DOCTYPE html> <html lang="en" ng-app="myApp"> <head> <meta charset="UTF-8"> <title>Document</title> <link rel="stylesheet" href="http://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.css"> <script src="http://cdn.bootcss.com/angular.js/1.5.8/angular.js"></script> <script src="http://cdn.bootcss.com/angular-ui-bootstrap/2.2.0/ui-bootstrap-tpls.js"></script> <script src="https://cdn.bootcss.com/angular-i18n/1.5.8/angular-locale_zh-cn.js"></script> <script> angular.module('myApp',['ui.bootstrap']) .controller('myCtrl',function($scope,$timeout){ //下拉列表的數據 $scope.formats=['dd-MMMM-yyyy', 'yyyy/MM/dd', 'dd.MM.yyyy', 'shortDate'] $scope.format=$scope.formats[1]; //datepickerpopup的數據 $scope.today=new Date(); $scope.dt1; $scope.dt2; $scope.altInputFormats=['yyyy/M!/d!','yyyy.M!.d!','yyyy M! d!'];//手動輸入支持的格式 $scope.datepickerOptions1={ maxDate:$scope.dt2, startingDay:1 }; $scope.datepickerOptions2={ minDate:$scope.dt1, maxDate:$scope.today, startingDay:1 }; //打開popup $scope.pop1={ opened:false }; $scope.pop2={ opened:false }; $scope.openpop1=function(){ $scope.pop1.opened=true; }; $scope.openpop2=function(){ $scope.pop2.opened=true; }; //監聽dt1 和dt2 如果dt1 變化就設置 datepickeroptions.mindate就變化 $scope.$watch('dt1',function(newValue,oldValue){ $scope.datepickerOptions2.minDate=newValue; }); $scope.$watch('dt2',function(newValue,oldValue){ $scope.datepickerOptions1.maxDate=newValue; }); /*手動輸入限制 使用表單驗證 *datepicker輸入限制 使用maxDate minDate *startPopup 最小時間 沒有限制 最大時間 endTime *endPopup 最小時間 startTime 最大時間 today */ }) </script> </head> <body ng-controller="myCtrl"> <div class="row"> <div class="col-xs-6"> <p class="input-group"> <input type="text" class="form-control" uib-datepicker-popup="{{format}}" ng-model="dt1" is-open="pop1.opened" ng-required="true" close-text="關閉" clear-text="清空" current-text="今天" alt-input-formats="altInputFormats" datepicker-options="datepickerOptions1"/> <span class="input-group-btn"> <button class="btn btn-default" ng-click="openpop1()"><i class="glyphicon glyphicon-calendar"></i></button> </span> </p> </div> <div class="col-xs-6"> <p class="input-group"> <input type="text" class="form-control" uib-datepicker-popup="{{format}}" ng-model="dt2" is-open="pop2.opened" ng-required="true" close-text="關閉" clear-text="清空" current-text="今天" alt-input-formats="altInputFormats" datepicker-options="datepickerOptions2"/> <span class="input-group-btn"> <button class="btn btn-default" ng-click="openpop2()"><i class="glyphicon glyphicon-calendar"></i></button> </span> </p> </div> </div> <div class="row"> <div class="col-xs-6"> <select name="" id="" class="form-control" ng-model="format" ng-options="item for item in formats"></select> </div> </div> </body> </html>
老夫的demo還有一點小問題
1、就是開始日期第一次選取的時候最大的選取時間是today然后在today前面選取
2、手動輸入限制還沒有完善
有知道怎么寫的小伙伴，歡迎留言