why md-calendar directive initialize to wrong date AngularJS?

Question

How to assign md-calendar directive date value as today Date?

<md-calendar class="fixed-calendar" ng-model="myDate"> 
</md-calendar>

how to change apr 1935 to Aug 2018 in first calendar output. please any help? here is my working code https://codepen.io/anon/pen/RBveJv

You seem to have [this issue](https://github.com/angular/material/issues/10144). It was also [asked before](https://stackoverflow.com/questions/39828972/scroll-to-current-date-when-opening-md-calender). — tao, Aug 12 '18 at 03:57

score 1 · Accepted Answer · answered Aug 12 '18 at 05:31

This issue is basically a bug in the version of angular material v1.1.0, there is a GITHUB ticket with this issue details, by simply upgrading to the latest version angular material 1.1.10 as done in the below example. We can eliminate this issue.

If you are hessitant of upgrading your angular material version, here is the link containing the fix details for this issue. But I strongly recommend you upgrade angular material instead of fixing it yourself.

Below is a working demo for your reference.

angular.module('MyApp',['ngMaterial', 'ngMessages']).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());
  
  $scope.onlyWeekendsPredicate = function(date) {
    var day = date.getDay();
    return day === 0 || day === 6;
  }
});

.datepickerdemoBasicUsage {
  /** Demo styles for mdCalendar. */ }
  .datepickerdemoBasicUsage md-content {
    padding-bottom: 200px; }

  .datepickerdemoBasicUsage .validation-messages {
    font-size: 11px;
    color: darkred;
    margin: 10px 0 0 25px; }

.fixed-calendar {
  width: 340px;
  height: 340px;
  display: block;
}

.fixed-calendar .md-calendar-scroll-mask {
  width: 340px !important;
}

.fixed-calendar .md-virtual-repeat-scroller {
  width: 340px !important;
  height: 308px;
}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-messages.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-aria.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-animate.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-material/1.1.10/angular-material.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/angular-material/1.1.10/angular-material.min.css" rel="stylesheet"/>
<script src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/t-114/assets-cache.js"></script>
<div ng-controller="AppCtrl" style="padding: 40px;"  class="datepickerdemoBasicUsage" ng-app="MyApp" ng-cloak>
  <md-content>
    <md-calendar class="fixed-calendar" ng-model="myDate">
    </md-calendar>

    <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" md-placeholder="Enter date" disabled=""></md-datepicker>

    <h4>Date-picker with min date and max date</h4>
    <md-datepicker ng-model="myDate" md-placeholder="Enter date" md-min-date="minDate" md-max-date="maxDate"></md-datepicker>
    <h4>Only weekends are selectable</h4>
    <md-datepicker ng-model="myDate" md-placeholder="Enter date" md-date-filter="onlyWeekendsPredicate"></md-datepicker>

    <h4>Only weekends within given range are selectable</h4>
    <md-datepicker ng-model="myDate" md-placeholder="Enter date" md-min-date="minDate" md-max-date="maxDate" md-date-filter="onlyWeekendsPredicate"></md-datepicker>
    
    <h4>With ngMessages</h4>
    <form name="myForm">
      <md-datepicker name="dateField" ng-model="myDate" md-placeholder="Enter date" required="" md-min-date="minDate" md-max-date="maxDate" md-date-filter="onlyWeekendsPredicate"></md-datepicker>

      <div class="validation-messages" ng-messages="myForm.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 ng-message="filtered">Only weekends are allowed!</div>
      </div>
    </form>
    
  </md-content>
</div>

@NandhiniPriya Could you please check this [codepen](https://codepen.io/kai1992cool/pen/oMVERM) — Naren Murali, Aug 13 '18 at 10:59

score 0 · Answer 2 · answered May 08 '20 at 11:18

If you are hessitant of upgrading your angular material version

try something like this in controller

$scope.datepickeropen = function(){
    $timeout(function () {
        var e1 = jQuery.Event("keydown");
        e1.which = 40; // it is down
        $(".md-datepicker-calendar .md-focus").trigger(e1);
        var e2 = jQuery.Event("keydown");
        e2.which = 38; // it is up
        $(".md-datepicker-calendar .md-focus").trigger(e2);
    },500)
}

HTML as

<md-input-container>
    <label>Withdrawal Date</label>
    <md-datepicker ng-model="date" ng-focus="datepickeropen()"></md-datepicker>
</md-input-container>

angular.module('MyApp',['ngMaterial', 'ngMessages']).controller('AppCtrl', function($scope, $timeout) {
  $scope.myDate = new Date();
  $scope.datepickeropen = function(){
      $timeout(function () {
          var e1 = jQuery.Event("keydown");
          e1.which = 40; // it is down
          $(".md-datepicker-calendar .md-focus").trigger(e1);
          var e2 = jQuery.Event("keydown");
          e2.which = 38; // it is up
          $(".md-datepicker-calendar .md-focus").trigger(e2);
      },500)
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-messages.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-aria.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-animate.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-material/1.1.1/angular-material.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/angular-material/1.1.1/angular-material.min.css" rel="stylesheet"/>
<script src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/t-114/assets-cache.js"></script>

<div ng-controller="AppCtrl" style="padding: 40px;"  class="datepickerdemoBasicUsage" ng-app="MyApp" ng-cloak>
<div>Dummy Text for scroll on page</div>
<div>Dummy Text for scroll on page</div>
<div>Dummy Text for scroll on page</div>
<div>Dummy Text for scroll on page</div>
<div>Dummy Text for scroll on page</div>
<div>Dummy Text for scroll on page</div>
<div>Dummy Text for scroll on page</div>
<div>Dummy Text for scroll on page</div>
<div>Dummy Text for scroll on page</div>
<div>Dummy Text for scroll on page</div>
<div>Dummy Text for scroll on page</div>
<div>Dummy Text for scroll on page</div>
<div>Dummy Text for scroll on page</div>
<div>Dummy Text for scroll on page</div>
<div>Dummy Text for scroll on page</div>
<div>Dummy Text for scroll on page</div>
<div>Dummy Text for scroll on page</div>
<div>Dummy Text for scroll on page</div>
<div>Dummy Text for scroll on page</div>
<div>Dummy Text for scroll on page</div>
<div>Dummy Text for scroll on page</div>
<div>Dummy Text for scroll on page</div>
<div>Dummy Text for scroll on page</div>
<div>Dummy Text for scroll on page</div>
<div>Dummy Text for scroll on page</div>
<div>Dummy Text for scroll on page</div>
<div>Dummy Text for scroll on page</div>
<div>Dummy Text for scroll on page</div>
<div>Dummy Text for scroll on page</div>
<div>Dummy Text for scroll on page</div>
<div>Dummy Text for scroll on page</div>
<div>Dummy Text for scroll on page</div>
<div>Dummy Text for scroll on page</div>
<div>Dummy Text for scroll on page</div>
<div>Dummy Text for scroll on page</div>
<div>Dummy Text for scroll on page</div>

<h4>Standard date-picker <u>with issue fixed</u></h4>
    <md-datepicker ng-model="myDate" md-placeholder="Enter date" md-hide-icons="triangle" ng-focus="datepickeropen()"></md-datepicker>
    
    <h4>Standard date-picker <u>with issue</u></h4>
    <md-datepicker ng-model="myDate" md-placeholder="Enter date" md-hide-icons="triangle"></md-datepicker>
    

</div>

why md-calendar directive initialize to wrong date AngularJS?

2 Answers2

Linked