对于日期控件来说，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. 开放产品开发（OPD）：产品负责人的工作原则和方法

    月26日我将在2014 WOT全球软件技术峰会做相关的一个主题演讲[产品负责人的工作原则和方法],个原则和相应的一些方法. 以下是本次分享内容: 完整版如下,如果你喜欢想下载的话,点击 http:// ...

  2. mysql-5.6.14-winx64免安装配置

    MySQL5.6.11安装步骤(Windows7 64位) 1. 下载MySQL Community Server 5.6.14 2. 解压MySQL压缩包 将以下载的MySQL压缩包解压到自定义目录 ...

  3. CentOS6.5菜鸟之旅：纯转载Linux目录结构

    来自:http://www.iteye.com/topic/1125162 使用linux也有一年多时间了  最近也是一直在维护网站系统主机  下面是linux目录结构说明 本人使用的是centos系 ...

  4. mysql truncate带有被引用外键的表时报错解决方法

    清空具有外键约束的表时报ERROR 1701(42000)的解决   mysql> truncate table t_users;ERROR 1701 (42000): Cannot trunc ...

  5. MySQL 备份与还原详解

    相关阅读: MySQL备份和恢复具体实施 http://www.linuxidc.com/Linux/2012-12/76257.htm MySQL备份与恢复的三种方法总结 http://www.li ...

  6. [操作系统实验lab2]实验报告

    static void * alloc(u_int n, u_int align, int clear) { extern char end[]; int i; u_long alloced_mem; ...

  7. UnityShader快速上手指南（二）

    简介 前一篇介绍了如果编写最基本的shader,接下来本文将会简单的深入一下,我们先来看下效果吧 呃,gif效果不好,实际效果是很平滑的动态过渡 实现思路 1.首先我们要实现一个彩色方块 2.让色彩动 ...

  8. 使用HttpRequester模拟发送及接收Json请求

    1.开发人员在火狐浏览器里经常使用的工具有Firebug,httprequester,restclient......火狐浏览器有一些强大的插件供开发人员使用!需要的可以在附加组件中扩展. 2.htt ...

  9. js获取浏览器当前窗口的高度长度

    js获取浏览器可见区域(不包括标题栏.地址栏.收藏夹栏状态栏等额外区域,仅为页面呈现区域)的高度和宽度宽度:document.documentElement.clientWidth高度:documen ...

  10. Python入门笔记(14):Python的字符编码

    一.字符编码中ASCII.Unicode和UTF-8的区别 点击阅读:http://www.cnblogs.com/kingstarspe/p/ASCII.html 再推荐一篇相关博文:http:// ...