Angularjsカレンダーに「フォーカスを当てる」と「月をピッカー」を実装する方法は？

私はAngularjsを初めて使用していますが、Angular material version1.0.1を使用しているところで、以下のようにフォーカスを実装（Microsoft Windows 7のカレンダーと同様）する方法を私のカレンダーに追加するにはどうすればいいですか？ Angular資料を1.1.1に更新しないことにしました。Angularjsカレンダーに「フォーカスを当てる」と「月をピッカー」を実装する方法は？

<!doctype html> 
<html ng-app="datepickerBasicUsage"> 

<head> 
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/angular-material/1.0.1/angular-material.css"> 
</head> 

<body> 

    <div ng-controller="AppCtrl" style='padding: 40px;'> 
    <md-content> 
     <md-datepicker ng-model="birthdate" placeholder="Enter date" md-max-date="maxDate" ng-focus="open()"></md-datepicker> 
    </md-content> 
    </div> 

    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.4/angular.js"></script> 
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.4/angular-animate.min.js"></script> 
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.4/angular-aria.min.js"></script> 
    <script src="https://cdnjs.cloudflare.com/ajax/libs/angular-material/1.0.1/angular-material.js"></script> 
    <script src="app.js"></script> 

</body> 

</html>

app.js ---

angular.module('datepickerBasicUsage', ['ngMaterial']) 
    .controller('AppCtrl', function($scope, $timeout) { 
    $scope.birthdate = new Date(); 

    $scope.maxDate = new Date(
     $scope.birthdate.getFullYear(), 
     $scope.birthdate.getMonth(), 
     $scope.birthdate.getDate()); 

    $scope.open = function() { 
     $timeout(function() { 
     $scope.birthdate = new Date(); 
     $scope.maxDate = new Date(
      $scope.birthdate.getFullYear(), 
      $scope.birthdate.getMonth(), 
      $scope.birthdate.getDate()); 
     }, 400); 
    } 
    });

出典

2016-12-17 user7303839

既存のDatePickerのディレクティブと同じ名前のディレクティブを作成します。既にmd-datepickerを使用しているので、HTMLに何も追加する必要はありません。

app.directive('mdDatepicker', function() { 

    return { 
    link: function(scope, element) { 

     var controller = element.controller('mdDatepicker'); 

     var event = { 
     target: document.body 
     }; 

     var input = element.find('input'); 

     input.on('focus', function(e) { 

     scope.$apply(function() { 
      controller.openCalendarPane(event); 
     }); 
     }); 

     input.on('click', function(e) { 

     e.stopPropagation(); 
     }); 
    } 
    }; 
});

指令は通常mdDatepickerディレクティブが使用され、単純に入力がフォーカスされたときopenCalendarPaneメソッドを呼び出すコントローラを検索します。

mdDatepickerは内部でevent.targetを使用して、datepickerが閉じられたときのフォーカスを設定することを知っているため、偽のイベントオブジェクトが必要です。

クリックリスナーとevent.stopPropagationがFirefoxで動作するために必要です（少なくとも私がテストしたバージョンでは）、カレンダーは入力内をクリックして開くとただちに閉じるようになります。

デモ：それをしようとするためhttp://plnkr.co/edit/YdtVwa3MnTyrl5wS1eZ8?p=preview

出典

2016-12-18 14:39:00 tasseKATT

おかげで、期待どおりに動作していない言及したデモ。（カレンダーをクリックすることによって）フォーカスが開いていなければならない。 – user7303839

@ user7303839うまく動作します。どのブラウザでテストしていますか？ – tasseKATT

クローム54.0.2840.100で試してみましたが、IE11で修正して正しい解決策を指摘できますか？ – user7303839

Angularjsカレンダーに「フォーカスを当てる」と「月をピッカー」を実装する方法は？

答えて

関連する問題