[Fixed] How do I set the `startAt` date when using Angular Material Calendar?


I’m using material2 v2.0.0-beta.10 as well as Angular v4 and having issues when using md-calendar component. My problem is that I’m unable to set the startAt date to anything.

I set start date to yesterday as follows:

  this.startAt = new Date();
  this.startAt = this.startAt.setDate(this.startDate - 1);

Here is a Plunkr of attempting to set the startAt date to yesterday.

What am I missing?


The start date accepts the following format:

startDate = new Date(1990, 0, 1);

Citing from the docs:

The month or year that the calendar opens to is determined by first
checking if any date is currently selected, if so it will open to the
month or year containing that date. Otherwise it will open to the
month or year containing today’s date. This behavior can be overridden
by using the startAt property of md-datepicker. In this case the
calendar will open to the month or year containing the startAt date.

So if you wish, say, to set the starting date to the next month, the following code should work:

let today = new Date();
let month = today.getMonth() + 1; //next month
let year = today.getUTCFullYear();
let day = today.getDay();

this.startAt = new Date(year, month, day);


Leave a Reply

(*) Required, Your email will not be published