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>
  • 相关阅读:
    [匈牙利算法] 洛谷 P1640 连续攻击
    [dfs] Jzoj P5916 flow
    [bfs] Jzoj P3522 迷宫花园
    [二分][状压dp] Jzoj P3521 道路覆盖
    [模拟] Jzoj P3520 原根
    [并查集] Jzoj P5914 盟主的忧虑
    [树上差分][子树求和][树形dp] Jzoj P5911 Travel
    [思维][暴力] Jzoj P5912 VanUSee
    [dfs][离散化] Jzoj P5910 DuLiu
    [cdq分治][树的重心] 洛谷 P3806 点分治1
  • 原文地址:https://www.cnblogs.com/freeliver54/p/5209858.html
Copyright © 2011-2022 走看看