使用angular框架的时候,之前用的时间控件是引入My97DatePicker组件实现的,但是因为

1.My97DatePicker样式不太好看以及偶尔会出现底部被遮盖的情况、点击不可编辑input框使用backspace按钮会出现格式不符合问题

2.angular-bootstrap 自带兼容第三方ui-date,并且是基于bootstrap改造的

所以决定调研ui-date是否符合产品需求:

条件1.开始时间和结束时间之间有某种关系:开始时间可范围最大值不超过结束时间值,结束时间可选最小值不小于开始时间值

条件2.有选择今天日期按钮

条件3.不能有清除日期按钮

条件4.必须汉化

在引入该文件的时候,angular版本是1.5.0,angular-ui-bootstrap版本是1.1.2,修改代码后为

 <p class="input-group">
<input type="text" class="form-control" uib-datepicker-popup readonly ng-model="dicQueryObj.startTime" is-open="startPopupOpened" min-date="minStartDate" max-date="maxStartDate" datepicker-options="dateOptions" ng-required="true" close-text="关闭" current-text="今天"/>
<span class="input-group-btn">
  <button type="button" class="btn btn-default" ng-click="startOpen()"><i class="glyphicon glyphicon-calendar"></i></button>
</span>
</p>
 <p class="input-group">
<input type="text" class="form-control" uib-datepicker-popup readonly ng-model="dicQueryObj.endTime" is-open="endPopupOpened" min-date="minEndDate" max-date="maxEndDate" datepicker-options="dateOptions" ng-required="true" close-text="关闭" current-text="今天" />
<span class="input-group-btn">
<button type="button" class="btn btn-default" ng-click="endOpen()"><i class="glyphicon glyphicon-calendar"></i></button>
</span>
</p>
//初始化查询条件
$scope.dicQueryObj = {
fileName: '',
startTime:new Date(CommonServ.getLastMonthDate()),
endTime: new Date(CommonServ.getCurDate()),
order: '0'
};
//时间选择器配置
$scope.minStartDate = 0; //开始时间的最小时间
$scope.maxStartDate = $scope.dicQueryObj.endTime; //开始时间的最大可选时间
$scope.minEndDate = $scope.dicQueryObj.startTime; //结束时间的最小可选时间要大于开始时间的设定值
$scope.maxEndDate = $scope.dicQueryObj.endTime; //结束时间的最大可选择时间不超过结束时间的设定值 $scope.$watch('dicQueryObj.startTime', function(v){
$scope.minEndDate = v;
});
$scope.$watch('dicQueryObj.endTime', function(v){
$scope.maxStartDate = v;
});
$scope.dateOptions = {
formatYear: 'yy',
maxDate: new Date(),
startingDay: 1
};
$scope.startOpen = function() {
$timeout(function() {
$scope.startPopupOpened = true;
});
};
$scope.endOpen = function() {
$timeout(function() {
$scope.endPopupOpened = true;
});
};
$scope.startPopupOpened = false;
$scope.endPopupOpened = false;

然后隐藏清除按钮:

 /*ui-date样式*/
.uib-button-bar .btn-group button[ng-click^="select(null)"] {
display: none;
}

效果界面显示如下:

条件1、条件2、条件3都符合,然后被组内小伙伴测出来bug!!!
bug描述:因为设置了日期可选范围,界面确实对范围外的日期呈不可选状态,不可点击,然后顶部前后年份以及月份都可滑动,关键是每次切换月份,月份的1号都会被莫名的自动选中,导致我ng-model绑定的数据变化!!然而居然$watch不出来!!!我就纳闷了?
然后尝试看源码,然而各种看不懂啊。只有类似一句self.activeDate(year,mouth,1),然而各种注释都木有用,各种按照issue上面改代码,然而作者说版本更新已经不适用了。。。我就放弃了,再说改源码毕竟不好啊!
中途各种看issues(https://github.com/angular-ui/bootstrap/issues?utf8=%E2%9C%93)发现人家标为这是bug!!! http://angular-ui.github.io/bootstrap/#/datepicker无奈研究了一下官网,他并没有出现我遇到的问题,查看他用的版本,发现人用的版本不一样啊!!!

然后重新下载版本bower install angular-bootstrap#1.3.2,引入解决了bug!

到目前为止就剩下条件4汉化了,查了一下issue,结果...

就在快要放弃的时候,大牛说是引入中文文件就OK,毕竟它改造之前是可以支持中文版本的,然后开始各种找,找到了i18n,bower install angular-i18n,下下来发现各种文件

然而查看发现
require('./angular-locale_zh-cn');
module.exports = 'ngLocale';

。。好吧 这个angular2.0的代码

但是ngLocale这个模块貌似就是汉化的重要线索,然后就找到这个了http://stackoverflow.com/questions/19671887/angularjs-angular-ui-bootstrap-changing-language-used-by-the-datepicker
里面提到解决方法,扒下来汉化文件https://github.com/angular/angular.js/blob/master/src/ngLocale/angular-locale_zh.js
然后引进项目中,完全汉化了!效果如下:

注意1:min-date以及max-date设置从html中转义至controller中的options设置
                <p class="input-group">
<input type="text" class="form-control" uib-datepicker-popup readonly ng-model="newWordQueryObj.startTime" is-open="startPopupOpened" datepicker-options="startDateOptions" ng-required="true" close-text="关闭" current-text="今天" />
<span class="input-group-btn">
<button type="button" class="btn btn-default" ng-click="startOpen()"><i class="glyphicon glyphicon-calendar"></i></button>
</span>
</p> <p class="input-group">
<input type="text" class="form-control" uib-datepicker-popup readonly ng-model="newWordQueryObj.endTime" is-open="endPopupOpened" datepicker-options="endDateOptions" ng-required="true" close-text="关闭" current-text="今天" />
<span class="input-group-btn">
<button type="button" class="btn btn-default" ng-click="endOpen()"><i class="glyphicon glyphicon-calendar"></i></button>
</span>
</p>

JS代码修改:

         //初始化查询条件
$scope.newWordQueryObj = {
fileName: '',
startTime: new Date(CommonServ.getLastMonthDate()),
endTime: new Date(CommonServ.getCurDate()),
order: '0'
}; //时间选择器配置
//$scope.minStartDate = 0; //开始时间的最小时间
//$scope.maxStartDate = $scope.newWordQueryObj.endTime; //开始时间的最大可选时间
//$scope.minEndDate = $scope.newWordQueryObj.startTime; //结束时间的最小可选时间要大于开始时间的设定值
//$scope.maxEndDate = $scope.newWordQueryObj.endTime; //结束时间的最大可选择时间不超过结束时间的设定值
$scope.startDateOptions = {
formatYear: 'yy',
maxDate: $scope.newWordQueryObj.endTime,
startingDay: 1
};
$scope.endDateOptions = {
formatYear: 'yy',
minDate: $scope.newWordQueryObj.startTime,
maxDate: new Date(),
startingDay: 1
}; $scope.$watch('newWordQueryObj.startTime', function(newValue,oldValue){
//$scope.minEndDate = newValue;
$scope.endDateOptions.minDate = newValue;
});
$scope.$watch('newWordQueryObj.endTime', function(newValue,oldValue){
//$scope.maxStartDate = newValue;
$scope.startDateOptions.maxDate = newValue;
});
$scope.startOpen = function() {
$timeout(function() {
$scope.startPopupOpened = true;
});
};
$scope.endOpen = function() {
$timeout(function() {
$scope.endPopupOpened = true;
});
};
$scope.startPopupOpened = false;
$scope.endPopupOpened = false;

注意2:这时如果要隐藏clear清除按钮,css代码得改变
 /*ui-date样式*/
.uib-button-bar .btn-group button[ng-click^="select(null, $event)"] {
display: none;
}

完成~

接下来就可以重新测试一下了~

备注:
此时对accordion来说,如果自定义了templateUrl,此时templateUrl内需要添加一个属性uib-accordion-header
             <span data-toggle="collapse" aria-expanded="{{isOpen}}" aria-controls="{{::panelId}}" tabindex="0" class="accordion-toggle" uib-accordion-transclude="heading"><span ng-class="{'text-muted': isDisabled}" uib-accordion-header>{{heading}}</span></span>

angular-bootstrap ui-date组件问题总结的更多相关文章

  1. Angular第三方UI组件库------ionic

    一.Angular  UI组件库  ------------ionic 1. 官网:https://ionicframework.com 文档:https://ionicframework.com/d ...

  2. 开始学习Angular Mobile UI

    介绍 Mobile AngularUI 可以让你使用Twitter Booostrap和Angular JS来开发混合移动App和桌面应用程序. 下面是是一些贯穿整个项目的步骤,我强烈的建议你去继续阅 ...

  3. 超棒的 15 款 Bootstrap UI 编辑器

    自从 2011 年 Mark Otto 和 Jacob Thornton 开发了  Bootstrap,我们第一次接触并熟知了 Bootstrap .这些都归功于  Twitter!从那以后,它就非常 ...

  4. Angular 2 to Angular 4 with Angular Material UI Components

    Download Source - 955.2 KB Content Part 1: Angular2 Setup in Visual Studio 2017, Basic CRUD applicat ...

  5. springMVC+angular+bootstrap+mysql的简易购物网站搭建

    springMVC+angular+bootstrap+mysql的简易购物网站搭建 介绍 前端的css框架用了bootstrap, 以及bootstrap的JS组件, 以及很好用的angular(a ...

  6. 阿里云 Angular 2 UI框架 NG-ZORRO介绍

    说明: Angular2出来后,一直想找个基于Angular2的前端后台管理框架,但一直没有找到比较适合的.前段时间在Angular官网资源无意之间看到NG-ZORRO,NG-ZORRO由阿里计算平台 ...

  7. Phonegap集成angular/bootstrap/animate.css教程

    1,phonegap集成angular 按照这篇文档的步骤:http://projectpoppycock.com/angularjs-phonegap-and-angular-seed-lets-g ...

  8. 《疯狂前端开发讲义jQuery+Angular+Bootstrap前端开发实践》学习笔记

    <疯狂前端开发讲义jQuery+Angular+Bootstrap前端开发实践>学习笔记 二〇一九年二月十三日星期三2时28分54秒 前提:本书适合有初步HTML.CSS.JavaScri ...

  9. Bootstrap:UI开发平台 sdk

    Bootstrap:UI开发平台 Bootstrap是一个易用.优雅.灵活.可扩展的前端工具包,里面包含了丰富的Web组件,包括布局.栅格.表格.表单.导航.按钮.进度条.媒体对象等,基于这些组件,可 ...

  10. 四款免费好用的Bootstrap ui编辑器

    Bootstrap带来了设计革命,本文介绍的四种免费Bootstrap在线设计工具,可视化所见所得设计网页,然后输出Html/CSS代码,其中有些甚至可以实现拖曳,也有可以设定自己的主题模板Theme ...

随机推荐

  1. Andrew Ng机器学习课程笔记--week5(上)

    Neural Networks: Learning 内容较多,故分成上下两篇文章. 一.内容概要 Cost Function and Backpropagation Cost Function Bac ...

  2. 《阿里巴巴Java开发手册v1.2》解析(编程规约篇)

    之前在乐视天天研究各种底层高大上的东西,因为我就一个人,想怎么弄怎么弄.如今来了新美大,好好研读一下<阿里巴巴Java开发手册v1.2>.还要对这么看似简单的东西解析一番.毕竟现在带团队, ...

  3. 简述C/C++调用lua中实现的自定义函数

    1.首先说下目的,为什么要这么做 ? 正式项目中,希望主程序尽量不做修改,于是使用C/C++完成功能的主干(即不需要经常变动的部分)用lua这类轻量级的解释性语言实现一些存在不确定性的功能逻辑:所以, ...

  4. ascii codec can't decode byte 0xe8 in position 0:ordinal not in range(128) python代码报错

    import sys reload(sys) sys.setdefaultencoding('utf-8')

  5. Tensorflow 线性回归预测房价实例

    在本节中将通过一个预测房屋价格的实例来讲解利用线性回归预测房屋价格,以及在tensorflow中如何实现 Tensorflow 线性回归预测房价实例 1.1. 准备工作 1.2. 归一化数据 1.3. ...

  6. JSP页面中<%!%>与<%%>与<%=%>

    首先,我们要了解jsp运行原理.JSP的本质就是一个Servlet,JSP的运行之前会先被Tomcat服务器翻译为.java文件,然后在将.java文本编译 为.class文件,而我们在访问jsp时, ...

  7. 深入理解JAVA I/O系列六:Linux中的IO模型(转载的文章非常值得学习)

    From:http://www.cnblogs.com/dongguacai/p/5770287.html IO模型 linux系统IO分为内核准备数据和将数据从内核拷贝到用户空间两个阶段. 这张图大 ...

  8. C#设计模式(5)-建造者模式

    引言 上一篇介绍了设计模式中的抽象工厂模式-C#设计模式(3)-抽象工厂模式,本篇将介绍建造者模式: 点击这里查看全部设计模式系列文章导航 建造者模式简介 建造者模式是将一个复杂对象的构建与表示分离, ...

  9. 用CAS方案解决高并发一致性问题

    详见:http://blog.yemou.net/article/query/info/tytfjhfascvhzxcyt395 缘起:在高并发的分布式环境下,对于数据的查询与修改容易引发一致性问题, ...

  10. 为什么可以通过URL来调起APP - URL Scheme和Intent

    在手机浏览器中可以通过URL调起APP是不是很神奇?这篇文章就告诉你为什么. URL Scheme 先从前端能接触到的URL Scheme分析一下 丢wiki:https://en.wikipedia ...