对于日期控件来说,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. TinyFox在VS2015上的调试器

    这个一个TinyFox在VS2015上的调试工具 : 开源了 https://github.com/maxzhang1985/TinyFoxDEBUG 开发这个工具的初衷,是想更便捷的调试Nancy ...

  2. JS 模拟手机页面文件的下拉刷新

    js 模拟手机页面文件的下拉刷新初探 老总说需要这个功能,好吧那就看看相关的东西呗 最后弄出了一个简单的下拉刷新页面的形式,还不算太复杂 查看 demo 要在仿真器下才能看到效果,比如chrome的里 ...

  3. ok6410 android driver(9)

    In this essay, I will write the JNI to test our leds device. If you don't know how to create a jni p ...

  4. 组合数学 - 母函数的运用 --- hdu 1709 :The Balance

    The Balance Time Limit: 1000/1000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Others)Total ...

  5. jquery实现表格中点击相应行变色功能

    对于一个表格,为了使我们选中的项更容易区分,需要为选中项添加高亮,同时也需要,将其他项的高亮形式去除.类似于: <!DOCTYPE html> <html lang="en ...

  6. 小巧方便的MVC后端验证码,供大家学习借鉴

    调用: public ActionResult Vcode()//验证码 { string code = ValidateCode.CreateRandomCode(4); ValidateCode. ...

  7. 用stimulsoft Reports报表工具制作简单报表的过程

    这是在数据库sql server中People表的数据

  8. LeetCode1:Two Sum

    题目: Given an array of integers, find two numbers such that they add up to a specific target number. ...

  9. mongodb学习3---mongo的MapReduce

    1,概述MapReduce是个非常灵活和强大的数据聚合工具.它的好处是可以把一个聚合任务分解为多个小的任务,分配到多服务器上并行处理.MongoDB也提供了MapReduce,当然查询语肯定是Java ...

  10. 使用Jsoup解析html网页

    一.   JSOUP简介 在以往用java来处理解析HTML文档或者片段时,我们通常会采用htmlparser(http://htmlparser.sourceforge.net/)这个开源类库.现在 ...