2015-09-15 23 views
5

Tôi đang học angularjs và sử dụng thành phần datepicker material date để kiểm soát ngày nhưng không hoạt động, tôi đang sử dụng cùng một mã như được tìm thấy trong material.angularjs.org nhưng điều khiển của tôi không hiển thị. trang html của tôi là DatePicker.html:Thành phần vật liệu datepicker góc không hoạt động

<!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()); 
}); 

trên là đoạn code mà tôi nhận được từ tài liệu của trang web. Nhưng nó không hoạt động, những gì tôi đang làm sai. Hãy giúp tôi.

+0

Bạn đã kiểm tra các debug console lỗi? –

+0

@Michelem - Không có lỗi, trang của tôi đang mở nhưng nó chỉ hiển thị nhãn không phải là điều khiển –

+1

Tôi gặp vấn đề tương tự, nhưng đủ hài hước tôi nhận ra mình đang sử dụng phiên bản 0.10.1 và datepicker đã được giới thiệu gần đây với phiên bản 0.11.0 – mentat

Trả lời

4

bạn phải có một cái gì đó sai với hàng nhập khẩu của bạn tôi nghĩ rằng, tôi đưa bạn mã trong để 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> 

và nó làm việc tốt?! Vui lòng kiểm tra bạn nhập khẩu!

+1

cảm ơn, đã giải quyết được sự cố –

+2

Sự cố thực sự là gì? Điều gì đã giải quyết nó chính xác? – zubergu

+0

plunker không hoạt động – Palo

1

bạn cần phải đề cập đến sau đây trong app.module.ts bạn

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

và điều này là nhập khẩu mảng

imports [ 
    MdDatepickerModule, 
    MdNativeDateModule 
] 
Các vấn đề liên quan