テキストフィールドを編集不可にする方法

私はdatepickerを使用するテキストフィールドを持っています。私はテキストフィールドを編集不可能にして、datepickerだけを使って編集できるようにします。テキストフィールドを編集不可にする方法

kindly have a look on 
http://plnkr.co/edit/zekPQhWK6SgWdK2phRnJ?p=preview

助けてください。

出典

2016-07-04 Sawan Kumar

あなたのプランカのリンクが機能していません –

http://plnkr.co/edit/zekPQhWK6SgWdK2phRnJ?p=preview –

入力を 'readonly'にしてください。 – RRK

入力を無効にすることができます。ユーザーは生の値を編集するためにそれをクリックすることはできませんが、datepickerを開くことができます。

もう1つの方法は、ユーザーが入力をクリックするたびに日付ピッカーを開くことです。

出典

2016-07-04 06:44:27

私は私が下のカレンダーのチェックにフォーカスを与えるJavaScriptを使用して、それを修正するために管理：plunker

ます。また、同じ機能に直接

<script> 
    function RejectEnter() 
    { 
    document.getElementById("btnCal").focus(); 
    document.getElementById("btnCal").click(); 
    return false; 
    }

をカレンダーを開くためのボタン.clickを呼び出すことができます

とHTMLのため：ちょうど読み取り専用意志で入力タグをマーキング

<input type="text" onfocus="return RejectEnter();" class="form-control" ng-model="dt" uib-datepicker-popup is-open="popupDateFrom.opened" datepicker-options="dateOptions" ng-required="true" close-text="Close"/> 
      <span class="input-group-btn"> 
      <button type="button" id="btnCal" class="btn btn-default" ng-click="open()"><i class="glyphicon glyphicon-calendar"></i></button> 
      </span>

出典

2016-07-04 06:49:25

目的を果たす。

angular.module('ui.bootstrap.demo', ['ngAnimate', 'ui.bootstrap']); 
 
angular.module('ui.bootstrap.demo').controller('DatepickerDemoCtrl', function ($scope) { 
 
$scope.inlineOptions = { 
 
    customClass: getDayClass, 
 
    minDate: new Date(), 
 
    showWeeks: true 
 
    }; 
 

 
    $scope.dateOptions = { 
 
    maxDate: new Date(2020, 5, 22), 
 
    minDate: new Date(), 
 
    startingDay: 1 
 
    }; 
 

 

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

 
    $scope.toggleMin(); 
 

 
    $scope.open = function() { 
 
    $scope.popupDateFrom.opened = true; 
 
    }; 
 
    
 
    $scope.open1 = function() { 
 
    $scope.popupDateTo.opened = true; 
 
    }; 
 
    
 
    $scope.popupDateFrom = { 
 
    opened: false 
 
    }; 
 
    
 
    $scope.popupDateTo = { 
 
    opened: false 
 
    }; 
 

 

 
    function getDayClass(data) { 
 
    var date = data.date, 
 
     mode = data.mode; 
 
    if (mode === 'day') { 
 
     var dayToCheck = new Date(date).setHours(0,0,0,0); 
 
    } 
 

 
    return ''; 
 
    } 
 
    
 
});

.full button span { 
 
    background-color: limegreen; 
 
    border-radius: 32px; 
 
    color: black; 
 
    } 
 
    .partially button span { 
 
    background-color: orange; 
 
    border-radius: 32px; 
 
    color: black; 
 
    }

<!doctype html> 
 
<html ng-app="ui.bootstrap.demo"> 
 
    <head> 
 
    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.3/angular.js"></script> 
 
    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.3/angular-animate.js"></script> 
 
    <script src="//angular-ui.github.io/bootstrap/ui-bootstrap-tpls-1.3.3.js"></script> 
 
    <script src="example.js"></script> 
 
    <link href="//netdna.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"> 
 
    </head> 
 
    <body> 
 

 
<div ng-controller="DatepickerDemoCtrl"> 
 
    <pre>Selected date is: <em>{{dt|date:'yyyy-MM-dd' }}</em></pre> 
 

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

 
    <hr /> 
 
</div> 
 
    </body> 
 
</html>

出典

2016-07-04 07:07:17

だけ手動入力を禁止するためにJavaScriptを使用して入力コントロールのキーイベントをオーバーライドする必要があります。

<input onkeydown="return false" ...... />

出典

2016-12-01 05:49:14 ProCylon

だけで作るの入力ボックスは読み取り専用私は、あなたのplunkerをしようとした場所だけで読み取り専用入力属性と、それは望ましい結果として働いてきた、最も簡単なソリューションです。

読み取り専用、次の行を見て

<input type="text" class="form-control" ng-model="dt" uib-datepicker-popup is-open="popupDateFrom.opened" datepicker-options="dateOptions" ng-required="true" close-text="Close"/>

場所下さい、線の上にコーディング

<input type="text" readonly class="form-control" ng-model="dt" uib-datepicker-popup is-open="popupDateFrom.opened" datepicker-options="dateOptions" ng-required="true" close-text="Close"/>

ハッピー、これに変更されます。

出典

2016-12-01 06:10:39

テキストフィールドを編集不可にする方法

答えて

関連する問題