Innqube/ngx-iq-datepicker

<div class="calendar-container"
     [class.horizontal]="options.horizontal"
     [class.lg]="options.size === 'lg'"
     [class.sm]="options.size === 'sm'">
    <div class="row date-selector-row">
        <div class="col-sm-6">
            <div class="input-group">
            <span class="input-group-btn">
                <button tabindex="-1"
                        type="button"
                        class="btn btn-left btn-chevron btn-sm btn-default"
                        (click)="prevMonth()">
                    <i class="glyphicon glyphicon-chevron-left"></i>
                </button>
            </span>
                <select tabindex="-1"
                        class="form-control input-sm"
                        (change)="selectMonth($event.target.value)">
                    <option *ngFor="let month of translations.monthNames"
                            [value]="translations.monthNames.indexOf(month)"
                            [selected]="month === translations.monthNames[date.getMonth()]">
                        {{month}}
                    </option>
                </select>
                <span class="input-group-btn">
                <button tabindex="-1"
                        type="button"
                        class="btn btn-right btn-chevron btn-sm btn-default"
                        (click)="nextMonth()">
                    <i class="glyphicon glyphicon-chevron-right"></i>
                </button>
            </span>
            </div>
        </div>

        <div class="col-sm-2"></div>

        <div class="col-sm-4">
            <div class="input-group">
            <span class="input-group-btn">
                <button tabindex="-1"
                        type="button"
                        class="btn btn-left btn-chevron btn-sm btn-default"
                        (click)="prevYear()">
                    <i class="glyphicon glyphicon-chevron-left"></i>
                </button>
            </span>
                <input tabindex="-1"
                       class="form-control input-sm text-center"
                       type="text"
                       [value]="date.getFullYear()"
                       (keydown)="onKeyDown($event)"
                       (blur)="setYear($event.target.value)">
                <span class="input-group-btn">
                <button tabindex="-1"
                        type="button"
                        class="btn btn-right btn-chevron btn-sm btn-default"
                        (click)="nextYear()">
                    <i class="glyphicon glyphicon-chevron-right"></i>
                </button>
            </span>
            </div>
        </div>
    </div>

    <div class="row">
        <div class="col-sm-12">
            <div class="iq-calendar">
                <table class="table">
                    <thead>
                    <th class="text-center">{{translations.daysAbrev[0]}}</th>
                    <th class="text-center">{{translations.daysAbrev[1]}}</th>
                    <th class="text-center">{{translations.daysAbrev[2]}}</th>
                    <th class="text-center">{{translations.daysAbrev[3]}}</th>
                    <th class="text-center">{{translations.daysAbrev[4]}}</th>
                    <th class="text-center">{{translations.daysAbrev[5]}}</th>
                    <th class="text-center">{{translations.daysAbrev[6]}}</th>
                    </thead>
                    <tbody>
                    <tr *ngFor="let week of weeks">
                        <td *ngFor="let day of week"
                            class="text-center"
                            [class.selected-date]="day && day.isSelectedDate"
                            [class.current-month]="day && day.currentMonth"
                            [class.current-date]="day && day.currentDate">
                            <a *ngIf="day" class="date-value"
                               (click)="onDateSelected(day.value, day.prevMonth, day.nextMonth)">
                                {{day.value}}
                            </a>
                        </td>
                    </tr>
                    </tbody>
                </table>
            </div>
        </div>
    </div>

    <div class="row date-selector-row" *ngIf="options?.time">
        <div class="col-sm-4 col-sm-offset-4">
            <input class="form-control input-sm text-center"
                   [textMask]="{mask: timeMask}"
                   placeholder="hh:mm"
                   [formControl]="timeInput">
        </div>
    </div>
</div>