Angularjs学习笔记3_datepicker

1.使用jquery-ui +angular

     <script src="http://libs.useso.com/js/jquery/1.11.1/jquery.js"></script>
     <script src="http://libs.useso.com/js/jqueryui/1.10.0/jquery-ui.js"></script>
     <script type='text/javascript' src='http://libs.useso.com/js/angular.js/1.2.9/angular.js'></script>

        <div class="row">
            <input type="text" datepicker1 ng-model="myObject1" />
            <input type="text" datepicker2 ng-model="myObject2" />        
        </div>

        app.directive('datepicker1', function() {
           return function(scope, element, attrs) {
               element.datepicker({
                   inline: true,
                   dateFormat: 'dd.mm.yy',
                   onSelect: function(dateText) {
                       var modelPath = $(this).attr('ng-model');
                       //putObject(modelPath, scope, dateText);
                       scope.$apply();
                   }
               });
           }
        });
        app.directive('datepicker2', function() {
            return {
                restrict: 'A',
                require : 'ngModel',
                link : function (scope, element, attrs, ngModelCtrl) {
                    $(function(){
                        element.datepicker({
                            dateFormat:'dd/mm/yy',
                            onSelect:function (date) {
                                scope.$apply(function () {
                                    ngModelCtrl.$setViewValue(date);
                                });
                            }
                        });
                    });
                }
            }
        });

2.使用 bootstrap + angular

     <script type='text/javascript' src='http://libs.useso.com/js/angular.js/1.2.9/angular.js'></script>
      <link rel="stylesheet" href="http://apps.bdimg.com/libs/bootstrap/3.2.0/css/bootstrap.min.css">
      <script src="http://cdn.bootcss.com/angular-ui-bootstrap/0.11.2/ui-bootstrap-tpls.js"></script>

    <div class="row">
        <section ng-controller="dateDemo" class="col-md-6" style="float:none; margin:5px auto; background:#fff; padding:5px;">
            //{{}} 双花括号为angular的取值表达式
            <pre class="">选定的日期是：<em>{{dt | date:'fullDate'}}</em></pre>
            <h4>在线：</h4>
            <section style="display:inline-block; min-height:240px;">
                <datepicker ng-model="dt" min-date="minDate" show-weeks="true" class="wellwell-sm"></datepicker>
            </section>
            <br>//ng-model 绑定dt模块 ， min-date  最少日期  show-weeks= ture 显示周  
            <h4>弹出：</h4>
            <div class="row">
                <div class="col-md-6">
                    <p class="input-group">
                        <input type="text" class="form-control" datepicker-popup="{{format}}" ng-model="dt" is-open="opened" min-date="minDate"

                      max-date="'2014-12-30'" datepicker-options="dateOptions" date-disabled = "disabled(date,mode)" ng-required="true" close-text="Close">
                        <span class="input-group-btn">
                            <button type="button" class="btn btn-default" ng-click="open($event)">
                                <i class="glyphicon glyphicon-calendar"></i>
                            </button>
                        </span>
                    </p>
                </div>
            </div>
            <br>ng-options 循环添加option  
            <div class="row">
                <div class="col-md-6">
                    <label for="">格式：</label>
                    <select name="" id="" class="form-control" ng-model="format" ng-options="f for f in formats"><option value=""></option></select>  
                </div>
            </div>
            <hr>
            <div>
                <button type="button" class="btn btn-info btn-sm" ng-click="today()">今天</button>  //一堆点击事件没什么好说的
                <button type="button" class="btn btn-sm btn-default" ng-click="dt = '2008-08-08'">2008-08-08</button>
                <button type="button" class="btn btn-sm btn-danger" ng-click="clear()" >清除</button>
                <button type="button" class="btn btn-sm btn-default" ng-click="toggleMin()" tooltip="After today">闵日期</button>
            </div>
        </section>
    </div>   

        var app = angular.module('a8_8', ['ui.bootstrap'])  ;

        app.controller('dateDemo',function($scope){
            $scope.today = function(){ // 创建一个方法，
                $scope.dt = new Date(); // 定义一个属性来接收当天日期
            };
            $scope.today(); // 运行today方法
            $scope.clear = function(){  //当运行clear的时候将dt置为空
                $scope.dt = null;
            }
            $scope.open = function($event){  // 创建open方法 。 下面默认行为并将opened 设为true
                $event.preventDefault();
                $event.stopPropagation();
                $scope.opened = true;
            }
            $scope.disabled = function(date , mode){
                return (mode === 'day' && (date.getDay() === 0 || date.getDay() === 6))
            }
            $scope.toggleMin = function(){
                $scope.minDate = $scope.minDate ? null : new Date(); //3元表达式，没啥好说的
            }
            $scope.toggleMin();
            $scope.dateOptions = {
                formatYear : 'yy',
                startingDay : 1
            }
            $scope.formats = ['dd-MMMM-yyyy','yyy/MM/dd','dd.MM.yyyy','shortDate']; //日期显示格式
            $scope.format = $scope.formats[0];  // 将formats的第0项设为默认显示格式
        });