zoukankan      html  css  js  c++  java
  • Angularjs的My97DatePicker扩展

    对于日期控件来说,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属性即可

  • 相关阅读:
    做才是得到
    常用工具汇总
    迎接2017
    新年礼物
    2017
    asp.net core 日志
    板子|无向图的割点
    11/06信竞快乐模拟赛
    动态规划复习
    894D
  • 原文地址:https://www.cnblogs.com/TiestoRay/p/5085721.html
Copyright © 2011-2022 走看看