pm-controls/source/app/controls/components/date-picker/date-picker.html

ProModel Controls

<div class="date-picker-container">
    <div class="date-picker-box">
        <pm-text-box
            class="layout-flex-fill"
            [Text]="Text" 
            [IsDisabled]="IsDisabled"
            [Watermark]="Watermark"
            TextBoxClass="text-box-input layout-flex"
            (TextChange)="onTextChange($event)" 
            (BlurChange)="onBlurChange($event)"
            (FocusChange)="onFocusChange($event)">
        </pm-text-box>
        <pm-button-icon (click)="IsDropDownOpen = !IsDropDownOpen" [IsDisabled]="IsDisabled">
            <pm-icon-calendar></pm-icon-calendar>
        </pm-button-icon>
    </div>
    <pm-drop-down [IsDropDownOpen]="IsDropDownOpen" 
                  Width="100%"
                  MinWidth="300px"
                  MaxWidth="300px">
        <div class="dropdown-top-border"></div>
        <div class="date-picker-month">
            <pm-icon-angle-left class="date-picker-month-arrows" (click)="prevMonth()"></pm-icon-angle-left>
            <div class="date-picker-month-header">{{ date.format('MMMM YYYY') }}</div>
            <pm-icon-angle-right class="date-picker-month-arrows" (click)="nextMonth()"></pm-icon-angle-right>
        </div>
        <div class="date-picker-day-names">
            <span>Mon</span>
            <span>Tue</span>
            <span>Wed</span>
            <span>Thu</span>
            <span>Fri</span>
            <span>Sat</span>
            <span>Sun</span>
        </div>
        <div class="date-picker-days">                
            <div class="date-picker-week" *ngFor="let week of weeks; let w = index;">
                <span *ngFor="let d of week; let i = index;"
                    class="date-picker-day"
                    (click)="selectDate($event, d)"
                    [class.today]="d.today"
                    [class.is-active]="d.selected">
                {{ d.day }}
                </span>
            </div>
        </div>
    </pm-drop-down>    
</div>