2014-03-31 28 views
0

我有以下兩個使用datepicker的輸入字段。在多個輸入上使用datepicker

<div class="row"> 
       <input type="text" class="form-control" datepicker-popup="{{format}}" ng-model="dt" is-open="opened" min="minDate" max="'2015-06-22'" datepicker-options="dateOptions" date-disabled="disabled(date, mode)" ng-required="true" close-text="Close" /> 
       <span class="input-group-btn"> 
       <button class="btn btn-default" ng-click="open($event)"><i class="glyphicon glyphicon-calendar"></i></button> 
       </span> 
    <div> 

    <div class="row">   
       <input type="text" class="form-control" datepicker-popup="{{format}}" ng-model="dt2" is-open="opened" min="minDate" max="'2015-06-22'" datepicker-options="dateOptions" date-disabled="disabled(date, mode)" ng-required="true" close-text="Close" /> 
       <span class="input-group-btn"> 
       <button class="btn btn-default" ng-click="open($event)"><i class="glyphicon glyphicon-calendar"></i></button> 
       </span>  
    </div> 

控制器代碼

angular.module('plunker', ['ui.bootstrap']); 
var DatepickerDemoCtrl = function ($scope) { 
    $scope.today = function() { 
    $scope.dt = new Date(); 
    }; 
    $scope.today(); 

    $scope.showWeeks = true; 
    $scope.toggleWeeks = function() { 
    $scope.showWeeks = ! $scope.showWeeks; 
    }; 

    $scope.clear = function() { 
    $scope.dt = null; 
    }; 

    // Disable weekend selection 
    $scope.disabled = function(date, mode) { 
    return (mode === 'day' && (date.getDay() === 0 || date.getDay() === 6)); 
    }; 

    $scope.toggleMin = function() { 
    $scope.minDate = ($scope.minDate) ? null : new Date(); 
    }; 
    $scope.toggleMin(); 

    $scope.open = function($event) { 
    $event.preventDefault(); 
    $event.stopPropagation(); 

    $scope.opened = true; 
    }; 


    $scope.dateOptions = { 
    'year-format': "'yy'", 
    'starting-day': 1 
    }; 

    $scope.formats = ['dd-MMMM-yyyy', 'yyyy/MM/dd', 'shortDate']; 
    $scope.format = $scope.formats[0]; 
}; 

問題是,每當我點擊任何鏈接都壓延日期選擇器彈出。這裏是它的猛擊 http://plnkr.co/edit/hcLogY0SPsFzewcCt0xh?p=preview

請讓我知道如何解決它。謝謝

+1

http://stackoverflow.com/questions/22269964/how-to-use-2-or-more-angular-ui-bootstrap-datepicker-in-1-form/22270255#22270255 – wayne

回答

相關問題