2016-08-31 20 views
2

キー入力を無効にして、日付ピッカーを使用して入力に日付を追加するように強制しますが、これを行う方法はわかりません。 現在のソリューションでは、ユーザーは日付を選択できるだけでなく、入力に値を直接入力または消去することもできます。私は入力を無効にしたいので、ユーザーは何も入力したり消去したりすることはできませんが、datepickerを利用できるようにします。角度ui-bootstrap datepickerを入力に日付を追加する唯一の方法にする

角度ui-bootstrapにはすでにこの機能が含まれています(ドキュメントをチェックしましたが、何も見つかりませんでした)か、誰にも解決策がありますか?

これはui-bootstrap docsからの簡単なバージョンのコピーですが、その基本的に、私は自分のサイトで使用しているもの:

angular.module('ui.bootstrap.demo', ['ngAnimate', 'ngSanitize', 'ui.bootstrap']); 
 
angular.module('ui.bootstrap.demo').controller('DatepickerPopupDemoCtrl', function ($scope) { 
 
    $scope.today = function() { 
 
    $scope.dt = new Date(); 
 
    }; 
 
    $scope.today(); 
 

 
    $scope.dateOptions = { 
 
    formatYear: 'yy' 
 
    }; 
 

 
    $scope.open2 = function() { 
 
    $scope.popup2.opened = true; 
 
    }; 
 

 
    $scope.popup2 = { 
 
    opened: false 
 
    }; 
 

 
});
<!doctype html> 
 
<html ng-app="ui.bootstrap.demo"> 
 
    <head> 
 
    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular.js"></script> 
 
    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular-animate.js"></script> 
 
    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular-sanitize.js"></script> 
 
    <script src="//angular-ui.github.io/bootstrap/ui-bootstrap-tpls-2.1.3.js"></script> 
 
    <script src="example.js"></script> 
 
    <link href="//netdna.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"> 
 
    </head> 
 
    <body> 
 

 
<div ng-controller="DatepickerPopupDemoCtrl"> 
 
    
 
    <h4>Popup</h4> 
 
    <div class="row"> 
 

 
     <div class="col-md-6"> 
 
     <p class="input-group"> 
 
      <input type="text" class="form-control" uib-datepicker-popup ng-model="dt" is-open="popup2.opened" datepicker-options="dateOptions" ng-required="true" close-text="Close" /> 
 
      <span class="input-group-btn"> 
 
      <button type="button" class="btn btn-default" ng-click="open2()"><i class="glyphicon glyphicon-calendar"></i></button> 
 
      </span> 
 
     </p> 
 
     </div> 
 
    </div> 
 
    </div> 
 
    </body> 
 
</html>

答えて

0

は、入力にreadonly属性を追加し、あなたが期待するとして、それは動作します:)

angular.module('ui.bootstrap.demo', ['ngAnimate', 'ngSanitize', 'ui.bootstrap']); 
 
angular.module('ui.bootstrap.demo').controller('DatepickerPopupDemoCtrl', function ($scope) { 
 
    $scope.today = function() { 
 
    $scope.dt = new Date(); 
 
    }; 
 
    $scope.today(); 
 

 
    $scope.dateOptions = { 
 
    formatYear: 'yy' 
 
    }; 
 

 
    $scope.open2 = function() { 
 
    $scope.popup2.opened = true; 
 
    }; 
 

 
    $scope.popup2 = { 
 
    opened: false 
 
    }; 
 

 
});
<!doctype html> 
 
<html ng-app="ui.bootstrap.demo"> 
 
    <head> 
 
    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular.js"></script> 
 
    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular-animate.js"></script> 
 
    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular-sanitize.js"></script> 
 
    <script src="//angular-ui.github.io/bootstrap/ui-bootstrap-tpls-2.1.3.js"></script> 
 
    <script src="example.js"></script> 
 
    <link href="//netdna.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"> 
 
    </head> 
 
    <body> 
 

 
<div ng-controller="DatepickerPopupDemoCtrl"> 
 
    
 
    <h4>Popup</h4> 
 
    <div class="row"> 
 

 
     <div class="col-md-6"> 
 
     <p class="input-group"> 
 
      <input type="text"readonly class="form-control" uib-datepicker-popup ng-model="dt" is-open="popup2.opened" datepicker-options="dateOptions" ng-required="true" close-text="Close" /> 
 
      <span class="input-group-btn"> 
 
      <button type="button" class="btn btn-default" ng-click="open2()"><i class="glyphicon glyphicon-calendar"></i></button> 
 
      </span> 
 
     </p> 
 
     </div> 
 
    </div> 
 
    </div> 
 
    </body> 
 
</html>

+0

シンプルでとても素晴らしい!どうして私はそれを逃しただろう..おかげで! –

関連する問題