md-datepicker only shows initial date when I click into the date input field

[bastienJS]

sample repro: http://plnkr.co/edit/B0xuv5pJyebju0SBb9gY?p=preview

the sample shows a start and end date for current date. But those dates are only then visible in the datepickers if I click into the input field of the datepicker.

Bug1:
This seems to be only a problem with CHROME. I use Version 45.0.2454.101 m.

In Firefox latest the init display of the dates are fine.

Bug2:
There is still another bug in Firefox, I can not close the dialog... in chrome it works!

[jsmylnycky]

+1 to getting this fixed

Note: One of our devs informed me that this isn't an issue if the datepicker is used outside of md-input-container....so that might be a hint as to where the bug is occurring.

[bastienJS]

When the md-datepicker is NOT put inside a md-input container then the validation messages have a wrong font-size and they are not RED and there is a DOUBLE line in latest Chrome.

Could someone official comment this bug report?

Thats my local code:

<md-dialog aria-label="Edit schoolyear" ng-cloak>
  <md-toolbar>
    <div class="md-toolbar-tools">
      <h2>Edit schoolyear</h2>
      <span flex></span>
      <md-button class="md-icon-button" ng-click="cancel()">
        <md-icon aria-label="Close dialog"></md-icon>
      </md-button>
    </div>
  </md-toolbar>
  <md-dialog-content layout-padding>

    <form name="schoolyearForm">

      <md-input-container>
        <input type="text" md-maxlength="30" required name="name" ng-model="schoolyear.name">

        <div ng-messages="schoolyearForm.name.$error">
          <div ng-message="required">This is required.</div>
          <div ng-message="md-maxlength">The name has to be less than 30 characters long.</div>
        </div>
      </md-input-container>

      <md-input-container>
        <md-datepicker aria-label="Start date" name="startDate" ng-model="schoolyear.startDate"
                       md-placeholder="Enter start date" required></md-datepicker>
        <div class="validation-messages" ng-messages="schoolyearForm.startDate.$error">
          <div ng-message="required">This is required!</div>
        </div>
      </md-input-container>

      <md-datepicker aria-label="End date" required name="endDate" ng-model="schoolyear.endDate"
                     md-placeholder="end date"></md-datepicker>
      <div class="validation-messages" ng-messages="schoolyearForm.endDate.$error">
        <div ng-message="required">This is required.</div>
      </div>

    </form>
  </md-dialog-content>
  <div class="md-actions" layout="row">
    <span flex></span>
    <md-button ng-click="cancel()">
      Cancel
    </md-button>
    <md-button ng-click="save()" style="margin-right:20px;">
      Save
    </md-button>
  </div>
</md-dialog>

[JobaDiniz]

Note: One of our devs informed me that this isn't an issue if the datepicker is used outside of md-input-container....so that might be a hint as to where the bug is occurring.

Exactly
+1

[jelbourn]

For now, md-datepicker doesn't go inside of an md-input-contianer. For the remaining problems, see #4233.

See #5504 for a fix to make this less ambiguous.