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时间限制选取的更多相关文章
- 全面剖析 <input> 标签 ------ HTML\HTML5
<input>标签因其形式多样.功能强大,当之无愧成为了WEB前端开发人员最钟爱的元素之一.下面就来对<input>做一个全面的剖析: 标签定义: <input> ...
- Parquet与ORC：高性能列式存储格式(收藏)
背景 随着大数据时代的到来,越来越多的数据流向了Hadoop生态圈,同时对于能够快速的从TB甚至PB级别的数据中获取有价值的数据对于一个产品和公司来说更加重要,在Hadoop生态圈的快速发展过程中,涌 ...
- Windows 8.1 应用再出发 - 几种新增控件（1）
Windows 8.1 新增的一些控件,分别是:AppBar.CommandBar.DatePicker.TimePicker.Flyout.MenuFlyout.SettingsFlyout.Hub ...
- P2P通信标准协议(一)之STUN
前一段时间在P2P通信原理与实现中介绍了P2P打洞的基本原理和方法,我们可以根据其原理为自己的网络程序设计一套通信规则, 当然如果这套程序只有自己在使用是没什么问题的.可是在现实生活中,我们的程序往往 ...
- linux loadavg详解（top cpu load）
目录 [隐藏] 1 Loadavg分析 1.1 Loadavg浅述 1.2 Loadavg读取 1.3 Loadavg和进程之间的关系 1.4 Loadavg采样 2 18内核计算loadavg存在的 ...
- java开发经验分享（三）
三. 项目开发 1. 需求: 1) 需求最终需要开发人员在产品中实现,开发不合理的设计会浪费时间,开发技术无法实现的设计带来最大的痛苦:失败.所以,开发人员要重视需求以及需求评审,提出自己能够想到的所 ...
- mktime性能问题调查
一.问题提出 会议中有同学提到使用mktime遇到一些问题: 1) 设置tm_isdst后速度很慢 2) 设置TZ环境变量提速极大 所以想调查下具体情况. mktime真的这么慢?如果是,为什么? ...
- 分布式锁与实现(一)——基于Redis实现
概述 目前几乎很多大型网站及应用都是分布式部署的,分布式场景中的数据一致性问题一直是一个比较重要的话题.分布式的CAP理论告诉我们"任何一个分布式系统都无法同时满足一致性(Consisten ...
- 分布式锁与实现(一)——基于Redis实现 【比较靠谱】
转: 分布式锁与实现(一)——基于Redis实现 概述 目前几乎很多大型网站及应用都是分布式部署的,分布式场景中的数据一致性问题一直是一个比较重要的话题.分布式的CAP理论告诉我们“任何一个分布式系统 ...
随机推荐
- .net core 2.0学习笔记（六）：Remoting核心类库RealProxy迁移
在学习.net core的过程中,我们已经明确被告知,Remoting将不会被支持.官方的解释是,.net framework 类型包含了太多的Runtime的内容,是一个非常重量级的服务实现,已被确 ...
- php Yii2使用registerJs或registerCss报错syntax error, unexpected end of file
解决方法: 注册时$js=<<<JS .....JS;//结尾处JS;应单独成行并且没有空格 JS;//这样就会报错,多了空格JS;//这样就不会
- Java中面向字符的输入流
Java中面向字符的输入流 2016-12-04 Java程序员联盟 Java程序员联盟 Java程序员联盟 微信号 javalm 功能介绍 莫道君行早,更有早行人 全心敲代码,天道自酬勤 字符流是针 ...
- JDK+Tomcat搭建JSP运行环境--JSP基础
一.搭建JSP运行环境之前需要了解的基本知识 配置JSP运行环境之前,我们需要了解JSP的运行机制.只有了解JSP运行机制后,我们才能知道为什么要搭建JSP运行环境?如何去搭建JSP运行环境?为什么要 ...
- HTML+CSS画一朵向日葵
前几天看到一张图片,倔强的向日葵.(BGM,<倔强>) 看着挺有感触,就想用CSS做一个向日葵. 最终效果图如下: 主要的难点就在花瓣的处理上,css暂时没有做到这样的尖角圆弧. 我想到的 ...
- C# 异步编程1 APM模式异步程序开发
C#已有10多年历史,单从微软2年一版的更新进度来看活力异常旺盛,C#中的异步编程也经历了多个版本的演化,从今天起着手写一个系列博文,记录一下C#中的异步编程的发展历程.广告一下:喜欢我文章的朋友,请 ...
- PHP常量定义define与const
一.const PHP5.3以前,const只能在类内部声明变量,5.3+允许在外部声明变量,但还不能使用常量计算! const ONE = 1; const WORD = 'hello world' ...
- Java8 Stream简介
Stream是Java 8新增的重要特性, 它提供函数式编程支持并允许以管道方式操作集合. 流操作会遍历数据源, 使用管道式操作处理数据后生成结果集合, 这个过程通常不会对数据源造成影响. lambd ...
- [转载]浏览器事件window.onload、onfocus、onblur、ons
原文地址:浏览器事件window.onload.onfocus.onblur.onscroll和resize作者:lilyxiao <html> <head> <titl ...
- 团队作业6——展示博客（Alpha版本）
Deadline: 2017-5-7 22:00PM,以博客发表日期为准 评分基准: 按时交 - 有分,检查的项目包括后文的四个方面 团队成员介绍 Alpha阶段进展 团队合作,各成员分工 Beta阶 ...