角材料日期选择器组件不起作用答案

【问题标题】：Angular material datepicker component not working角材料日期选择器组件不起作用
【发布时间】：2015-09-15 05:55:01
【问题描述】：

我正在学习 angularjs 并使用 angularjs 材质 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());
});

以上是我从网站文档中获得的代码。但它不起作用，我做错了什么。请帮忙。

【问题讨论】：

您检查调试控制台是否有错误？
@Michelem - 没有错误，我的页面正在打开，但它只显示标签而不是控件
我遇到了类似的问题，但很有趣的是，我意识到我使用的是 0.10.1 版本，并且最近在 0.11.0 版本中引入了 datepicker
在这种类型的日期选择器中有月份年份选择器吗？

标签： angularjs datepicker

【解决方案1】：

我想你的导入一定有问题，我把你的代码放到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>

它工作正常？！请检查您的进口情况！

【讨论】：

究竟是什么问题？究竟是什么解决了它？
css 和 js 文件的链接已失效，已修复！
@macrog 你能发布有效的css和js链接吗？因为我一直在尝试使用给定的链接（在演示中），但它们在热毛巾角应用程序中不起作用。

【解决方案2】：

您需要在 app.module.ts 中提及以下内容

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

这是在导入数组中

imports [
  MdDatepickerModule,
  MdNativeDateModule
]

【讨论】：