业务背景:

  初学AngularJs,最近一段时间,因业务需求,要求日期选择带有快捷键、时分秒等。鉴于AngularJS组件库ui-bootstrap没有此功能,找了一款基于原生JS实现的插件-jeDate,总体效果还可以

基本封装使用:

 xxx.directive('jeDatepicker', function ($compile, $timeout) {
return{
restrict: 'A',
require: 'ngModel',//依赖的指令
scope: {
'ngModel': '=' //=双向数据绑定,@单向数据绑定, &调用父作用域的函数
},
link: function ($scope, $element, $attr) {
/**
* exp:
* <input type="text" id="test" class="form-control" ng-model="test" je-datepicker>
*/
var id = $attr.id;
var options = {
id: '#' + id
};
options.minDate = $attr.mindate ? $attr.mindate : '1900-01-01 00:00:00';
options.maxDate = $attr.maxdate ? $attr.maxdate : '2099-12-31 23:59:59';
options.format = $attr.format ? $attr.format : 'YYYY-MM-DD hh:mm:ss';
options.shortcut = [
{name:"一周",val:{DD:7}},
{name:"一个月",val:{DD:30}},
{name:"二个月",val:{MM:2}},
{name:"三个月",val:{MM:3}},
{name:"一年",val:{DD:365}}
];
options.donefun = function (obj) {//选中日期的回调
$scope.$apply(function () {
$scope.ngModel = obj.val;
})
};
options.clearfun = function() {//清除日期后的回调
$scope.$apply(function () {
$scope.ngModel = '';
})
};
$timeout(function () {
jeDate(options.id, options);
}, 1);
}
}
})

AngularJS之jeDate日期控件基本使用的更多相关文章

  1. jeDate日期控件

    http://www.jayui.com/jedate/     这是日期控件官网,可以去里面下载使用 前台 <%@ Page Language="C#" AutoEvent ...

  2. jeDate 日期控件

    写在前面的话: 最近在做一个日期范围的功能,研究了一个12306网站的日期范围选择,他用的是jcalendar.js,没有直接在日历插件里面做判断开始时间小于结束时间 而是自己在代码里面做了判断如下: ...

  3. jeDate日期控件精确到秒

    案例下载 链接: https://pan.baidu.com/s/1m7eEW6K6Bt1t-0OjVY_Wxw 密码: xmei <script type="text/javascr ...

  4. [转]通过AngularJS directive对bootstrap日期控件的的简单包装

    本文转自:http://www.cnblogs.com/Benoly/p/4109460.html 最近项目上了AngularJS,而原来使用的日期控件的使用方式也需要改变,于是开始了倒腾,看了官方的 ...

  5. [整理]通过AngularJS directive对bootstrap日期控件的的简单包装

    最近项目上了AngularJS,而原来使用的日期控件的使用方式也需要改变,于是开始了倒腾,看了官方的例子,可以使用AngularJS的directive做简单的处理,这样在html里直接使用申明的的形 ...

  6. 【经验】Angularjs 中使用 layDate 日期控件

    layDate 控件地址:http://laydate.layui.com/ 前情:原来系统中使用的日期控件是UI bootstrap(地址:https://angular-ui.github.io/ ...

  7. bootstrop 日期控件 datepicker被弹出框dialog覆盖的解决办法

    筒子们在使用bootstrap的日期控件(datepicker , 现在官网提供的名称叫 datetimepicker)时可能会遇到如上图的问题这是啥原因造成的呢? 答案很简单时输出的优先级造成的(z ...

  8. my97DatePicker日期控件——日期输入框联动,使用focus使第二个输入框没展示出日期控件

    描述问题场景: 1.jquery使用的版本是jquery-1.7.2.min.js 2.代码不是写在页面上的,是通过事件后追加的 <!DOCTYPE html> <html> ...

  9. 怎样使用My97日期控件

    有网友说无法使用My97日期控件,Insus.NET测试一下,是可以正常使用了. 在ASP.NET MVC环境中测试. 去官网下载My97日期控件程序包: 下载解压之后,把程序的目录拷贝至projec ...

随机推荐

  1. 【CF580C】Kefa and Park

    题目大意:给定一棵 N 个节点的有根树(其中根节点始终为 1 号节点),点有点权,点权只有 1 和 0 两种,求从根节点到叶子节点的路径中,有多少条路径满足:路径上最大连续点权为 1 的节点个数不超过 ...

  2. CentOs 自带 PHP 之坑

    在虚拟机上安装了CentOs6.5在上面安装了lnmp开发集成包(php7.1),对于之前没有任何开发经验的我来说,正常且安详滴在集成环境上开发着优雅的小bug. 然而我今天在Composer拉取代码 ...

  3. hive安装笔记

    http://note.youdao.com/noteshare?id=bfbe59aef4ef7c3502975d3d575239e1

  4. oracle 工作笔记,不定期更新

    此博客为工作时,所见技术问题的解决方案笔记,欢迎大家转载,转载请注明出处,谢谢~ 更新时间: 2017-07-12 1. clob字段值读取时,借用extractvalue或extract函数读取节点 ...

  5. Your Prediction Gets As Good As Your Data

    Your Prediction Gets As Good As Your Data May 5, 2015 by Kazem In the past, we have seen software en ...

  6. Zookeeper笔记之使用zk实现集群选主

    一.需求 在主从结构的集群中,我们假设硬件机器是很脆弱的,随时可能会宕机,当master挂掉之后需要从slave中选出一个节点作为新的master,使用zookeeper可以很简单的实现集群选主功能. ...

  7. 【源码阅读】VS调试mimikatz-改造法国神器mimikatz执行就获取明文密码

    0x1 概要 记得某位同学提起在XXX得到了一个一键生成明文的工具,觉得很是神奇... 然而我一看图标就知道是mimikatz,这工具是开源的,只要改两行代码就可以实现写死命令了. 顺带讲讲编译过程中 ...

  8. mongo批量操作存在更新否则插入

    def save_data(ok_ps): ns = [] for ok in ok_ps: ok['last_use_time'] = 0 ok['protocol'] = 0 # 协议类型 0:h ...

  9. env-update干了些什么

    http://www.linuxsir.org/bbs/thread339077-2.html乐哥的话-关于env-update http://www.gentoo.org/doc/zh_cn/han ...

  10. easyui tree:根据属性格式化树节点名称

    $('#resourceTree').tree({ method : 'post', animate : true, onContextMenu : function(e, node) { e.pre ...