以编程方式在 Angular Material 中打开 md-datepicker

Open md-datepicker in Angular Material Programmatically

本文关键字：md-datepicker Material Angular 编程 方式      更新时间：2023-09-26

我正在尝试在单击单个元素时从控制器打开MD日期选择器，但它不起作用，我使用的是最新版本的Angular Material> 1.0.4

我试图$inject$mdDatePicker，但它说找不到该模块。

MyController.$inject = [ '$mdDatePicker' ];

我也深入研究了最后一个文档，但找不到与此相关的任何内容

我设法用扩展指令破解了这个添加的功能：

.directive('mdDatepickerAutoopen', function ($timeout) {
  return {
    restrict: 'A',
    require: 'mdDatepicker',
    link: function (scope, element, attributes, DatePickerCtrl) {
      element.find('input').on('click', function (e) {
        $timeout(DatePickerCtrl.openCalendarPane.bind(DatePickerCtrl, e));
      });
    }
  };
})

<md-datepicker md-datepicker-autoopen>

关于未来的兼容性，我会小心这一点，因为它取决于内部实现细节而不是任何公共 API。话虽如此，这可能是一个尽可能温和的黑客。

如果您只需要对话框本身而不是日期字段，这是另一种黑客方法。

将日期选取器添加到指令模板，但将其隐藏：

<md-datepicker id="datepicker"
               ng-model="selectedDate"
               ng-change="dateChanged()"
               style="position: absolute; visibility: hidden;">
</md-datepicker>

通过以编程方式单击按钮将其打开。选择日期后，dateChanged函数将触发，您可以执行需要对日期执行的操作。

(function () {
    'use strict';
    angular.module("app").directive("someDirective", someDirective);
    someDirective.$inject = ["$timeout"];
    function someDirective($timeout) {
        return {
            templateUrl: 'app/directives/someDirective.html',
            restrict: 'EA',
            scope: {},
            link: function(scope, element) {
                scope.openDatePicker = function () {
                    $timeout(function() {
                        element.find("#datepicker button")[0].click();
                    }, 0);
                };
                scope.dateChanged = function () {
                    // Do something with scope.selectedDate
                };
            }
        };
    }
})();
相关文章：