如何在输入字段中键入=“date”的按钮的帮助下打开日历?

时间:2016-05-19 11:06:55

标签: javascript html css

我有By input fieldtype="date"

button

因此,当我点击按钮时,日历(日期选择器)应该打开。这可能吗?

4 个答案:

答案 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)

试试这个(引导日期选择器)

&#13;
&#13;
$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;
&#13;
&#13;

答案 2 :(得分:0)

尝试以下方式

  1. 使用您的日期选择器
  2. 初始化input[name="DateOfBirth"]
  3. 专注于按钮上的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>