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

layDate 控件地址:http://laydate.layui.com/

前情:原来系统中使用的日期控件是UI bootstrap(地址:https://angular-ui.github.io/bootstrap/)里的。后来因为各种原因,要换掉UI bootstrap中的日期控件,改用layDate日期控件。

解决思路:将layDate的初始化及相关代码定义在指令里。

问题关键点:layDate操作的是Html元素的,怎么实现双向绑定,同步Angularjs模板值和Html的元素值。

指令具体代码:

 1     /**
 2          * 使用示例
 3          * <input def-laydate type="text" id="id1" ng-model="startTime"/>
 4          */
 5         app
 6         .directive(‘defLaydate‘, function() {
 7             return {
 8                 require: ‘?ngModel‘,
 9                 restrict: ‘A‘,
10                 scope: {
11                     ngModel: ‘=‘
14                 },
15                 link: function(scope, element, attr, ngModel) {
16                     var _date = null,_config={};
17
18                         // 初始化参数
19                     _config = {
20                         elem: ‘#‘ + attr.id,
21                         format: attr.format != undefined && attr.format != ‘‘ ? attr.format : ‘YYYY-MM-DD‘,
22                         max:attr.hasOwnProperty(‘maxDate‘)?attr.maxDate:‘‘,
23                         min:attr.hasOwnProperty(‘minDate‘)?attr.minDate:‘‘,
24                         choose: function(data) {
25                             scope.$apply(read);
26
27                         },
28                         clear:function(){
29                            ngModel.$setViewValue(null);
30                         }
31                     };
32                     // 初始化
33                     _date= laydate(_config);
34
35
36
37                     // 模型值同步到视图上
38                     ngModel.$render = function() {
39                         element.val(ngModel.$viewValue || ‘‘);
40                     };
41
42                     // 监听元素上的事件
43                     element.on(‘blur keyup change‘, function() {
44                         scope.$apply(setVeiwValue);
45                     });
46
47                     setVeiwValue();
48
49                     // 更新模型上的视图值
50                     function setVeiwValue() {
51                         var val = element.val();
52                         ngModel.$setViewValue(val);
53                     }
54                 }
55             }
56         })

---以上代码使用示例为 <input def-laydate type="text" id="id1" ng-model="startTime"/>

注意:1.指令只能用做元素属性。2.元素必须要有唯一id属性。

到此为止,在Angularjs里使用laydate的基本目标实现了。但是,日期组件难免会有日期选择范围限制的要求,比如日期可选的最大值,最小值。现对指令做优化以满足要求:

 1 app
 2         .directive(‘defLaydate‘, function() {
 3             return {
 4                 require: ‘?ngModel‘,
 5                 restrict: ‘A‘,
 6                 scope: {
 7                     ngModel: ‘=‘,
 8                     maxDate:‘@‘,
 9                     minDate:‘@‘
10                 },
11                 link: function(scope, element, attr, ngModel) {
12                     var _date = null,_config={};
13
14                         // 初始化参数
15                     _config = {
16                         elem: ‘#‘ + attr.id,
17                         format: attr.format != undefined && attr.format != ‘‘ ? attr.format : ‘YYYY-MM-DD‘,
18                         max:attr.hasOwnProperty(‘maxDate‘)?attr.maxDate:‘‘,
19                         min:attr.hasOwnProperty(‘minDate‘)?attr.minDate:‘‘,
20                         choose: function(data) {
21                             scope.$apply(read);
22
23                         },
24                         clear:function(){
25                            ngModel.$setViewValue(null);
26                         }
27                     };
28                     // 初始化
29                     _date= laydate(_config);
30
31                     // 监听日期最大值
32                     if(attr.hasOwnProperty(‘maxDate‘)){
33                         attr.$observe(‘maxDate‘, function (val) {
34                             _config.max = val;
35                         })
36                     }
37                     // 监听日期最小值
38                     if(attr.hasOwnProperty(‘minDate‘)){
39                        attr.$observe(‘minDate‘, function (val) {
40                             _config.min = val;
41                         })
42                     }
43
44                     // 模型值同步到视图上
45                     ngModel.$render = function() {
46                         element.val(ngModel.$viewValue || ‘‘);
47                     };
48
49                     // 监听元素上的事件
50                     element.on(‘blur keyup change‘, function() {
51                         scope.$apply(setVeiwValue);
52                     });
53
54                     setVeiwValue();
55
56                     // 更新模型上的视图值
57                     function setVeiwValue() {
58                         var val = element.val();
59                         ngModel.$setViewValue(val);
60                     }
61                 }
62             }
63         })

---以上代码使用示例为 <input def-laydate type="text" id="id1" ng-model="startTime"  max-date="{{model.max}}" min-date="{{model.min}}"/> min-date,max-date属性按需添加。

这样的指令一般情况下已经可以满足使用,但是在结合ngDialog使用时出现了问题:layDate在初始化中getElementById 获取元素时,弹窗中的html内容还没有持到页面的结点树中,故而报错。

于是希望指令的link代码可以在弹窗渲染后再执行,查找资料后,在指令中引入了$timeout:

app.directive(‘ngcLayDate‘, function($timeout) {
            return {
                require: ‘?ngModel‘,
                restrict: ‘A‘,
                scope: {
                    ngModel: ‘=‘,
                    maxDate:‘@‘,
                    minDate:‘@‘
                },
                link: function(scope, element, attr, ngModel) {
                    var _date = null,_config={};
                     // 渲染模板完成后执行
                    $timeout(function(){
                        // 初始化参数
                        _config = {
                            elem: ‘#‘ + attr.id,
                            format: attr.format != undefined && attr.format != ‘‘ ? attr.format : ‘YYYY-MM-DD‘,
                            max:attr.hasOwnProperty(‘maxDate‘)?attr.maxDate:‘‘,
                            min:attr.hasOwnProperty(‘minDate‘)?attr.minDate:‘‘,
                            choose: function(data) {
                                scope.$apply(read);

                            },
                            clear:function(){
                               ngModel.$setViewValue(null);
                            }
                        };
                        // 初始化
                        _date= laydate(_config);

                        // 监听日期最大值
                        if(attr.hasOwnProperty(‘maxDate‘)){
                            attr.$observe(‘maxDate‘, function (val) {
                                _config.max = val;
                            })
                        }
                        // 监听日期最小值
                        if(attr.hasOwnProperty(‘minDate‘)){
                           attr.$observe(‘minDate‘, function (val) {
                                _config.min = val;
                            })
                        }

                        // 模型值同步到视图上
                        ngModel.$render = function() {
                            element.val(ngModel.$viewValue || ‘‘);
                        };

                        // 监听元素上的事件
                        element.on(‘blur keyup change‘, function() {
                            scope.$apply(setVeiwValue);
                        });

                        setVeiwValue();

                        // 更新模型上的视图值
                        function setVeiwValue() {
                            var val = element.val();
                            ngModel.$setViewValue(val);
                        }
                    },0);
                }
            };
        })

OK,问题解决。解决问题的过程伴随着查资料的过程,是一步步完善的。也希望大家在遇到同样的问题时少走弯路。

另:码字不易,转载请注明出处。

时间: 2024-11-03 01:16:31

【经验】Angularjs 中使用 layDate 日期控件的相关文章

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

最近项目上了AngularJS,而原来使用的日期控件的使用方式也需要改变,于是开始了倒腾,看来写官方的例子,可以使用AngularJS的directive做简单的处理,这样在html里直接使用申明的的形式即可使用了. <!doctype html> <html ng-app="datepickerApp"> <head> <link type="text/css" rel="stylesheet" hre

jQuery LayDate 日期控件

她基于原生JavaScript精心雕琢,兼容了包括IE6在内的所有主流浏览器.她具备优雅的内部代码,良好的性能体验,和完善的皮肤体系,并且完全开源,你可以任意获取开发版源代码,一扫某些传统日期控件的封闭与狭隘.layDate本着资源共享的开发者精神和对网页日历交互无穷的追求,延续了layui一贯的简单与易用.她遵循LGPL协议,您可以免费将她用于任何个人项目. 版本 LayDate 1.1 作者:闲心贤 github 在线实例 实例预览 layDate - js日期控件与时间插件演示 实例预览 

Angularjs中使用jquery分页控件

首篇,不知写何物,思来想去,敬上分页控件使用方法,望共同探讨. 分页乃前端数据展现之常用功能,而在我们使用的Angular js中,原生的分页需要将数据全部取到前端后,然后再到前端分页,在大批量数据操作时并不实用.接下来,我来介绍了将一种jquery的分页控件修改为Angularjs指令的方法. 首先在web项目中引用jquery1.10.Angularjs库文件以及jq-pagination控件. 我降指令名称为custompagination,为指令添加Html样式. 然后给指令添加对应的控

Combining AngularJS with existing Components(angularjs 中使用已有的控件)

This is a preview-quality chapter of our continuously deployed eBook on AngularJS for .NET developers. You can read more about the project at http://henriquat.re. You can also follow us on twitter (Project:@henriquatreJS, Authors: @ingorammer and @ch

My97DatePicker日期控件的使用

本文演示如何在MyEclipse项目中使用My97DatePicker日期控件 1.下载My97DatePicker日期控件, My97DatePicker日期控件下载地址 2.在MyEclipse项目中安装My97DatePicker,把下载后的My97DatePicker解压后放在WebRoot子目录下,如WebRoot/dd/js/My97DatePicker(我把My97DatePicker放在WebRoot/dd/js/目录下,My97DatePicker为解压后的文件夹) 3.引用M

Sharepoint2013:日期控件报错

1 问题 1> 在sharepoint中的,日期控件(DateTimeControl),日期过滤控件(Date Filter)和SPListViewFilter等包含日期组件的控件,在特定情况下会报以下的错误 2> 我们查看下具体错误信息是: Exception Details: System.NullReferenceException: Object reference not set to an instance of an object. Source Error: An unhand

python selenium 处理时间日期控件(十五)

测试过程中经常遇到时间控件,需要我们来选择日期,一般处理时间控件通过层级定位来操作或者通过调用js来实现. 1.首先我们看一下如何通过层级定位来操作时间控件. 通过示例图可以看到,日期控件是无法输入日期,点击后弹出日期列表供我们选择日期,自己找了一个日期控制演示一下,通过两次定位,选择了日期 #-*- coding:utf-8 -*- import time from selenium import webdriver driver = webdriver.Chrome() driver.get

mui 时间日期控件(浏览器上无法查看,在手机端可以点击)

<head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" /> <title></title> <link href="css/mui.mi

jquery日期控件使用,起止时间

1.下载jQuery核心文件,datepicker是轻量级插件,只需jQuery的min版本就行了,然后到官网http://jqueryui.com/download下载jquery-ui压缩包(可以选择喜欢的theme),里面就包含对datepicker的支持,当然您也可以网站http://marcgrabanski.com/pages/code/jquery-ui-datepicker下载datepicker,包括ui.core.js和ui.datepicker.js. 2.在HTML中引用