我有By
input field
和type="date"
:
button
因此,当我点击按钮时,日历(日期选择器)应该打开。这可能吗?
答案 0 :(得分:2)
由于你的代码片段包含了一些AngularJS指令,我假设你在代码中使用它,我也会在我的解决方案中使用它。
您需要在open
对象中创建ng-click
方法$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>
答案 1 :(得分:1)
试试这个(引导日期选择器)
$scope.open = function($event) {
$event.preventDefault();
$event.stopPropagation();
$scope.opened = !$scope.opened;
if ($("calenderselector").css("display") == "none") {
$("calenderselector").show();
} else {
$("calenderselector").hide();
}
};
&#13;
<input ng-change="onDateSelector()" id="DateOfBirth" name="DateOfBirth" ng-disabled="patient.PatientId" ng-click="opened=!opened" type="text" placeholder="dd-MM-yyyy" max-date="{{maxDate}}" class="form-control" datepicker-popup="{{format}}" ng-model="patient.DateOfBirth"
is-open="opened" min-date="minDate" required="true" close-text="Close" />
<span class="input-group-btn">
<button type="button" class="btn btn-default"ng-click="open($event)"><i class="fa fa-calendar"></i></button>
</span>
&#13;
答案 2 :(得分:0)
尝试以下方式
input[name="DateOfBirth"]
input[name="DateOfBirth"]
点击事件答案 3 :(得分:-1)
<!DOCTYPE html>
<html>
<body>
<p>Based on browser support:
A date picker can pop-up when you enter in input field.
</p>
<form action="date_demo.php">
Input type date test:
<input type="date" name="my_date">
<input type="submit">
</form>
<p><strong>Note:</strong>
type="date" is not supported in Internet Explorer 10 and earlier versions.
</p>
</body>
</html>