2016-09-27 55 views
2

我正在開發一個項目,我有一個md-datepicker,我希望這個md-datepicker只顯示一年中的月份(一月,二月等等) ......)。我怎樣才能做到這一點?md-datepicker視圖應該只顯示幾個月

這是到目前爲止我的代碼:

HTML

<md-datepicker ng-model="currentDate" md-current-view="month" md-date-filter="monthlyDate"></md-datepicker> 

JS

var app = angular.module("DashboardApp", ['ngMaterial', 'ngAnimate','md.data.table']); 
app.controller('rptController', ['$scope', function ($scope) { 
$scope.currentDate = new Date(); 
$scope.monthlyDate = new Date($scope.currentDate.getMonth('MM'))}]); 

回答

2

這聽起來像你想的MD-選擇,而不是MD-日期選擇器。看下面的例子。

(function() { 
 
    angular 
 
    .module('exampleApp', ['ngAnimate', 'ngAria', 'ngMaterial']) 
 
    .controller('ExampleController', ExampleController); 
 

 
    function ExampleController() { 
 
    var vm = this; 
 
    vm.monthNames = ["January", "February", "March", "April", "May", "June", 
 
     "July", "August", "September", "October", "November", "December" 
 
    ]; 
 
    } 
 
    ExampleController.$inject = []; 
 
})();
<!DOCTYPE html> 
 
<html ng-app='exampleApp'> 
 

 
<head> 
 
    <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.5/angular.min.js"></script> 
 
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.5/angular-animate.min.js"></script> 
 
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.5/angular-aria.min.js"></script> 
 
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/angular-material/1.0.9/angular-material.min.css"> 
 
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/angular-material/1.0.9/angular-material.min.js"></script> 
 
</head> 
 

 
<body ng-controller="ExampleController as vm"> 
 
    <md-input-container> 
 
    <md-select ng-model="vm.chosenMonth" placeholder="Select a month"> 
 
     <md-option ng-value="month" ng-repeat="month in vm.monthNames">{{ month }}</md-option> 
 
    </md-select> 
 
    </md-input-container> 
 
</body> 
 

 
</html>

+0

感謝@ScottL,這正是我所做的,因爲'MD-datepicker'有沒有屬性尚未選擇和顯示一個月或一年只。我嘗試使用'md-current-view =「year」',但點擊一個月之後仍顯示日期。十分感謝你的幫助。 –

3

這是可能的日期選擇器,與最新版本。您可以設置md-mode="month"工作演示下面

<md-input-container flex="100" layout="column"> 
      <div style="font-size: 10px; color: blue;" label ng-bind="::dateFields[2].label"></div> 
      <md-datepicker ng-model="dateFields.selectedDate" 
        ng-required="dateFields.required" 
        md-date-locale="dateFields.locale" 
        md-mode="month" 
        md-open-on-focus="true"> 
     </md-datepicker> 
    </md-input-container> 

DEMO

+0

不錯的演示對用戶好 –

+1

我使用CDN的角度材料庫,它不會工作。 它似乎只適用於來自formhero的圖書館。爲什麼? –

+1

明白了。更多信息https://github.com/angular/material/issues/9260 –