Material: How to display WeekNumbers in md-datepicker?

[tahaerden]

I'm using the following config:

app.config(function($mdDateLocaleProvider) {
    // Can change week display to start on Monday.
    $mdDateLocaleProvider.firstDayOfWeek = 1;

    $mdDateLocaleProvider.parseDate = function(dateString) {
      var m = moment(dateString, 'DD.MM.YYYY', true);
      return m.isValid() ? m.toDate() : new Date(NaN);
    };

    $mdDateLocaleProvider.formatDate = function(date) {
      return moment(date).format('DD.MM.YYYY');
    };

    $mdDateLocaleProvider.weekNumberFormatter = function(weekNumber) {
      return 'Week' + weekNumber;
    };
  });

And here is my datepicker:

 <md-input-container>
                  <md-datepicker name="startDate" ng-model="startDate" placeholder="{{'startDate' | translate}}"  required></md-datepicker>
                  <div class="help-block" ng-messages="startDate.$error">
                    <div ng-messages-include="/components/error-messages.html"></div>
                  </div>
 </md-input-container>

Now I can see the weekNumber variable is working on my console. But how can I display it inside the calendar? I couldn't find an option for this on the doc.

[topherfangio]

Any chance you can turn this into a Codepen so we can play with it and try to provide a solution?

[tahaerden]

Hello @topherfangio ,

Sorry, it's been 2 months since I asked this and some other questions. I dropped using angular material later on. Unfortunately I don't have time to create a demo for this now.

But maybe if someone else also needs this functionality, this post might be useful.

[gretschann]

@topherfangio maybe this can help starting
http://codepen.io/alexwunder/pen/VpGpNN

i am on the same problem now. Trying to show week numbers

[topherfangio]

@tahaerden @gretschann The current <md-datepicker> does not have an option for showing the week number within the calendar itself. The weekNumberFormatter is used only for ARIA and screen reader support.

Since it's not in the spec, do you have a screenshot of what you're attempting to accomplish?

[gretschann]

@tahaerden sure, here is the my first attempt. Weeks are a extra column on the left side of calendar

[GauSim]

@gretschann looks awesome would like to see that coming with isoWeek support 👍

[topherfangio]

So, this is definitely very hacky, but I've created a quick example of how you might achieve this.

http://codepen.io/topherfangio/pen/YZoNVY

Unfortunately, as you can see in the demo, since we're appending these after the fact, it's wider than the virtual repeat is expecting and it's cutting off some of the days on the right. I'm not 100% sure how best to fix that, so if you could somehow absolute position them sortof like what your picture shows (maybe using mdPanel), that might work better so you don't modify the existing calendar object.

[MoeFahmy]

+1

[Splaktar]

We have no plans to add an option to visually display the week number on the calendar as this is not part of the Material Design Spec.