Angular material datepicker component not working

Question

I am learning angularjs and using angularjs material datepicker component for date control but its not working, I am using the same code as found in material.angularjs.org but my control is not showing please help. My html page is 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());
});

above is the code which I got from the site's documentation. But its not working, what I am doing wrong. Please help.

@Michelem - There is no error, my page is opening but it only showing the label not the controls — Sudip_dotnetdv
– Sudip_dotnetdv, Commented Sep 15, 2015 at 6:04
I had a similar problem, but funny enough I realized I am using version 0.10.1 and datepicker has been introduced lately with the version 0.11.0 — mentat
– mentat, Commented Sep 24, 2015 at 6:30
In there month year picker available in this type of date picker? — forgottofly
– forgottofly, Commented Jul 6, 2016 at 7:38

macrog · Accepted Answer · 2016-01-31 09:57:56Z

4

you must have something wrong with your imports I think, I put you code in to 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>

and it's working fine ?! Please check you imports!

edited Jan 31, 2016 at 9:57

answered Sep 15, 2015 at 7:49

macrog

2,0951 gold badge23 silver badges30 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

zubergu Over a year ago

What was the problem actually? What solved it exactly?

macrog Over a year ago

links to css and js files were dead, fixed !

omkar.ghaisas Over a year ago

@macrog can you please post the css and js links that are working? As I have be trying to use the given links (in demo) and they don't work within the hot towel angular application.

danday74 · Accepted Answer · 2017-06-01 12:55:19Z

0

you need to mention the following in your app.module.ts

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

and this is in imports array

imports [
  MdDatepickerModule,
  MdNativeDateModule
]

edited Jun 1, 2017 at 12:55

danday74

58.1k56 gold badges273 silver badges337 bronze badges

answered Jun 1, 2017 at 9:39

surya ramakanth

91 bronze badge

Collectives™ on Stack Overflow

Angular material datepicker component not working

2 Answers 2

3 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related