在自动对焦的html5输入日期字段angularjs上打开datepicker

问题描述

我正在尝试自动调整angularjs中的日期字段。我已经为此写了一个指令，它可以正常工作，但是我遇到了一个问题。除非我不单击右侧的图标，否则HTML5日期选择器不会打开。

(function () {
  "use strict";

  angular
    .module("ctrauicomponents")
    .directive("inputAutoFocus",autoFocus);

  /**
   * @ngInject
   * @return {{restrict: string,link: autoFocusLink}}
   */
  function autoFocus ($timeout) {
    /**
     * @type {{restrict: string,link: autoFocusLink}}
     */
    var directive = {
      restrict: "A",link: autoFocusLink
    };

    return directive;

    /**
     * @ngInject
     * @param scope
     * @param element
     */
    function autoFocusLink (scope,element) {
      $timeout(function() {
        element[0].focus();
      });
    }
  }
})();

有人可以帮助我弄清楚如何在自动对焦上打开日期选择器，以及当我们在输入字段中单击任意位置时如何打开日期选择器。

谢谢

解决方法

`

<div layout-gt-xs="row">
    <div flex-gt-xs>
      <h4>Opening the calendar when the input is focused</h4>
      <md-datepicker ng-model="ctrl.myDate" md-placeholder="Enter date" md-open-on-focus></md-datepicker>
    </div>
</div>

`

angular.module('MyApp',['ngMaterial','ngMessages','material.svgAssetsCache']).controller('AppCtrl',function() { this.myDate = new Date(); this.isOpen = false; });

有关更多示例，请点击此Angular JS Material examples链接