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属性即可

  • 相关阅读:
    查看端口有没有被占用
    微信公众号2()
    How to insert a segment of noise to music file
    puppet practice
    Docker Commands
    LempelZiv algorithm realization
    The algorithm of entropy realization
    Java network programmingguessing game
    Deploy Openstack with RDO and Change VNC console to Spice
    puppet overview
  • 原文地址:https://www.cnblogs.com/TiestoRay/p/5085721.html
Copyright © 2011-2022 走看看