angularjs之ui-bootstrap的Datepicker Popup实现双日期选择控件

最开始使用ui-bootstrap的Datepicker Popup日期选择插件实现双日期选择时间范围时，在网上搜了一些通过JS去实现的方法，不过后来发现可以不必通过JS去处理，只需要使用其自身的属性和参数即可实现，效果如下图(一截图就不显示鼠标的红色圆圈不可选的样式了。。。尴尬)：

这里先附上我觉得简单易懂的JS实现方法，大家可以看看实现的原理：

以下代码就是最开始网上搜索的简单易懂的：http://www.cnblogs.com/tonghaolang/p/5972676.html

<!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>

    <style type="text/css">

        .uib-datepicker-popup.dropdown-menu .uib-daypicker{

            outline: none;

        }

    </style>

    <script>

        angular.module('myApp',['ui.bootstrap'])

        .controller('myCtrl',function($scope){

            $scope.dt1;

            $scope.dt2;

            $scope.datepickerOptions1={

                maxDate:$scope.dt2,

                showWeeks:false,

                startingDay:1

            };

            $scope.datepickerOptions2={

                minDate:$scope.dt1,

                showWeeks:false,

                startingDay:1

            };

            //打开popup

            $scope.pop1={

                opened:false

            };

            $scope.pop2={

                opened:false

            };

            $scope.openpop1=function(){

                $scope.pop1.opened=!$scope.pop1.opened;

            };

            $scope.openpop2=function(){

                $scope.pop2.opened=!$scope.pop2.opened;

            };

            //监听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-2">上架时间:</div>

        <div class="col-xs-4">

            <p class="input-group">

                <input type="text" class="form-control" uib-datepicker-popup="yyyy-MM-dd" ng-model="dt1" is-open="pop1.opened"

                     ng-required="true" close-text="关闭" clear-text="清空" current-text="今天" datepicker-options="datepickerOptions1" ng-click="openpop1()"/>

                <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-2">下架时间:</div>

        <div class="col-xs-4">

            <p class="input-group">

                <input type="text" class="form-control" uib-datepicker-popup="yyyy-MM-dd" ng-model="dt2" is-open="pop2.opened"

                     ng-required="true" close-text="关闭" clear-text="清空" current-text="今天" datepicker-options="datepickerOptions2" ng-click="openpop2()"/>

                <span class="input-group-btn">

                    <button class="btn btn-default" ng-click="openpop2()"><i class="glyphicon  glyphicon-calendar"></i></button>

                </span>

            </p>

        </div>

    </div>

</body>

</html>

以上可以实现下架时间不能小于上架时间，上架时间不能大于下架时间。

但是在项目里，很多页面都要使用，虽然可以定义在自定义指令里，可如果遇到后台的开始日期和结束日期两个字段和其他页面的不同，那就要加一层处理了。所以还是觉得麻烦。

后来发现可以不用JS，使用其自身的属性和参数即可实现。下面具体说实现的具体属性：

datepicker-options：对，就是这个属性，他里面有很多的参数，因为ui-bootstrap的Datepicker Popup是Datepicker的扩展，所以uib-datepicker-popup可以使用Datepicker的配置，也就是datepicker-options，是一个Json对象，可以设置的项有：

键	默认值	备注
customClass		一个可选的函数，设置日期面板中每个日期的样式。传入参数为一个json对象{date: obj1, mode: obj2}，返回值为类的名字
dateDisabled		一个可选的函数，设置日期面板中每个日期是否可选。传入参数为一个json对象{date: obj1, mode: obj2}，返回值为bool类型
datepickerMode	day	可设置为day,month,year。表示控件的选择模式
formatDay	dd	天数的格式化形式
formatMonth	MMMM	月份的格式化形式
formatYear	yyyy	年份的格式化形式
formatDayHeader	EEE	星期的格式化形式
formatDayTitle	MMMM yyyy	按天数选择日期时，面板中当前月份和年份的格式化形式（显示为：六月 2016 的地方）
formatMonthTitle	yyyy	按月份选择日期时，面板中当前年份的格式化形式
initDate	null	初始化日期
maxDate	null	可选择的最大日期（必须是Javascript日期类型）
maxMode	year	可选择的最大日期模式
minDate	null	可选择的最小日期（必须是Javascript日期类型）
minMode	day	可选择的最小日期模式
shortcutPropagation	false	是否禁用键盘事件传播
showWeeks	true	是否显示面板中的日期是当年的第几周
startingDay	$locale.DATETIME_FORMATS.FIRSTDAYOFWEEK	一个星期从周几开始。可设置为0到6的数字，0表示周日，6表示周六
yearRows	4	选择年份时显示多少行
yearColumns	5	选择年份时显示多少列

而我们这里用到的就是minDate和maxDate两个参数；

下面附上实现的代码：

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Document</title>

    <link href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">

    <link href="lib/font-awesome-4.7.0/css/font-awesome.min.css">

    <script src="lib/angular1.6.1.js"></script>

    <script src="lib/ui-bootstrap-tpls-2.3.2.js"></script>

    <script src="lib/angular-locale_zh-cn.js"></script>

    <style>

        .container{

            margin-top: 50px;

        }

        .uib-datepicker-popup.dropdown-menu .uib-daypicker{

            outline: none;

        }

    </style>

</head>

<body>

    <div ng-app="myApp" ng-controller="myCtrl">

        <div class="container">

            <div class="row">

              <div class="col-md-4">上架日期：

                <p class="input-group">

                  <input type="text" class="form-control" uib-datepicker-popup="yyyy-MM-dd" ng-model="startTime" is-open="open1" datepicker-options="{maxDate:(endTime),showWeeks:false}" ng-required="true" clear-text="清空" current-text="今天" close-text="取消" alt-input-formats="altInputFormats" ng-click="open1=!open1"/>

                  <span class="input-group-btn">

                    <button type="button" class="btn btn-default" ng-click="open1=!open1"><i class="glyphicon glyphicon-calendar"></i></button>

                  </span>

                </p>

              </div>

              <div class="col-md-4">下架日期：

                <p class="input-group">

                  <input type="text" class="form-control" uib-datepicker-popup="yyyy-MM-dd" ng-model="endTime" is-open="open2" datepicker-options="{minDate:(startTime),showWeeks:false}" ng-required="true" clear-text="清空" current-text="今天" close-text="取消"  ng-click="open2=!open2"/>

                  <span class="input-group-btn">

                    <button type="button" class="btn btn-default" ng-click="open2=!open2"><i class="glyphicon glyphicon-calendar"></i></button>

                  </span>

                </p>

              </div>

            </div>

        </div>

    </div>

    <script type="text/javascript">

        angular.module('myApp',['ui.bootstrap'])

        .controller('myCtrl',function ($scope) {

        })

    </script>

</body>

</html>

对，正如你所见。。。完全不用在JS里写任何代码来控制，只需要设置datepicker-options="{maxDate:(endTime),showWeeks:false}"和datepicker-options="{minDate:(endTime),showWeeks:false}"里面的showWeeks:false是表示不显示周数，可以看上面的具体参数介绍。

下面说一下具体实现的原理：

<div class="col-md-4">上架日期：

<p class="input-group">

  <input type="text" class="form-control" uib-datepicker-popup="yyyy-MM-dd" ng-model="startTime" is-open="open1" datepicker-options="{maxDate:(endTime),showWeeks:false}" ng-required="true" clear-text="清空" current-text="今天" close-text="取消" alt-input-formats="altInputFormats" ng-click="open1=!open1"/>

  <span class="input-group-btn">

    <button type="button" class="btn btn-default" ng-click="open1=!open1"><i class="glyphicon glyphicon-calendar"></i></button>

  </span>

</p>

</div>

<div class="col-md-4">下架日期：

<p class="input-group">

  <input type="text" class="form-control" uib-datepicker-popup="yyyy-MM-dd" ng-model="endTime" is-open="open2" datepicker-options="{minDate:(startTime),showWeeks:false}" ng-required="true" clear-text="清空" current-text="今天" close-text="取消"  ng-click="open2=!open2"/>

  <span class="input-group-btn">

    <button type="button" class="btn btn-default" ng-click="open2=!open2"><i class="glyphicon glyphicon-calendar"></i></button>

  </span>

</p>

</div>

<input type="text" class="form-control" uib-datepicker-popup="yyyy-MM-dd" ng-model="startTime" is-open="open1" datepicker-options="{maxDate:(endTime),showWeeks:false}" 
ng-required="true" clear-text="清空" current-text="今天" close-text="取消" alt-input-formats="altInputFormats" ng-click="open1=!open1"/>

uib-datepicker-popup="yyyy-MM-dd": 就是设置其日期显示的格式了，这个属性是必须有的，值默认就是yy-MM-dd，不然插件就不能用了哈，下面会附上uib-datepicker-popup的所有参数介绍。
ng-model="startTime": 这就是绑定的开始日期，有输入其startTime就会改变，你知道的。。。
is-open="open1": is-open为true时，会显示日期选择界面，为false则隐藏，后面是通过ng-click来改变这个open1的，可以看后面。
datepicker-options="{maxDate:(endTime),showWeeks:false}": 这就是说的关键了，里面的maxDate就是可以选择的最大日期了，如果是minDate的话，就是能选择的最小日期，你懂的。。。后面的showWeeks控制是否显示周数。
clear-text="清空" current-text="今天" close-text="取消": 你引用了angular-locale_zh-cn.js的话，这里设置了，原来的today、clear和close就会变成你设置的中文了。
ng-click="open1=!open1": 这里就是前面说的，控制is-open的true和false了，最开始angular里是没有定义open1的，所以自然是false了，当我们点击后，给open1赋值为!open1，open1就是true了，

我这么理解的，具体正确不，就不知道了。。。

所以当你第一个日期选择了后，第二个日期的minDate就已经设置好了，是不能选择比它小的日期的，相反，如果你第二个日期也选择好了，那么第一个日期的maxDate就已经设置好了，所以第一个日期就不能大于第二个日期了。
第一个的maxDate参数的值就是第二个日期选择的时间，第二个日期的minDate参数的值就是第一个日期选择的时间，这样应该能理解了吧。。。

上面说到了uib-datepicker-popup，它支持多种格式化方式
这里就不多说了，具体可以看pilixiami博主的http://www.cnblogs.com/pilixiami/p/5611346.html对了，之前在项目里遇到了通过该插件获取的时间传给后台查询数据，会出现日期有差别，应该是时区的原因，所以大家要注意了，这里选择的日期是一个对象，你可以输出看看，
传到后台的时候，最后面的一个字母Z就是影响时区的了，网上有说将其换成UTC的，因为我们当时后台接收的是字符串如：2017-08-08，所以我在JS里使用的过滤器$filter('date')($scope.startTime, 'yyyy-MM-dd')，
将选择的时间转换为字符串2017-08-08的格式，所以，那个时区就没具体的去研究处理了

好了，上面的可以在任意页面使用了，而且不用在JS里做任何处理哦。。。后面发现有BUG会持续更新的。

angularjs之ui-bootstrap的Datepicker Popup实现双日期选择控件的更多相关文章

angularjs之ui-bootstrap的Datepicker Popup不使用JS实现双日期选择控件
最开始使用ui-bootstrap的Datepicker Popup日期选择插件实现双日期选择时间范围时,在网上搜了一些通过JS去实现的方法,不过后来发现可以不必通过JS去处理,只需要使用其自身的属性 ...
JQuery好用的日期选择控件 DatePicker
近期发现一个很好的基于JQ的前端UI日期选择控件Jquery.DatePicker.js 下载地址:jquery.DatePIcker.js 演示地址:DatePicker - 基于jQuery 1. ...
页面日期选择控件--jquery ui datepicker 插件
日期选择插件Datepicker是一个配置灵活的插件,我们可以自定义其展示方式,包括日期格式.语言.限制选择日期范围.添加相关按钮以及其它导航等.官方地址:http://docs.jquery.com ...
【MVC5】日期选择控件DatePicker
项目中使用了Bootstrap,日期控件就选择了依赖于bootstrap的DatePicker. 在App_Start\BundleConfig.cs中引用css和js文件: bundles.Add( ...
动态创建的文本框想要加上jQuery的datepicker功能变成日期选择控件该怎么办？
通常页面输入控件想得到日期选择功能,借助jQuery是这样实现的: 1.载入css和js <script src="jqueryui/jquery-ui.js" type=& ...
分享一个很好用的日期选择控件datepicker 使用方法分享
很多同学在做网站的时候,有时候需要用户选择日期,年月日这些的,以前我也在用一个,但是那个的界面都不太好看,于是找啊找,找啊找,找到一个好东西,就是这个,datepicker,是jquery.ui里面的 ...
Atitit.ui控件---下拉菜单选择控件的实现select html
Atitit.ui控件---下拉菜单选择控件的实现select html 1. 调用& model的实现 1 2. -----select.jsp------ 1 1. 调用& m ...
bootstrap-datetimepicker：基于twitter bootstrap的日期/时间选择控件
bootstrap-datetimepicker是一个基于twitter bootstrap的简单日期/时间选择控件. <!DOCTYPE HTML> <html> <h ...
bootstrap之双日历时间段选择控件示例—daterangepicker(汉化版)
效果图: 参考代码: <link href="/public/static/common/css/daterangepicker.min.css?ver=0.6" rel=& ...

随机推荐

九天学会Java，第一天，变量和数据类型，赋值和输出
用9天入门三门编程语言,有可能嘛,尤其是对没有基础的同学来说?对于想学好的编程的人来说,无论从哪一门语言开始入手,语言的本身其实并不是我们最应该的关心的,至少不是作为一个初学者首先关心的. 网络上,网 ...
鸟瞰spring
一.spring框架概述: Spring框架主要提供了Ioc容器.AOP.数据访问.Web开发.消息.测试等相关技术的支持. 1.Spring的模块 1)核心容器 Spring-Core:核心工具类, ...
MyEclipse 2014各种优化设置
各种优化大整合,陆续更新使用中的问题,也欢迎大家提问. 1.通用优化设置:字体,UTF-8编码格式设置: http://jingyan.baidu.com/article/b907e627d2c5da ...
微信H5支付：网络环境未能通过安全验证，请稍后再试。解决办法（PHP版）
前(tu)言(cao) (这段前言纯属吐槽,着急解决问题的小伙伴,赶紧看正文吧) 最近做了支付宝和微信支付,先做的是PC端网站的支付,就是出个二维码,然后手机扫描支付,当然支付宝在扫码页面支持登录支付 ...
手工删除crfclust.bdb文件
环境:RHEL 6.5 + Oracle 11.2.0.4 RAC 现象:巡检发现自己的测试环境节点2的空间使用率过高,进一步查询,发现大文件是GI目录下crfclust.bdb文件. crfclus ...
七字真言解读TCP三次握手
三次握手所谓的"三次握手"即对每次发送的数据量是怎样跟踪进行协商使的发送和接收同步,根据所接收到的数据量而确定的数据确认数及数据发送.接收完毕后何时撤消联系,并建立虚连接. 一.七 ...
markdown常用语法教程
1. 标题总共六级标题,"#"号后面最好加空格,美观可以在后面加上对应数量的"#" # 一级标题 ## 二级标题 ### 三级标题 #### 四级标题 ### ...
[转]Java7中的ForkJoin并发框架初探（中）——JDK中实现简要分析
详见: http://blog.yemou.net/article/query/info/tytfjhfascvhzxcytp85 根据前文描述的Doug Lea的理论基础,在JDK1.7中已经给 ...
Java企业微信开发_09_身份验证之移动端网页授权(有完整项目源码)
注: 源码已上传github: https://github.com/shirayner/WeiXin_QiYe_Demo 一.本节要点 1.1 授权回调域(可信域名) 在开始使用网页授权之前,需要先 ...
JS中的事件&对象
一.JS中的事件 (一)JS中的事件分类 1.鼠标事件 click/dblclick/onmouseover/onmouseout 2.HTML事件 onload/onscroll/onsubmit/ ...

angularjs之ui-bootstrap的Datepicker Popup实现双日期选择控件

angularjs之ui-bootstrap的Datepicker Popup实现双日期选择控件的更多相关文章

随机推荐

热门专题