手动打开日期选择器

Question

我无法以角度打开日期选择器。目标是获取日期范围，因此当我更改 dateStart 时，第二个日历应该会自动打开，但它不会。

我错过了什么？

已修复

似乎是 open-on-focus 指令的问题

工作 jsfiddle ： http://jsfiddle.net/9dfLawtz/

---

var app = angular.module('myApp', ['ngMaterial']);

app.controller('MyCtrl', ['$scope','$timeout', function MyCtrl ($scope,$timeout) {

$scope.dateFormat = '';
$scope.dateEnd = '';
$scope.dateStart = '';

$scope.changeDateStart = function(){
  var myEl = angular.element( document.querySelector( '#dateEnd' ) );
  myEl.focus();
  $scope.test = true;
  myEl.parent().find("input").focus();
}

}]);

HTML：

<div ng-app="myApp">
<h2>Focus on each input and press 'enter' to see its name</h2>
<div ng-controller="MyCtrl">
<button ng-click="openDatePicker()">
Click 
</button>
 <md-datepicker id="dateStart" 
        ng-model="dateStart" ng-change="changeDateStart()">
    </md-datepicker>
            <md-datepicker id="dateEnd" 
        ng-model="dateEnd" md-placeholder="dateEnd" md-open-on-focus>
    </md-datepicker>
    <p>input : {{ dateFormat }}</p>
</div>

http://jsfiddle.net/hx5g5g95/

Answer 1

您的代码有几个问题：

1- 您在超时中使用的 id 选择器未在您的元素中定义。因此，您需要将 id="dateEnd" 添加到元素中才能正常工作：

var myEl = angular.element( document.querySelector( '#dateEnd' ) );

2- 您将一个名为 dateEndOpened 的变量设置为 true 并希望打开第二个变量，而您在 ng-focus 中使用了相同的变量，这是错误的，因为 ng-focus 需要 function 而不是变量.

有关如何处理此问题的更多信息，请参阅此issue，但简短版本是添加

ng-focus="open()"

到您的第二个日期选择器。