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

  • 相关阅读:
    二叉树的遍历
    十进制与m进制的相互转化
    【素数】Prime Distance
    【数论】Sumdiv(整数的唯一分解定理+约束和公式+递归求等比)
    【错位+组合】排列计数
    【扩展欧几里得】青蛙的约会
    【归并排序+逆序数】poj-2299 Ultra-QuickSort
    【模拟】Sandglass
    【位运算】高效解决n皇后问题
    Popular Cows
  • 原文地址:https://www.cnblogs.com/TiestoRay/p/5085721.html
Copyright © 2011-2022 走看看