datepickerpopup时间限制选取
Posted tonghaolang
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了datepickerpopup时间限制选取相关的知识，希望对你有一定的参考价值。
使用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、手动输入限制还没有完善
有知道怎么写的小伙伴，欢迎留言
以上是关于datepickerpopup时间限制选取的主要内容，如果未能解决你的问题，请参考以下文章