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>
シンプルでとても素晴らしい!どうして私はそれを逃しただろう..おかげで! –