我有文本字段，它使用日期选择器。我希望文本字段应该是不可编辑的，所以我们只能使用 datepicker 进行编辑。
kindly have a look on
http://plnkr.co/edit/zekPQhWK6SgWdK2phRnJ?p=preview
任何帮助表示赞赏。
【问题讨论】：
readonly.
我设法使用 JavaScript 修复了它，我将重点放在下面的日历检查上：plunker
你也可以在同一个函数中调用按钮.click直接打开日历
<script>
function RejectEnter()
{
document.getElementById("btnCal").focus();
document.getElementById("btnCal").click();
return false;
}
对于 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>
【讨论】：
只需用 readonly 标记输入标签即可。
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>【讨论】：
将输入框设为只读是最简单的解决方案，我已经尝试过您的 plunker，只需放置 readonly 输入属性，它就可以按预期工作。
请看下面一行，
<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"/>
编码愉快。
【讨论】：
您可以将输入标记为禁用。用户将无法单击它来编辑其原始值，但他们可以打开日期选择器。
另一种方法是在用户单击输入时也打开日期选择器。
【讨论】：
只需要使用javascript覆盖输入控件上的按键事件即可禁止手动输入。
<input onkeydown="return false" ...... />
【讨论】：