zoukankan      html  css  js  c++  java
  • [转]通过AngularJS directive对bootstrap日期控件的的简单包装

    本文转自:http://www.cnblogs.com/Benoly/p/4109460.html

    最近项目上了AngularJS,而原来使用的日期控件的使用方式也需要改变,于是开始了倒腾,看了官方的例子,可以使用AngularJS的directive做简单的处理,这样在html里直接使用申明的的形式即可使用了。

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63
    64
    65
    66
    67
    68
    69
    70
    71
    72
    73
    74
    75
    76
    77
    78
    79
    80
    81
    82
    83
    84
    <!doctype html>
    <html ng-app="datepickerApp">
        <head>
            <link type="text/css" rel="stylesheet" href="bootstrap/css/bootstrap.css" />
            <link type="text/css" rel="stylesheet" href="bootstrap-datepicker/css/datepicker3.css" />
            <script src="jquery/jquery-1.11.1.min.js"></script>
            <script src="angular.js"></script>
            <script src="bootstrap/js/bootstrap.js"></script>
            <script src="bootstrap-datepicker/js/bootstrap-datepicker.js"></script>
        </head>
        <body>
          <input type="text" class="datepicker" >
          <hr>
            <div ng-controller="datepickerController">
                <input type="text" bs-Datepicker ng-model="vm.selectedDate">
                <button ng-click="vm.show($event)">Date SELECT</button>
     
                <br>
                vm.selectedDate: {{vm.selectedDate}}
            </div>
             
            <script type="text/javascript">
                //bootstrap-datepicker
                var datepicker1 = $('.datepicker').datepicker()
                    .on('changeDate',function (ev){
                        var newDate = new Date(ev.date)                
                        datepicker1.hide()
     
                        alert(newDate)
                    })
                    .data('datepicker')
     
     
                //angular
                var app = angular.module('datepickerApp', [])
                 
                //angular-directive
                app.directive('bsDatepicker',function(){
                    return {
                        restrict : 'EA',
                        scope:{
                model:"=ngModel"
                },
                        link : function(scope,element,attrs,ctrl){
                            var datepicker1 = $(element).datepicker()
                                .on('changeDate',function (ev){
                                    var newDate = new Date(ev.date)                
                                    datepicker1.hide()
     
                                    alert(newDate)
                                })
                                .data('datepicker')
                        }
                    }
                })
     
                app.controller('datepickerController',function ($scope){
                     
                    var vm = $scope.vm = {
                        selectedDate : new Date(),
                        setDate : function(date){
                            selectedDate = date
                        },
                        clearDate : function(){
                            selectedDate =  null
                        },
                        show : function($event){
                             
                        },
                        hide : function(){
     
                        }
                    }
                     
     
          
     
     
     
                })
     
            </script>
        </body>
    </html>
  • 相关阅读:
    【分享】项目开发容易出现的问题?身为前端/后端你见到过吗?
    标准化API设计的重要性
    【分享】对外API接口安全设计
    【实例】调用数据库自动生成接口代码
    【翻译】API-First是什么概念?有什么商业价值?
    保障接口安全的5种常见方式
    【翻译】使用OpenAPI规范进行安全的API设计
    为什么需要API文档
    利用java的反射,实现工厂创建对象
    Cesium入门8
  • 原文地址:https://www.cnblogs.com/freeliver54/p/5209858.html
Copyright © 2011-2022 走看看