码迷,mamicode.com
首页 > Web开发 > 详细

Angularjs的My97DatePicker扩展

时间:2015-12-29 15:52:43      阅读:1331      评论:0      收藏:0      [点我收藏+]

标签:

对于日期控件来说,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扩展

标签:

原文地址:http://www.cnblogs.com/TiestoRay/p/5085721.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!