使用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时间限制选取的更多相关文章

  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. 9.19.1 反射构造Class对象

    构造Class对象的三种方式:         第一种方式:                     (1)对于系统的类,必须写全名!                     (2)该方式会将.Cla ...

  2. Windows权限提升基础知识和命令

    介绍 这篇文章是介绍window的权限提升,虽然不是一个全面的指南,但会试图覆盖主要的技术,常用的资源列表在文章底部,可供大家参考. window权限提升基础知识 初始信息收集 在开始提权之前,我们需 ...

  3. MySQL(一)之MySQL简介与安装

    大家可能都在用MySQL,其实我也是在用MySQL的,但是你知道吗?大部分人都是在windows中使用,这里将介绍一下在windows中的安装分为安装包安装与MSI包安装,以及在linux中的在线安装 ...

  4. css:box-sizing什么作用

    css3 box-sizing属性 box-sizing属性可以为三个值之一:content-box(default),border-box,padding-box. content-box,bord ...

  5. js函数防抖、节流实现

    防抖 Debounce 函数防抖就是,延迟一段时间再执行函数,如果这段时间内又触发了该函数,则延迟重新计算: // 简单实现 function debounce(fn, wait) { let t r ...

  6. 基于C语言的UTF-8中英文替换密码设计

    简要说明 本设计为湖南大学密码学的一次课程作业设计.非作业目的可随意引用. 由于本人初次接触密码学,本设计可能存在问题以及漏洞.若发现望指出. GitHub : https://github.com/ ...

  7. (四)Lua脚本语言入门

    这篇文章就当成铺垫型的文章,写着写着发现有好多想写的,,关于C#与Java,当然作为铺垫肯定与Lua的下部分介绍有关..... 对于"泛型",先看C#中"泛型" ...

  8. 201521123034《Java程序设计》第七周学习总结

    1. 本周学习总结 以你喜欢的方式(思维导图或其他)归纳总结集合相关内容. 2. 书面作业 ArrayList代码分析 1.1 解释ArrayList的contains源代码 答:从ArrayList ...

  9. 201521123019 《Java程序设计》第5周学习总结

    1. 本章学习总结 2. 书面作业 一.代码阅读:Child压缩包内源代码 1.1 com.parent包中Child.java文件能否编译通过?哪句会出现错误?试改正该错误.并分析输出结果. Ans ...

  10. 201521123075 《Java程序设计》第4周学习总结

    1. 本周学习总结 1.1 尝试使用思维导图总结有关继承的知识点. 1.2 使用常规方法总结其他上课内容. - 了解了多态就是以单一的接口操作多种类型的对象,但是对多态和继承的关系还是有点混乱. - ...