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

<head>
  <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.1.3/angular-material.js"></script>
  <script src="//cdnjs.cloudflare.com/ajax/libs/moment.js/2.10.3/moment.js"></script>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/angular-material/1.1.3/angular-material.css">
  <script src="script.js"></script>
</head>

<body>

  <div ng-controller="AppCtrl" style='padding: 40px;'>
    <form>
      <md-content>
        <h4>Dynamic format date-picker</h4>
        <md-datepicker ng-if="!hideDate" ng-model="myDate" md-date-locale="locale"></md-datepicker> 
      </md-content>
    </form>
    <md-button ng-click="changeFormat()">Change format</md-button>
  </div>
</body>

</html>
angular.module('datepickerBasicUsage', ['ngMaterial'])
  .controller('AppCtrl', function($scope, $timeout) {
    $scope.format = 'L';
    $scope.myDate = new Date();
    
    $scope.locale = {
      formatDate: function(date) {
        var m = moment(date);
        return m.isValid() ? m.format($scope.format) : '';
      }
    };

    $scope.changeFormat = function() {
      $scope.format = 'DD MMMM YYYY';
      $scope.hideDate = true;
      $timeout(function() {
        $scope.hideDate = false;
      });
    };
  })
/* Styles go here */