对于日期控件来说，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. onhashchange事件，只需要修改hash值即可响应onhashchange事件中的函数（适用于上一题下一题和跳转页面等功能）

    使用实例: 使用onhashchange事件做一个简单的上一页下一页功能,并且当刷新页面时停留在当前页 html: <!DOCTYPE html><html><body& ...

  2. ecshop的Mysql操作类

    摘要,这是直接摘抄的ecshop的mysql操作类:不过他这里的缓存是用的文件缓存,我们如果想直接使用,可以替换成memcache的或者redis的! <?php /** * ECSHOP MY ...

  3. C语言中的经典例题用javascript怎么解？（一）

    C语言中的经典例题用javascript怎么解?(一) 一.1+2+3+……+100=?        <script type="text/javascript">  ...

  4. EF错误记录

    纯属个人记录错误使用: 1.EntityType“area”未定义键.请为该 EntityType 定义键. 产生原因: 1.命名空间引用错误,可能命名重复导致引用错误 2.实体类无法识别主键或者未设 ...

  5. python+selenium+unittest，爬虫电影网站

    以前经常在这个网站上下载电影下来看,这个网站比较坑的就是,主页上只有电影的名称,但是评分是看不到的:只有再点击电影名字,进入电影主页时才能看到评分.一般下载的电影都是评分高的才看,低的就忽略掉了.每次 ...

  6. C#语言各种集合介绍

    集合,表示可以通过遍历每个元素来访问的一组对象(特别是可使用foreach循环访问)一个集合包括多个元素,即有一个集合类对象和N个元素对象 因为任何集合类都实现了IEnumerable接口,所以任何集 ...

  7. Azure开发者任务之三：理解Azure应用程序（上）

    作为Windows Azure的托管服务被设计和开发的应用程序由这两部分组成: 1,托管代码 2,XML配置文件 托管代码对应不同的角色 XML文件对应不同的配置设置 我们可以看一下下面这张图,它详细 ...

  8. 数据库表被锁表，select会等待。

    SELECT * FROM dbo.Table_1 WITH(NOLOCK) 这样就可以不用等待,但数据读的是被锁之前的数据,表被锁了,肯定会有对表的update,delete操作. 如果对数据的准确 ...

  9. mysql服务器io等待高定位与分析

    这两天发现公司好几台阿里云ECS上的mysql生产服务器繁忙期间io等待高达百分之二三十(估计九成是没有write back),而且确定是mysql进程产生,由于跑的应用过多,开发和维护无法直接确定哪 ...

  10. 设计模式之Builder （创建者模式）的一些个人理解（转）

    对于Builder模式很简单,但是一直想不明白为什么要这么设计,为什么要向builder要Product而不是向知道建造过程的Director要.刚才google到一篇文章,总算清楚了.在这里转贴一下 ...