没有日视图选项

时间:2017-05-01 09:15:18

标签: javascript angularjs material-design angular-material

我想显示我的日期选择器,其日期视图与信用卡到期视图一样 为此,我遵循以下代码,但在选择月份和视图后我进入所选月份的日期视图....如何克服这个



angular.module('datepickerBasicUsage', ['ngMaterial'])
.controller('AppCtrl', function ($scope) {
  var monthFormat = buildLocaleProvider("MMM-YYYY");
   function buildLocaleProvider(formatString) {
    return {
      formatDate: function(date) {
        if (date) return moment(date).format(formatString);
        else return null;
      },
      parseDate: function(dateString) {
        if (dateString) {
          var m = moment(dateString, formatString, true);
          return m.isValid() ? m.toDate() : new Date(NaN);
        } else return null;
      }
    };
  }


  $scope.dateFields = {
    type: 'date',
    required: false,
    binding: 'applicant.expectedGraduation',
    //startView: 'month',
    label: 'Credit Card Expiry - Year/Month picker',
    locale: monthFormat
  };
});

<!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.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.15.1/moment-with-locales.min.js"></script>
    
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/angular-material/1.1.3/angular-material.css">
    
    <script src="app.js"></script>
  </head>
  <body>

  <div ng-controller="AppCtrl" style='padding: 40px;'>
    <md-datepicker ng-model="dateFields.selectedDate"
                     ng-required="dateFields.required"
                     md-date-locale="dateFields.locale"
                     md-current-view="year"
                     md-open-on-focus="true">
        </md-datepicker>
  </div>
  </body>
</html>
&#13;
&#13;
&#13;

0 个答案:

没有答案