Open md-datepicker in Angular Material Programmatically

Question

I'm trying to open a MD Date Picker from my Controller when click on a single element but it's not working, I'm using the last version of Angular Material > 1.0.4

I've tried to $inject the $mdDatePicker but it says that couldn't find the module.

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

I've also digged into the last documentation but couldn't find anything related to this

Answer 1

I managed to hack this added functionality in with an extending directive:

.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>

I'd be careful with this regarding future compatibility, since it depends on internal implementation details instead of any public API. Having said that, this is probably as gentle a hack as possible.

Answer 2

Here's another hacky way to do it if you only need the dialog itself and not the date field.

Add the datepicker to a directive template, but hide it:

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

Open it by clicking the button programmatically. When a date is selected, the dateChanged function will fire and you can do what you need to do with the date.

(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
                };
            }
        };
    }
})();