2015-09-15 22 views
5

anglejsを学んでいて、日付のコントロールのためにangularjsのmaterial datepickerコンポーネントを使用していますが、機能していないので、material.angularjs.orgのコードと同じコードを使用しています。 私のhtmlページはDatePicker.htmlです:上記角度のある素材の日付ピッカーのコンポーネントが動作しない

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

    <head> 
     <title></title> 
     <link href="angular-material.min.css" rel="stylesheet" /> 
     <script src="angular.min.js"></script> 
     <script src="angular-animate.min.js"></script> 
     <script src="angular-aria.min.js"></script> 
     <script src="angular-material.min.js"></script> 

     <script src="myapp.js"></script> 
    </head> 

    <body> 
     <div ng-controller="AppCtrl" style='padding: 40px;'> 
      <md-content> 
       <h4>Standard date-picker</h4> 
       <md-datepicker ng-model="myDate" md-placeholder="Enter date"></md-datepicker> 
       <h4>Disabled date-picker</h4> 
       <md-datepicker ng-model="myDate" placeholder="Enter date" disabled></md-datepicker> 
       <h4>Date-picker with min date and max date</h4> 
       <md-datepicker ng-model="myDate" placeholder="Enter date" md-min-date="minDate" md-max-date="maxDate"></md-datepicker> 
      </md-content> 
     </div> 
    </body> 

</html> 

myapp.js

angular.module('datepickerBasicUsage', ['ngMaterial']) 
.controller('AppCtrl', function($scope) { 
    $scope.myDate = new Date(); 
    $scope.minDate = new Date(
     $scope.myDate.getFullYear(), 
     $scope.myDate.getMonth() - 2, 
     $scope.myDate.getDate()); 
    $scope.maxDate = new Date(
     $scope.myDate.getFullYear(), 
     $scope.myDate.getMonth() + 2, 
     $scope.myDate.getDate()); 
}); 

私はサイトのドキュメントから得たコードです。 しかし、それは動作しません、私は間違っています。助けてください。あなたは私が思うあなたの輸入と間違って何かを持っている必要があります

+0

にある中で次のように言及する必要がありますか? –

+0

@Michelem - エラーはありません。私のページは開いていますが、コントロールではなくラベルしか表示していません。 –

+1

私は同様の問題がありましたが、面白いほど私はバージョン0.10.1を使用していて、 0.11.0 – mentat

答えて

4

、私はあなたがplunker

<div ng-controller="AppCtrl" style='padding: 40px;'> 
    <md-content> 
     <h4>Standard date-picker</h4> 
     <md-datepicker ng-model="myDate" md-placeholder="Enter date"></md-datepicker> 
     <h4>Disabled date-picker</h4> 
     <md-datepicker ng-model="myDate" placeholder="Enter date" disabled></md-datepicker> 
     <h4>Date-picker with min date and max date</h4> 
     <md-datepicker ng-model="myDate" placeholder="Enter date" 
       md-min-date="minDate" md-max-date="maxDate"></md-datepicker> 
    </md-content> 
</div> 

へのコード入れて、それが正常に働いています?!あなたが輸入品をチェックしてください!

+1

ありがとう、問題は解決しました –

+2

実際には何が問題でしたか?何がそれを正確に解決したのですか? – zubergu

+0

プランカが機能しません – Palo

1

はあなたのapp.module.ts

import { MdDatepickerModule } from '@angular/material'; 
import { MdNativeDateModule } from '@angular/material'; 

、これはあなたがエラーのデバッグコンソールを確認しました輸入配列

imports [ 
    MdDatepickerModule, 
    MdNativeDateModule 
] 
関連する問題