我有一个带有 type="date" 的 input field 和一个 button:
<input type="date" name="DateOfBirth"class="form-control" ng-model="patient.DateOfBirth" format="dd/mm/yyyy" required="true" />
<span class="input-group-btn">
<button type="button" class="btn btn-default" ng-disabled="patient.PatientId" ng-click="open()">
<i class="fa fa-calendar"></i>
</button>
</span>
所以当我点击按钮时，日历(日期选择器)应该打开。这可能吗？
最佳答案
由于您的代码片段包含一些 AngularJS 指令，我假设您在代码中使用了它，我也将在我的解决方案中使用它。
您需要将在 ng-click 上调用的 open 方法创建到您的 $scope 对象中。在上述方法中，选择日历元素并触发其 focus() 事件以打开日历。
下面的工作代码:
(function(){
var app=angular.module('app',[]);
app.controller('MainController', function($scope){
$scope.open=function(){
document.getElementById('DateOfBirth').focus();
}
});
})();<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<body ng-app="app" ng-controller="MainController as app">
<input type="date" id="DateOfBirth" name="DateOfBirth" class="form-control" ng-model="patient.DateOfBirth" format="dd/mm/yyyy" required="true" />
<span class="input-group-btn">
<button id="calendarButton" class="btn btn-default" ng-disabled="patient.PatientId" ng-click="open()">
<i class="fa fa-calendar"></i>
</button>
</span>
</body>然而，这也可以在完全没有 JavaScript 的情况下完成；但为此，您需要将 button 替换为 label。单击 label 时，它会触发分配给它的 input 元素:
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css" rel="stylesheet"/>
<input type="date" id="DateOfBirth" name="DateOfBirth" class="form-control" ng-model="patient.DateOfBirth" format="dd/mm/yyyy" required="true" />
<span class="input-group-btn">
<label for="DateOfBirth" class="btn btn-default" ng-disabled="patient.PatientId" ng-click="open()">
<i class="fa fa-calendar"></i>
</label>
</span>关于javascript - 如何借助类型为 ="date"的输入字段中的按钮打开日历？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/37321367/