CODEWITHSUNDEEP
angularjsangular-material
Shlomi Atia
Shlomi Atia

Reputation: 105

Angular Material Design datepicker

I'm using angular 1.6, material design 1.1.1, while using the datepicker, exactly like they says in their documentation, I'm getting an empty window while clicking on the datepicker, it shows only the days letter (S S M T W T F ) and only when scrolling inside that window the dates start showing. Any suggestions? thanks

<md-input-container flex>
    <label>Pick a date</label>
    <md-datepicker ng-model="myDate" name="dateField" md-min-date="minDate"
            md-max-date="maxDate"></md-datepicker>

    <div ng-messages="myOtherForm.dateField.$error">
            <div ng-message="valid">The entered value is not a date!</div>
            <div ng-message="required">This date is required!</div>
            <div ng-message="mindate">Date is too early!</div>
            <div ng-message="maxdate">Date is too late!</div>
    </div>
</md-input-container>

The JS:

var app = angular.module('StarterApp', ['ngMaterial', 'ngMdIcons', 'ngMessages']);

app.controller('AppCtrl', function($timeout , $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());

  $scope.onlyWeekendsPredicate = function(date) {
    var day = date.getDay();
    return day === 0 || day === 6;
  };

});

Upvotes: 1

Views: 283

Answers (1)

fernando
fernando

Reputation: 717

Looks like there is a bug in 1.6.X RC versions. Just use Angular 1.5.9 instead and here is a working sample.

var myDate = new Date(2016, 11, 3);

  $scope.minDate = new Date(
      myDate.getFullYear(),
      myDate.getMonth() - 2,
      myDate.getDate());

  $scope.maxDate = new Date(
      myDate.getFullYear(),
      myDate.getMonth() + 2,
      myDate.getDate());

  $scope.onlyWeekendsPredicate = function(date) {
    var day = date.getDay();
    return day === 0 || day === 6;
  };

http://codepen.io/samithaf/pen/XNzwMP

Upvotes: 1

Related Questions