AngularJS와 입력 및 날짜 선택기 CSS를

Question

임 태블릿 응용 프로그램을 작성하고 난 AngularJS와 데모처럼 (https://material.angularjs.org/latest/demo/input를) DatePicker에서 넣을 필요하지만이 작동하지 않습니다 작동하지 않는 경우, 그림을 참조 각도 재질에서 :

<link href="resource/css/angular-material.min.css" rel="stylesheet"> 

다른 문제가 있습니다. 레이아웃 지시문이 작동하지 않습니다. 동일한 문제라고 생각합니다.

감사 Argate

Answer 1

나는 각도 피커 here의 작동 버전에 대한 링크를 첨부했습니다.

응용 프로그램은 다음과 같은 종속성을 포함 ['ngMaterial', 'ngMessages', 'material.svgAssetsCache']

이들은 당신이 CDN의 또는 내부 bower와, node 등이 여기에

<!-- Angular Material requires Angular.js Libraries --> 
    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular.min.js"></script> 
    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular-animate.min.js"></script> 
    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular-aria.min.js"></script> 
    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular-messages.min.js"></script> 

와 외부에서로드해야합니다 종속성은 포함 할 HTML 코드가 있습니다 날짜 선택 도구 :

<div ng-controller="AppCtrl" ng-cloak="" class="datepickerdemoBasicUsage" ng-app="MyApp"> 
    <md-content layout-padding=""> 

     <div layout-gt-xs="row"> 
      <div flex-gt-xs=""> 
       <h4>Standard date-picker</h4> 
       <md-datepicker ng-model="myDate" md-placeholder="Enter date"></md-datepicker> 
      </div> 
    </md-content> 
</div> 

종속성을로드했는지 확인하십시오. 예를 들어, 올바른 순서에있는 당신의 앱에 : ['ngMaterial', 'ngMessages', 'material.svgAssetsCache']뿐만 아니라 당신의 development.js 또는 production.js 파일로 작업중인 어떤 환경 따라

다음

당신이 당신의 개인 CSS 테마 포함 할 것입니다 방법입니다. 당신은 포함하지 않는 경우 을 (응용 프로그램의 설정과 주제는 다음 테마로 HTML 참조는

angular.module('myApp', ['ngMaterial']) 
.config(function($mdThemingProvider) { 

    $mdThemingProvider.theme('default') 
    .primaryPalette('pink', { 
     'default': '400', // by default use shade 400 from the pink palette for primary intentions 
     'hue-1': '100', // use shade 100 for the <code>md-hue-1</code> class 
     'hue-2': '600', // use shade 600 for the <code>md-hue-2</code> class 
     'hue-3': 'A100' // use shade A100 for the <code>md-hue-3</code> class 
    }) 
    // If you specify less than all of the keys, it will inherit from the 
    // default shades 
    .accentPalette('purple', { 
     'default': '200' // use shade 200 for default, and keep all other shades the same 
    }); 

}); 

Answer 2

은 여러 가지가 될 수는,이 작동하는 레이아웃입니다 :

<md-content flex layout-padding> 
    <div layout="row" layout-align=" start center"> 
    <md-datepicker ng-model="App" md-placeholder="date" flex></md-datepicker> 
    </div> 
</md-content> 

예 :

Angular Material App Layout

당신은 펜을 수행 할 수 있습니다 위의 내용을 포크하고 문제를 재현하려고 시도하십시오.