Angular指令封装jQuery日期时间插件datetimepicker实现双向绑定示例

00.混乱的前端界

Angular1.x确实是个学习成本很高的框架，刚开始实习那会儿，前端啥也不懂，工头说用Angular，我们这群小弟也只能硬着头皮学。在这之前，前端的东西大部分都用的jQuery，而Angular正好是和jQuery的思维是相反的，开发过程中遇到了不少坑。而Angular团队也放弃了1.x开始开发和React神似的2.0版本，唉，真是沧海桑田啊。

01.Angular vs jQuery

Angular模块化和解耦的思路确实值得一学，但是相对于成熟的jQuery插件库，Angular就显得寒酸了不少，比如，Angular-UI中日期控件是这样的：

丑的不要不要的，还不能选时间，相比之下jQuery就有很多优秀的控件了比如这样的：

此插件传送门：http://xdsoft.net/jqplugins/datetimepicker/

那么问题来了，控件一般是直接像这样$("#xx").val("xx")直接塞值进<input />标签的，这不会触发ng-change事件，ng-model也不会被更新，于是笔者写了个Angular适配指令，来实现这个控件的双向绑定，对于其他jQuery插件，也可以用类似的思路来进行适配。

10.干货

下面是一个Demo，比较两者的不同，注意右边ng-bind的属性使用adapter是会同步变化的↓

Demo传送门：http://xiazai.jb51.net/201701/yuanma/angular.DatetimePicker_jb51.rar

angular.module("directives",[]).directive("datetimepicker",function(){
  return {
    restrict: "EA",  //指令作用范围是element或attribute
    require : "ngModel", //控制器是指令标签对应的ngModel
    link: function (scope, element, attrs, ctrl) {

      var unregister = scope.$watch(function(){        //关键点，下面详述

        $(element).append("<input id='date-"+attrs.dateid+"' style='border:none;width:100%' value='"+ctrl.$modelValue+"'>");
 //template用不好，于是用这个笨办法加上input标签

        element.on('change', function() { //注册onChange事件，设置viewValue
          scope.$apply(function() {
            ctrl.$setViewValue($("#date-"+attrs.dateid).val());
          });
        });

        element.on('click',function(){  //click触发日期框
          $("#date-"+attrs.dateid).datetimepicker({
            format : attrs.format || 'Y/m/d h:i',  //格式
            onClose : function(){          //关闭日期框时手动触发change事件
              element.change();
            }
          });
        });

        element.click();    //第一次绑定事件，模拟一次click，否则肯能要点两下才会出日期框

        return ctrl.$modelValue;
      }, initialize);

      function initialize(value){ //下面再说
        ctrl.$setViewValue(value);
        unregister();
      }
    }
  }
});

写这个指令过程中遇到了一个大坑，查了很久才明白，Angular初始化一个ngModel的时候，是会先给它的value置为NaN，初始化必须要先调用$watch()来监测真正值被设置的时候，然后调用上面的initialize方法来设置view值。否则在Controller中设置的初始值会变成NaN。

11.不足之处

原插件是有很多可选项的，我只实现了一个最基本的format，有其他需求的自行改代码吧。可以利用第三个attrs参数获取属性，然后调用原插件的配置方法，来实现更复杂的逻辑。

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

赞 (0)

相关推荐

  • jQuery DateTimePicker 日期和时间插件示例

    jQuery DateTimePicker 日期和时间插件示例

    jQuery UI很强大,其中的日期选择插件Datepicker是一个配置灵活的插件,我们可以自定义其展示方式,包括日期格式.语言.限制选择日期范围.添加相关按钮以及其它导航等. 日期选择插件是一个配置灵活的插件,你可以定义它的展示方式,包括日期格式.语言.限制选择日期范围.添加相关按钮以及其它导航等 文档和下载地址: 1.jQuery-Timepicker-Addon的下载地址:http://xiazai.jb51.net/201701/yuanma/jQuery-Timepicker-Add

  • bootstrap datetimepicker 日期插件在火狐下出现一条报错信息的原因分析及解决办法

    bootstrap datetimepicker 日期插件在火狐下出现一条报错信息的原因分析及解决办法

    日期插件 bootstrap-datetimepicker 在火狐下出现一条报错信息:TypeError: (intermediate value).toString(-).split(-)[1] is undefined 这条错误必然出现,难道没有在 Firefox 下进行测试. 在 Firefox 下查看项目 demo (http://www.malot.fr/bootstrap-datetimepicker/demo.php)可以正常运行,但这个 demo.php 使用的是 2013-3-

  • bootstrap datetimepicker日期插件超详细使用方法介绍

    bootstrap datetimepicker日期插件超详细使用方法介绍

    本文实例为大家分享了bootstrap datetimepicker日期插件的简单使用,供大家参考,具体内容如下 首先在文件头部引入必要的文件: <link rel="stylesheet" href="Css/bootstrap-datetimepicker.min.css" rel="external nofollow" > <script src="Js/bootstrap-datetimepicker.js&q

  • bootstrap-datetimepicker实现只显示到日期的方法

    bootstrap-datetimepicker实现只显示到日期的方法

    本文实例讲述了bootstrap-datetimepicker实现只显示到日期的方法.分享给大家供大家参考,具体如下: bootstrap-datetimepicker 一般都是设置到时分秒,有时候并不需要,怎么处理呢? minView: "month", //选择日期后,不会再跳转去选择时分秒 1.引入 <link href="Public/css/bootstrap.min.css" type="text/css" rel="

  • bootstrap datetimepicker日期插件使用方法

    bootstrap datetimepicker日期插件使用方法

    本文实例为大家分享了bootstrap datetimepicker日期插件的简单使用,供大家参考,具体内容如下 首先在文件头部引入必要的文件: <link rel="stylesheet" href="Css/bootstrap-datetimepicker.min.css"> <script src="Js/bootstrap-datetimepicker.js"></script> 想用中文显示,加入bo

  • C#日期控件datetimepicker保存空值的三种方法

    方法一(推荐): 设置datetimepicker的属性ShowCheckBox为true 在窗口初始化时候,添加代码this.datetimepicker1.Checked = false; 保存日期值入库的时候,就可以根据if(this.datetimepicker1.Checked ==false),保存空值. 方法二: 在窗口初始化函数中添加: 复制代码 代码如下: this.dateTimePicker1.Format=DateTimePickerFormat.Custom; this

  • Angular指令封装jQuery日期时间插件datetimepicker实现双向绑定示例

    Angular指令封装jQuery日期时间插件datetimepicker实现双向绑定示例

    00.混乱的前端界 Angular1.x确实是个学习成本很高的框架,刚开始实习那会儿,前端啥也不懂,工头说用Angular,我们这群小弟也只能硬着头皮学.在这之前,前端的东西大部分都用的jQuery,而Angular正好是和jQuery的思维是相反的,开发过程中遇到了不少坑.而Angular团队也放弃了1.x开始开发和React神似的2.0版本,唉,真是沧海桑田啊. 01.Angular vs jQuery Angular模块化和解耦的思路确实值得一学,但是相对于成熟的jQuery插件库,Ang

  • 自定义Angular指令与jQuery实现的Bootstrap风格数据双向绑定的单选与多选下拉框

    先说点闲话,熟悉Angular的猿们会喜欢这个插件的. 00.本末倒置 不得不承认我是一个喜欢本末倒置的人,学生时代就喜欢先把晚交的作业先做,留着马上就要交的作业不做,然后慢悠悠做完不重要的作业,卧槽,XX作业马上要交了,赶紧补补补.如今做这个项目,因为没找到合适的多选下拉Web插件,又不想用html自带的丑陋的<select multiple></select>,自己花了一整天时间做了一个.或许这样占用的主要功能开发的时间,开发起来会更有紧迫感吧.感觉自己是个抖M自虐倾向,并且伴

  • angularjs封装bootstrap时间插件datetimepicker

    angularjs封装bootstrap时间插件datetimepicker

    背景:angular与jquery类库的协作 第三方类库中,不得不提的是大名鼎鼎的jquery,现在基本上已经是国内web开发的必修工具了.它灵活的dom操作,让很多web开发人员欲罢不能.再加上已经很成熟的jquery UI 库和大量jquery 插件,几乎是一个取之不尽用之不竭的宝库.然而,它是否能与angularjs结合呢? 很多angularjs原教旨主义者对此持否定态度.他们认为,既然已经使用了angularjs做web应用框架,那就必须避免其他类库的干扰,做纯净的MvvM模式应用.任

  • jQuery结合jQuery.cookie.js插件实现换肤功能示例

    本文实例讲述了jQuery结合jQuery.cookie.js插件实现换肤功能.分享给大家供大家参考,具体如下: 上一次和大家分享了如何实现换肤功能,但是script代码好像有点长,所以这次打算使用cookie.js插件来实现换肤功能,好啦,我们开始吧. jQuery.cookie.js下载:https://github.com/carhartl/jquery-cookie/ 先来了解下cookie.js如何使用. 先导入: <script type="text/javascript&qu

  • Java8新日期时间API的20个使用示例

    除了lambda表达式,stream以及几个小的改进之外,Java 8还引入了一套全新的时间日期API,在本篇教程中我们将通过几个简单的任务示例来学习如何使用Java 8的这套API.Java对日期,日历及时间的处理一直以来都饱受诟病,尤其是它决定将java.util.Date定义为可修改的以及将SimpleDateFormat实现成非线程安全的.看来Java已经意识到需要为时间及日期功能提供更好的支持了,这对已经习惯使用Joda时间日期库的社区而言也是件好事.关于这个新的时间日期库的最大的优点

  • angular项目中bootstrap-datetimepicker时间插件的使用示例

    angular项目中bootstrap-datetimepicker时间插件的使用示例

    一.需求: 后台系统中经常会使用到的功能,选择一个时间区间,根据这个时间区间去筛选一些信息,比如,某一时间段的注册用户. 二.最后效果 三.需要引入的文件(src/index.html) 注意:1.jQuery文件先引用,因为在初始化日期插件是,需要找到DOM中的对象,添加一些样式: 2.可以看到,我项目中并没有引用bootstrap.min.css这个文件,因为是在index.html全局引用的这个样式,对已经写好的样式有很大的影响,因此产生的影响就是样式是乱掉的,你看到的效果图(第一张图片)

  • 推荐三款日期选择插件(My97DatePicker、jquery.datepicker、Mobiscroll)

    三款日期选择插件推荐给大家: 1.My97DatePicker 纯原生JS,专注于PC端,支持IE6+:页面上只需要引入WdatePicker.js文件,但是My97DatePicker整个目录是一个整体,最好不要破坏里面的目录结构,否则就会报错找不到指定文件. (1)直接在html文件中写入 <input id="ipt" type="text" onclick="WdatePicker()" /> 注意:由于此插件是原生JS写的,

  • 贴近用户体验的Jquery日期、时间选择插件

    贴近用户体验的Jquery日期、时间选择插件

    分享一款贴近Jquery日期.时间选择插件.这是一款双日历jQuery日期选择时间插件pickerDateRange.效果图如下: 在线预览    源码下载 Js代码 var dateRange = new pickerDateRange('date_demo3', { aRecent7Days: 'aRecent7DaysDemo3', //最近7天 isTodayValid: false, //startDate : '2013-04-14', //endDate : '2013-04-21

  • jQuery日期范围选择器附源码下载

    jQuery日期范围选择器附源码下载

    jQuery Date Range Picker是一款允许用户选择一个日期时间范围的jQuery日期选择器插件.整个日期选择器插件使用CSS来渲染样式,可以非常容易的使用CSS来定制皮肤.而且浏览器兼容性非常好,支持多种时间格式. 查看演示             下载源码 准备 使用该日期选择器插件需要 jQuery 1.3.2+和Moment 2.2.0+的支持. <link rel="stylesheet" href="css/daterangepicker.cs

  • Django 如何使用日期时间选择器规范用户的时间输入示例代码详解

    如果你的模型中含有 datetime 类型的字段,表单中需要用户输入日期和时间,那么你如何保证不同用户输入的时间都遵循一定的格式 (DD/MM/YYYY 或者 YYYY-MM-DD) 是个必须要考虑的问题.一个更好的方式是在前端使用日期时间选择器 DateTimePicker,以日历的形式统一选择输入时间,如下图所示.小编今天将尝试以最少的代码教你实现如何在 Django 项目中实现日期时间选择器 DateTimePicker. 示范模型 假如我们有如下一个 Article 模型,含有 pub_

随机推荐