首页 文章

角度材料datepicker组件不起作用

提问于
浏览
6

我正在学习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());
});

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

2 回答

  • 0

    你认为你的进口肯定有问题,我把你的代码放到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>
    

    它工作正常吗?请检查你的进口!

  • 4

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

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

    这是在进口数组中

    imports [
      MdDatepickerModule,
      MdNativeDateModule
    ]
    

相关问题