对于日期控件来说，My97DatePicker算得上是个优秀的东东了。好几个项目都用的它。

新项目中也是一样，不过区别是使用的Angularjs。二者不会冲突，不过以往情况下使用的 ng-model 在日期表单上无效。（应该算是对事件的处理上 二者出现了冲突）

针对这一问题，写了个简单的指令如下

my97NgExtension.js

angular.module('My97Ext', []).directive('datepicker', function () {

    return {

        restrict: 'A',

        require: '?ngModel',

        scope: {},

        link: function (scope, element, attrs, ngModel) {

            if (!ngModel) return;

            element.on("blur",function () {

                var val = this.value;

                scope.$apply(function () {

                    ngModel.$setViewValue(val);

                });

            })

        }

    };

});

应用页面

<!DOCTYPE html>

<html ng-app="myApp">

<head lang="en">

    <title>AngularJS Datepicker</title>

    <meta charset="utf-8">

    <script src="/WdatePicker.js"></script>

    <script src="/angular.min.js"></script>

    <script src="/My97NgExtension.js"></script>

    <script>

        var app = angular.module('myApp', ['My97Ext']);

        app.controller('MainCtrl', function ($scope) {

            $scope.Deadline = '2015-12-29';

        });

    </script>

</head>

<body  ng-controller="MainCtrl">

    <input id="dt" datepicker class="Wdate" type="text" onclick="WdatePicker()" placeholder="报名截止时间" ng-model="Deadline" />

    <br />

    截止日期：{{Deadline}}

    <hr />

    <input type="text" ng-model="Deadline" />

</body>

</html>

使用时多添加扩展指令，然后在日期表单上添加 datepicker属性即可

Angularjs的My97DatePicker扩展的更多相关文章

  1. [收录] Highcharts-ng —— AngularJS 的图表扩展

    原文:http://www.tuicool.com/articles/u6VZJjQ Highcharts-ng 是一个 AngularJS 的指令扩展,实现了在AngularJS 应用中集成High ...

  2. angularJs的过滤器扩展及自定义过滤器

    一.过滤器扩展 1.过滤器的组合使用 <!DOCTYPE HTML> <html ng-app="myApp"> <head> <meta ...

  3. ionic入门之AngularJS扩展(一)

    ionic ionic是一个强大的混合式/hybridHTML5移动开发框架,特点是使用标准的HTML. CSS和JavaScript,开发跨平台(目前支持:Android.iOS,计划支持:Wind ...

  4. AngularJS（1）

    AngularJS(1) 在讲正题之前,先说一下有关angular简介方面的信息: 1. angularJS  诞生于2009年,由Misko Hevery 等人创建,后为Google所收购.是一款优 ...

  5. 关于AngularJS（1）

      在讲正题之前,先说一下有关angular简介方面的信息: 1. angularJS  诞生于2009年,由Misko Hevery 等人创建,后为Google所收购.是一款优秀的前端JS框架,已经 ...

  6. AngularJs之一

    在讲正题之前,先说一下有关angular简介方面的信息: 1. angularJS  诞生于2009年,由Misko Hevery 等人创建,后为Google所收购.是一款优秀的前端JS框架,已经被用 ...

  7. AngularJS基础知识1

    一.angularJS简介 1.什么是 AngularJS? AngularJS 是一个 JavaScript 框架.它是一个以 JavaScript 编写的库.AngularJS是协助搭建单页面工程 ...

  8. angularJS 学习之路

    AngularJS 通过 ng-directives 扩展了 HTML. ng-app 指令定义一个 AngularJS 应用程序.也就是angularjs作用的入口  作用在什么标签或者整个body ...

  9. AngularJS的学习笔记（二）

    只给自己看的. AngularJS 表达式 angularjs 使用表达式将数据绑定到html中. AngularJS 表达式写在双大括号内:{{ expression }}. AngularJS 表 ...

随机推荐

  1. 妹味6：ajax与ajax封装

    (功能)ajax能且仅能 从服务器读取文件 (环境)需要服务器环境才能测试,可以用工具建立本地服务器环境 (缓存)解决缓存问题:url加时间戳让每次请求地址唯一,如 url='abc.txt?t='+ ...

  2. 【EF 译文系列】韧性连接、重试（EF 版本至少为 6）

    原文链接:Connection Resiliency / Retry Logic (EF6 onwards) 一个应用程序的数据库连接,是非常容易受其它因素影响的,比如后端的异常或者不稳定的网络连接等 ...

  3. [CLR via C#]8. 方法

    一.实例构造器和类(引用类型) 类实例构造器是允许将类型的实例初始化为良好状态的一种特殊的方法. 类实例构造器方法在"方法定义元数据表"中始终叫.ctor(代表constructo ...

  4. GridView 用 checkbox 全选并取值

    方法一,用 js 实现 <script type="text/javascript"> //<![CDATA[ function CheckAll(oCheckb ...

  5. 基于FreeBSD 64位内核的kFreeBSD无法在Virtualbox下安装

    ArchBSD同上 感谢大A(豆瓣)的投稿 :)

  6. java阻塞队列

    对消息的处理有些麻烦,要保证各种确认.为了确保消息的100%发送成功,笔者在之前的基础上做了一些改进.其中要用到多线程,用于重复发送信息. 所以查了很多关于线程安全的东西,也看到了阻塞队列,发现这个模 ...

  7. JPA学习(2)注解

    上一篇学习了JPA的helloworld,也初略的使用了一些注解,接下来就细细的了解一下有哪些注解,和这些注解的作用 JPA的基本注解: ①@Entity,@Table,@Id,@GeneratedV ...

  8. uml中的几种关系

    这是一堂关于UML基础知识的补习课:现在我们做项目时间都太紧了,基本上都没有做过真正的class级别的详细设计,更别提使用UML来实现规范建模了:本篇主要就以前自己一直感觉很迷糊的几种class之间的 ...

  9. 非线性数据拟合-nls

    code{white-space: pre;} pre:not([class]) { background-color: white; }if (window.hljs && docu ...

  10. Spring InitializingBean和init-method

    原文转自:http://blog.csdn.net/shaozheng1006/article/details/6916940 InitializingBean     Spirng的Initiali ...