使用popup组件的过程中遇到时间选取的问题

官方文档大致说使用date和mode 可以解决，奈何老夫是看不懂，写的时候参考的有 官方文档、echo2016的博文、liumang361的博文

先看图

代码：

  1. <!DOCTYPE html>
  2. <html lang="en" ng-app="myApp">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Document</title>
  6.     <link rel="stylesheet" href="http://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.css">
  7.     <script src="http://cdn.bootcss.com/angular.js/1.5.8/angular.js"></script>
  8.     <script src="http://cdn.bootcss.com/angular-ui-bootstrap/2.2.0/ui-bootstrap-tpls.js"></script>
  9.     <script src="https://cdn.bootcss.com/angular-i18n/1.5.8/angular-locale_zh-cn.js"></script>
  10.     <script>
  11.         angular.module('myApp',['ui.bootstrap'])
  12.         .controller('myCtrl',function($scope,$timeout){
  13.  
  14.             //下拉列表的数据
  15.             $scope.formats=['dd-MMMM-yyyy', 'yyyy/MM/dd', 'dd.MM.yyyy', 'shortDate']
  16.             $scope.format=$scope.formats[1];
  17.             //datepickerpopup的数据
  18.             $scope.today=new Date();
  19.             $scope.dt1;
  20.             $scope.dt2;
  21.             $scope.altInputFormats=['yyyy/M!/d!','yyyy.M!.d!','yyyy M! d!'];//手动输入支持的格式
  22.             $scope.datepickerOptions1={
  23.                 maxDate:$scope.dt2,
  24.                 startingDay:1
  25.             };
  26.             $scope.datepickerOptions2={
  27.                 minDate:$scope.dt1,
  28.                 maxDate:$scope.today,
  29.                 startingDay:1
  30.             };
  31.             //打开popup
  32.             $scope.pop1={
  33.                 opened:false
  34.             };
  35.             $scope.pop2={
  36.                 opened:false
  37.             };
  38.             $scope.openpop1=function(){
  39.                 $scope.pop1.opened=true;
  40.             };
  41.             $scope.openpop2=function(){
  42.                 $scope.pop2.opened=true;
  43.             };
  44.  
  45.             //监听dt1 和dt2 如果dt1 变化就设置 datepickeroptions.mindate就变化
  46.  
  47.             $scope.$watch('dt1',function(newValue,oldValue){
  48.                 $scope.datepickerOptions2.minDate=newValue;
  49.             });
  50.             $scope.$watch('dt2',function(newValue,oldValue){
  51.                 $scope.datepickerOptions1.maxDate=newValue;
  52.             });
  53.             /*手动输入限制 使用表单验证
  54.             *datepicker输入限制 使用maxDate minDate
  55.             *startPopup   最小时间  没有限制 最大时间 endTime
  56.             *endPopup 最小时间 startTime 最大时间 today
  57.             */
  58.         })
  59.     </script>
  60. </head>
  61. <body ng-controller="myCtrl">
  62.  
  63.     <div class="row">
  64.         <div class="col-xs-6">
  65.             <p class="input-group">
  66.                 <input type="text" class="form-control" uib-datepicker-popup="{{format}}" ng-model="dt1" is-open="pop1.opened"
  67.                      ng-required="true" close-text="关闭" clear-text="清空" current-text="今天" alt-input-formats="altInputFormats" datepicker-options="datepickerOptions1"/>
  68.                 <span class="input-group-btn">
  69.                     <button class="btn btn-default" ng-click="openpop1()"><i class="glyphicon  glyphicon-calendar"></i></button>
  70.                 </span>
  71.             </p>
  72.         </div>
  73.         <div class="col-xs-6">
  74.             <p class="input-group">
  75.                 <input type="text" class="form-control" uib-datepicker-popup="{{format}}" ng-model="dt2" is-open="pop2.opened"
  76.                      ng-required="true" close-text="关闭" clear-text="清空" current-text="今天" alt-input-formats="altInputFormats" datepicker-options="datepickerOptions2"/>
  77.                 <span class="input-group-btn">
  78.                     <button class="btn btn-default" ng-click="openpop2()"><i class="glyphicon  glyphicon-calendar"></i></button>
  79.                 </span>
  80.             </p>
  81.         </div>
  82.     </div>
  83.     <div class="row">
  84.         <div class="col-xs-6">
  85.             <select name="" id="" class="form-control" ng-model="format" ng-options="item for item in formats"></select>
  86.         </div>
  87.     </div>
  88. </body>
  89. </html>

老夫的demo还有一点小问题

1、就是开始日期第一次选取的时候最大的选取时间是today然后在today前面选取

2、手动输入限制还没有完善

有知道怎么写的小伙伴，欢迎留言

datepickerpopup时间限制选取的更多相关文章

  1. 全面剖析 <input> 标签 ------ HTML\HTML5

    <input>标签因其形式多样.功能强大,当之无愧成为了WEB前端开发人员最钟爱的元素之一.下面就来对<input>做一个全面的剖析: 标签定义: <input> ...

  2. Parquet与ORC：高性能列式存储格式(收藏)

    背景 随着大数据时代的到来,越来越多的数据流向了Hadoop生态圈,同时对于能够快速的从TB甚至PB级别的数据中获取有价值的数据对于一个产品和公司来说更加重要,在Hadoop生态圈的快速发展过程中,涌 ...

  3. Windows 8.1 应用再出发 - 几种新增控件（1）

    Windows 8.1 新增的一些控件,分别是:AppBar.CommandBar.DatePicker.TimePicker.Flyout.MenuFlyout.SettingsFlyout.Hub ...

  4. P2P通信标准协议(一)之STUN

    前一段时间在P2P通信原理与实现中介绍了P2P打洞的基本原理和方法,我们可以根据其原理为自己的网络程序设计一套通信规则, 当然如果这套程序只有自己在使用是没什么问题的.可是在现实生活中,我们的程序往往 ...

  5. linux loadavg详解（top cpu load）

    目录 [隐藏] 1 Loadavg分析 1.1 Loadavg浅述 1.2 Loadavg读取 1.3 Loadavg和进程之间的关系 1.4 Loadavg采样 2 18内核计算loadavg存在的 ...

  6. java开发经验分享（三）

    三. 项目开发 1. 需求: 1) 需求最终需要开发人员在产品中实现,开发不合理的设计会浪费时间,开发技术无法实现的设计带来最大的痛苦:失败.所以,开发人员要重视需求以及需求评审,提出自己能够想到的所 ...

  7. mktime性能问题调查

    一.问题提出 会议中有同学提到使用mktime遇到一些问题: 1) 设置tm_isdst后速度很慢 2) 设置TZ环境变量提速极大 所以想调查下具体情况.   mktime真的这么慢?如果是,为什么? ...

  8. 分布式锁与实现(一)——基于Redis实现

    概述 目前几乎很多大型网站及应用都是分布式部署的,分布式场景中的数据一致性问题一直是一个比较重要的话题.分布式的CAP理论告诉我们"任何一个分布式系统都无法同时满足一致性(Consisten ...

  9. 分布式锁与实现(一)——基于Redis实现 【比较靠谱】

    转: 分布式锁与实现(一)——基于Redis实现 概述 目前几乎很多大型网站及应用都是分布式部署的,分布式场景中的数据一致性问题一直是一个比较重要的话题.分布式的CAP理论告诉我们“任何一个分布式系统 ...

随机推荐

  1. myeclipse db browser 新建数据源

    Myeclipse 新建数据源 一.打开myeclipse(打开了当我没说) 二.在window选项中找到show view ,点击other,输入db,选择DB Browser 三.在DB Brow ...

  2. 通过 PHP 连接China Azure Blob 存储

    问题说明 Azure Blob 存储是一种将非结构化数据作为对象/Blob存储在云中的服务.Blob存储可以存储任何类型的文本或二进制数据,例如文档.媒体文件或应用程序安装程序.Blob存储也称为对象 ...

  3. SSE图像算法优化系列十一：使用FFT变换实现图像卷积。

    本文重点主要不在于FFT的SSE优化,而在于使用FFT实现快速卷积的相关技巧和过程. 关于FFT变换,有很多参考的代码,特别是对于长度为2的整数次幂的序列,实现起来也是非常简易的,而对于非2次幂的序列 ...

  4. JS中的循环结构

    [循环结构的执行步骤]1.声明循环变量:2.判断循环条件3.执行循环体操作4.更新循环变量然后循环执行2-4,直到条件不成立时,跳出循环.while循环()中的表达式,运算结果可以是各种类型,但是最终 ...

  5. java基础解析系列(四)---LinkedHashMap的原理及LRU算法的实现

    java基础解析系列(四)---LinkedHashMap的原理及LRU算法的实现 java基础解析系列(一)---String.StringBuffer.StringBuilder java基础解析 ...

  6. window的设置属性

    1.windowAnimationStyle 用于设置一组window动画的引用style资源,window的动画属性由R.styleable.WindowAnimation定义. Winow动画类属 ...

  7. H - transaction transaction transaction

    https://vjudge.net/contest/184514#problem/H 题意: 一个商人为了赚钱,在城市之间倒卖商品.有n个城市,每个城市之间有且只有一条无向边连通.给出n个城市的货物 ...

  8. xcode模拟器不显示键盘解决方案

    当我们使用Xcode进行开发的时候,并不是所有的时候都需要将代码运行在iPhone,有时候模拟器就可以解决这些问题, 但是当你使用模拟器的时候会发现,在TextFiled中输入信息时,如果你是用模拟器 ...

  9. error: The requested URL returned error: 401 Unauthorized while accessing

    我遇到的其中一个问题. 问题描述: 在git push -u origin master是,提示“error: The requested URL returned error: 401 Unauth ...

  10. NHibernate教程(13)--立即加载

    本节内容 引入 立即加载 实例分析 1.一对多关系实例 2.多对多关系实例 结语 引入 通过上一篇的介绍,我们知道了NHibernate中默认的加载机制--延迟加载.其本质就是使用GoF23中代理模式 ...