md-date-range-picker/src/md-date-range-picker.html

Angular Material Date Range Picker

<div class="md-date-range-picker md-whiteframe-1dp" ng-class="{'md-date-range-picker__one-panel':onePanel}">
    <div layout="column">
        <div layout="row" layout-margin>
            <div class="md-date-range-picker__calendar-wrapper">
                <div class="md-date-range-picker__month-year" layout="row" layout-align="center center">
                    <div flex layout="column" layout-align="center center">
                        <span aria-label="Previous Month" class="md-button md-icon-button" event-key="prev">
                            <md-icon md-svg-src="data:image/svg+xml;base64,PHN2ZyB2ZXJzaW9uPSIxLjEiIHg9IjBweCIgeT0iMHB4IiB2aWV3Qm94PSIwIDAgMjQgMjQiPjxnPjxwb2x5Z29uIHBvaW50cz0iMTUuNCw3LjQgMTQsNiA4LDEyIDE0LDE4IDE1LjQsMTYuNiAxMC44LDEyICIvPjwvZz48L3N2Zz4="></md-icon>
                        </span>
                    </div>
                    <md-select md-container-class="md-date-range-picker__select" md-on-close="updateActiveDate()" ng-model="activeMonth" placeholder="{{::getLocalizationVal('Month')}}"
                        class="md-no-underline">
                        <md-option ng-value="::month.id" ng-repeat="month in months" ng-bind="::month.name"></md-option>
                    </md-select>
                    <md-select md-container-class="md-date-range-picker__select" md-on-close="updateActiveDate()" ng-model="activeYear" placeholder="{{::getLocalizationVal('Year')}}"
                        class="md-no-underline">
                        <md-option ng-value="::year.id" ng-repeat="year in years" ng-bind="::year.name"></md-option>
                    </md-select>
                    <div flex layout="column" layout-align="center center" class="hide-gt-sm show-sm show-xs">
                        <span aria-label="Next Month" class="md-icon-button md-button" event-key="next">
                            <md-icon style="transform: rotate(-180deg)" md-svg-src="data:image/svg+xml;base64,PHN2ZyB2ZXJzaW9uPSIxLjEiIHg9IjBweCIgeT0iMHB4IiB2aWV3Qm94PSIwIDAgMjQgMjQiPjxnPjxwb2x5Z29uIHBvaW50cz0iMTUuNCw3LjQgMTQsNiA4LDEyIDE0LDE4IDE1LjQsMTYuNiAxMC44LDEyICIvPjwvZz48L3N2Zz4="></md-icon>
                        </span>
                    </div>
                    <div flex ng-if="onePanel" layout="column" layout-align="center center" class="hide-sm hide-xs show-gt-sm">
                        <span aria-label="Next Month" class="md-icon-button md-button" event-key="next">
                            <md-icon style="transform: rotate(-180deg)" md-svg-src="data:image/svg+xml;base64,PHN2ZyB2ZXJzaW9uPSIxLjEiIHg9IjBweCIgeT0iMHB4IiB2aWV3Qm94PSIwIDAgMjQgMjQiPjxnPjxwb2x5Z29uIHBvaW50cz0iMTUuNCw3LjQgMTQsNiA4LDEyIDE0LDE4IDE1LjQsMTYuNiAxMC44LDEyICIvPjwvZz48L3N2Zz4="></md-icon>
                        </span>
                    </div>
                    <div flex ng-if="!onePanel" layout="column" layout-align="center center" class="hide-sm hide-xs show-gt-sm">
                        <span aria-label="Next Month" ng-disabled="true" aria-hidden="true" class="md-icon-button md-button">
                            <md-icon></md-icon>
                        </span>
                    </div>
                </div>
                <div class="md-date-range-picker__week" style="font-size: 0;">
                    <span class="md-date-range-picker__calendar__grid" ng-repeat="day in days">{{::day.name}}</span>
                </div>
                <div class="md-date-range-picker__calendar">
                    <span ng-repeat="date in dates" class="md-date-range-picker__calendar__grid" ng-class="{'md-date-range-picker__calendar__selected':inSelectedDateRange(date),'md-date-range-picker__calendar__start':isSelectedStartDate(date),'md-date-range-picker__calendar__end':isSelectedEndDate(date),'md-date-range-picker__calendar__not-in-active-month': !inCurrentMonth(date),'md-date-range-picker__calendar__today' : isToday(date),'md-date-range-picker__calendar__disabled': !isInMaxRange(date) || isDisabledDate({$date:date})}"
                        event-key="date1" event-param="{{$index}}">
                        <span event-key="date1" event-param="{{$index}}" class="md-date-range-picker__calendar__selection" ng-bind={{::date.getDate()}}></span>
                    </span>
                </div>
            </div>
            <div ng-show="!onePanel" class="md-date-range-picker__calendar-wrapper hide-sm hide-xs show-gt-sm">
                <div class="md-date-range-picker__month-year" layout="row" layout-align="center center">
                    <div flex layout="column" layout-align="center center" style="visibility: hidden">
                        <span aria-label="Previous Month" class="md-button md-icon-button" event-key="prev">
                            <md-icon md-svg-src="data:image/svg+xml;base64,PHN2ZyB2ZXJzaW9uPSIxLjEiIHg9IjBweCIgeT0iMHB4IiB2aWV3Qm94PSIwIDAgMjQgMjQiPjxnPjxwb2x5Z29uIHBvaW50cz0iMTUuNCw3LjQgMTQsNiA4LDEyIDE0LDE4IDE1LjQsMTYuNiAxMC44LDEyICIvPjwvZz48L3N2Zz4="></md-icon>
                        </span>
                    </div>
                    <md-select md-container-class="md-date-range-picker__select" md-on-close="updateActiveDate(true)" ng-model="activeMonth2"
                        placeholder="{{::getLocalizationVal('Month')}}" class="md-no-underline">
                        <md-option ng-value="::month.id" ng-repeat="month in months" ng-bind="::month.name"></md-option>
                    </md-select>
                    <md-select md-container-class="md-date-range-picker__select" md-on-close="updateActiveDate(true)" ng-model="activeYear2"
                        placeholder="{{::getLocalizationVal('Year')}}" class="md-no-underline">
                        <md-option ng-value="::year.id" ng-repeat="year in years" ng-bind="::year.name"></md-option>
                    </md-select>
                    <div flex layout="column" layout-align="center center">
                        <span aria-label="Next Month" class="md-icon-button md-button" event-key="next">
                            <md-icon style="transform: rotate(-180deg)" md-svg-src="data:image/svg+xml;base64,PHN2ZyB2ZXJzaW9uPSIxLjEiIHg9IjBweCIgeT0iMHB4IiB2aWV3Qm94PSIwIDAgMjQgMjQiPjxnPjxwb2x5Z29uIHBvaW50cz0iMTUuNCw3LjQgMTQsNiA4LDEyIDE0LDE4IDE1LjQsMTYuNiAxMC44LDEyICIvPjwvZz48L3N2Zz4="></md-icon>
                        </span>
                    </div>
                </div>
                <div class="md-date-range-picker__week" style="font-size: 0;" ng-if="!onePanel">
                    <span class="md-date-range-picker__calendar__grid" ng-repeat="day in days">{{::day.name}}</span>
                </div>
                <div class="md-date-range-picker__calendar">
                    <span ng-repeat="date in dates2" class="md-date-range-picker__calendar__grid" ng-class="{'md-date-range-picker__calendar__selected':inSelectedDateRange(date), 'md-date-range-picker__calendar__start':isSelectedStartDate(date), 'md-date-range-picker__calendar__end':isSelectedEndDate(date), 'md-date-range-picker__calendar__not-in-active-month': !inCurrentMonth(date, true), 'md-date-range-picker__calendar__today' : isToday(date),'md-date-range-picker__calendar__disabled': !isInMaxRange(date) || isDisabledDate({$date:date}) }"
                        event-key="date2" event-param="{{$index}}">
                        <span event-key="date2" event-param="{{$index}}" class="md-date-range-picker__calendar__selection" ng-bind={{::date.getDate()}}></span>
                    </span>
                </div>
            </div>
        </div>
        <div class="md-date-range-picker__templates" ng-if="showTemplate">
            <div ng-if="!onePanel && !maxRange" class="hide-xs hide-sm show-gt-sm" layout="row" layout-align="center center" layout-wrap>
                <div ng-repeat="(tmpltKey,tmpltName) in selectionTemplate" class="md-button" aria-label="{{::tmpltName}}" ng-class="selectedTemplate === tmpltKey ? 'md-primary md-raised' : ''"
                    event-key="{{tmpltKey}}" ng-bind="::tmpltName" flex="20">
                </div>
                <div ng-repeat="tmplt in customTemplates" class="md-button" aria-label="{{::tmplt.name}}" ng-class="selectedTemplate === tmplt.name ? 'md-primary md-raised' : ''"
                    ng-click="selectCustomRange(tmplt.name,tmplt)" event-key="Custom Template" ng-bind="::tmplt.name" flex="20">
                </div>
            </div>

            <div ng-if="!maxRange" ng-class="{'hide-gt-sm':!onePanel}" layout="column" layout-padding>
                <md-input-container>
                    <label>{{::getLocalizationVal('Date Range Template')}}</label>
                    <md-select md-container-class="md-date-range-picker__select" class="md-block" placeholder="{{::getLocalizationVal('Custom Date Range')}}" ng-model="selectedTemplate">
                        <md-option value=""></md-option>
                        <md-option ng-repeat="(tmpltKey,tmpltName) in selectionTemplate track by tmpltKey" aria-label="{{::tmpltName}}" ng-click="actionByKey(tmpltKey,null)"
                            ng-bind="::tmpltName" value="{{tmpltKey}}">
                        </md-option>
                        <md-option ng-repeat="tmplt in customTemplates" aria-label="{{::tmplt.name}}" ng-click="selectCustomRange(tmplt.name,tmplt)"
                            ng-bind="::tmplt.name" value="{{::tmplt.name}}">
                        </md-option>
                    </md-select>
                </md-input-container>
            </div>
        </div>
    </div>
</div>