md2/datepicker/calendar.html

Angular2 based Material Design components, directives and services are Accordion, Autocomplete, Chips(Tags), Collapse, Colorpicker, Data Table, Datepicker, Dialog(Modal), Menu, Multiselect, Select, Tabs, Tags(Chips), Toast and Tooltip.

<div class="md2-calendar-header"><div *ngIf="type!=='time'" class="md2-calendar-header-year" [class.active]="_currentView == 'year'" (click)="_yearClicked()">{{ _yearLabel }}</div><div class="md2-calendar-header-date-time"><span *ngIf="type!=='time'" class="md2-calendar-header-date" [class.active]="_currentView == 'month'" (click)="_dateClicked()">{{ _dateLabel }}</span> <span *ngIf="type!=='date'" class="md2-calendar-header-time" [class.active]="_currentView == 'clock'"><span class="md2-calendar-header-hours" [class.active]="_clockView == 'hour'" (click)="_hoursClicked()">{{ _hoursLabel }}</span>:<span class="md2-calendar-header-minutes" [class.active]="_clockView == 'minute'" (click)="_minutesClicked()">{{ _minutesLabel }}</span></span></div></div><div class="md2-calendar-content" [ngSwitch]="_currentView"><div class="md2-month-content" *ngIf="_currentView === 'month' || _currentView === 'year'"><div class="md2-calendar-controls"><div class="md2-calendar-previous-button" [class.disabled]="!_previousEnabled()" (click)="_previousClicked()" aria-label="Previous month"><svg width="24" height="24" viewBox="0 0 24 24"><path d="M15.41 7.41L14 6l-6 6 6 6 1.41-1.41L10.83 12z"></path></svg></div><div class="md2-calendar-period-button" [@slideCalendar]="_calendarState" (@slideCalendar.done)="_calendarStateDone()"><strong>{{ _monthYearLabel }}</strong></div><div class="md2-calendar-next-button" [class.disabled]="!_nextEnabled()" (click)="_nextClicked()" aria-label="Next month"><svg width="24" height="24" viewBox="0 0 24 24"><path d="M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z"></path></svg></div></div></div><md2-month-view *ngSwitchCase="'month'" [activeDate]="_activeDate" [selected]="selected" [dateFilter]="_dateFilterForViews" (selectedChange)="_dateSelected($event)"></md2-month-view><md2-year-view *ngSwitchCase="'year'" [activeDate]="_activeDate" [selected]="selected" [dateFilter]="_dateFilterForViews" (selectedChange)="_monthSelected($event)"></md2-year-view><md2-clock *ngSwitchDefault [startView]="_clockView" [interval]="timeInterval" [min]="minDate" [max]="maxDate" [selected]="_activeDate" (activeDateChange)="_onActiveDateChange($event)" (selectedChange)="_timeSelected($event)"></md2-clock></div>