对于日期控件来说，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. UWP开发入门（十八）——使用ContentControl减少页面元素数量

    我们今天学习一下ContentControl,主要介绍如何使用ContentControl搭配DataTemplate来进行界面的复用,以及通过ContentTemplateSelector进一步减少 ...

  2. Django--上传文件

    需求 Django中forms表单上传文件处理​ 速查 views.py 1 2 3 4 5 6 7 8 9 def upload(request):     if request.method==' ...

  3. DIV+CSS常用网页布局技巧！

    以下是我整理的DIV+CSS常用网页布局技巧,仅供学习与参考! 第一种布局:左边固定宽度,右边自适应宽度 HTML Markup <div id="left">Left ...

  4. SerializationUtility

    public static T LoadFromXml<T>(string fileName) { FileStream fs = null; try { XmlSerializer se ...

  5. Python+Selenium进行UI自动化测试项目中，常用的小技巧4：日志打印，longging模块（控制台和文件同时输出）

    在前段时间,为了给项目中加入日志功能,就想到了 logging 模块,百度logging一大推,都是各种复制的,并没有找到自己想要的结果:我的目的很简单,就是:在把日志写入文件的同时在控制台输出,更加 ...

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

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

  7. java版复利计算器升级

    github地址:https://github.com/iamcarson/Carson 伙伴:彭宏亮 学号:201406114148 与伙伴工作帅照: 本次升级的地方: 1.改善了界面显示,让界面整 ...

  8. SQLServer根据不同前缀生成多套流水号

    --种子表 --@prefix 前缀 --@seed 种子值 create table RefNoSeed( prefix ) unique, seed int ) go --测试表 --@inser ...

  9. java俄罗斯方块游戏代码

    java俄罗斯方块游戏代码: package com; import java.awt.Color; import java.awt.Graphics; import java.awt.event.K ...

  10. sql server2008安装错误（无法处理异常）

    我在安装sql server2008时出现安装错误,无法处理的异常,问题如下: 解决方法:在地址栏输入C:\Users\Administrator\AppData\Local ,找到Microsoft ...