md-datepicker attr-name

by Kai_Draord

HTML

<script src="https://code.jquery.com/jquery-2.1.4.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.8/angular.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.8/angular-animate.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.8/angular-aria.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-material/1.0.0-rc4/angular-material.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/angular-material/1.0.0-rc4/angular-material.css">
<div ng-app="myApp">
    <h2>Focus on each input and press 'enter' to see its name</h2>
    <div ng-controller="MyCtrl">
        <md-button class="md-fab" primary="A700" ng-disabled="true" aria-label="Calendar">
        <img class="png-icon" style="cursor: pointer;" ng-mousedown="ShowStartDateCalendar()" src="assets/img/icons/calendar-icon.png">
    </md-button>

    <div ng-show="showStartCalendar" class="startDate" style="padding-left:42px;" layout="column" flex-order="1" flex-order-gt-sm="0">
        <md-subheader primary="A700">Start Date</md-subheader>
        <md-calendar id="startTime" ng-mouseleave="HideStartDateCalendar()" ng-mousedown="ShowEndDateCalendar()" ng-model="startDate"></md-calendar>
    </div>

    <div ng-show="showEndCalendar" class="endDate" style="padding-left:42px;" layout="column" flex-order="1" flex-order-gt-sm="0">
        <md-subheader primary="A700">End Date</md-subheader>
        <md-calendar ng-mouseleave="HideEndDateCalendar()" ng-model="endDate"></md-calendar>
    </div>
    </div>
</div>

JavaScript

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

app.controller('MyCtrl', ['$scope', function MyCtrl ($scope) {
    $scope.showStartCalendar = true;
    $scope.showEndCalendar = true;
    $scope.name = '';
    $scope.startDate = new Date();
    $scope.endDate = new Date();
    $scope.checkName = function ($event) {
    	console.log($event.target.name);
        $scope.name = $event.target.name;
    };
}]);