控制器：
angular.module('bdbDateMultiSelect')
.component('bdbDateMultiSelect', {
templateUrl: bdbTemplate('/js/angular/template/bdbDateMultiSelect.template.html'),
bindings: {
dates: '=',
initValue: '=',
identifier: '<',
placeholder: '<',
disabled: '<',
minDate: '<',
maxDate: '<',
required: '=ngRequired'
},
controller: ['$scope', '$timeout', function ($scope, $timeout) {
var self = this;
self.value = '';
self.isOpen = false;
self.dateOptions = {
startingDay: 1,
showWeeks: false,
customClass: getCustomClass,
};
self.$onInit = function () {
self.dates = [];
self.setPreDefinedDate();
if (self.initValue) {
self.onDateChange();
}
};
self.setPreDefinedDate = function () {
for (var i = 0; i < self.dates.length; i++) {
self.dates[i] = moment(self.dates[i]).toDate();
}
if (angular.isDefined(self.minDate)) {
self.minDate = moment(self.minDate).toDate();
self.dateOptions.minDate = self.minDate;
}
if (angular.isDefined(self.maxDate)) {
self.maxDate = moment(self.maxDate).toDate();
self.dateOptions.maxDate = self.maxDate;
}
if (!angular.isDefined(self.placeholder)) {
self.placeholder = "Välj datum..."
}
};
self.onDateChange = function () {
$timeout(function () {
var value = '';
self.dates
.sort(function (date1, date2) {
return date1 - date2;
})
.forEach(function (date, i) {
value += moment(date).format("YYYY-MM-DD");
if ((i + 1) < self.dates.length) {
value += ', ';
}
});
self.value = value;
});
};
self.close = function () {
if (self.isOpen === true) {
self.isOpen = false;
}
};
function getCustomClass(data) {
var customClass = '';
if (data.mode === 'day') {
var month = data.date.getMonth();
var activeMonth = this.datepicker.activeDate.getMonth();
if (month === activeMonth) {
customClass = 'active-day';
}
}
return customClass;
}
}]
})
.directive('onDateMultiSelectDocumentClick', [ // closes datepicker when clicked outside
function () {
return {
restrict: 'A',
link: function (scope, element) {
element.on('click', function (e) {
e.stopPropagation();
});
}
}
}
]);
模板：
<link href="/js/angular/template/bdbDateMultiSelect.css?v=1" rel="stylesheet"/>
<div class="date-multi-select" uib-dropdown is-open="$ctrl.isOpen" on-date-multi-select-document-click="$ctrl.close()">
<div class="input-group">
<input type="text"
class="form-control"
placeholder="{{ $ctrl.placeholder }}"
ng-model="$ctrl.value"
ng-required="$ctrl.required"
ng-disabled="$ctrl.disabled"
ng-click="$ctrl.isOpen = true"
ng-readonly="true">
<div class="input-group-btn addon-button">
<button type="button" class="btn btn-default" ng-click="$ctrl.isOpen = true">
<i class="far fa-calendar-alt"></i>
</button>
</div>
</div>
<div class="dropdown-menu" uib-dropdown-menu>
<div uib-datepicker
ng-model="$ctrl.dt"
datepicker-options="$ctrl.dateOptions"
multi-select="$ctrl.dates"
template-url="datepicker-multi-select.html"
ng-change="$ctrl.onDateChange()">
</div>
</div>
</div>
<script type="text/ng-template" id="datepicker-multi-select.html">
<div ng-switch="datepickerMode">
<div uib-daypicker ng-switch-when="day" tabindex="0" class="uib-daypicker" template-url="multiday.html"></div>
<div uib-monthpicker ng-switch-when="month" tabindex="0" class="uib-monthpicker"></div>
<div uib-yearpicker ng-switch-when="year" tabindex="0" class="uib-yearpicker"></div>
</div>
</script>
<script type="text/ng-template" id="multiday.html">
<table class="table" role="grid" aria-labelledby="{{::uniqueId}}-title" aria-activedescendant="{{activeDateId}}">
<thead>
<tr>
<th>
<button type="button" class="btn btn-default btn-sm pull-left uib-left" ng-click="move(-1)" tabindex="-1">
<i aria-hidden="true" class="glyphicon glyphicon-chevron-left"></i><span class="sr-only">previous</span>
</button>
</th>
<!-- Month and year in calender -->
<th colspan="{{::5 + showWeeks}}">
<button id="{{::uniqueId}}-title" role="heading" aria-live="assertive" aria-atomic="true" type="button" class="btn btn-default btn-sm uib-title" ng-click="toggleMode()" ng-disabled="datepickerMode === maxMode" tabindex="-1">
<strong>{{title}}</strong>
</button>
</th>
<th>
<button type="button" class="btn btn-default btn-sm pull-right uib-right" ng-click="move(1)" tabindex="-1">
<i aria-hidden="true" class="glyphicon glyphicon-chevron-right"></i>
<span class="sr-only">next</span>
</button>
</th>
</tr>
<tr>
<th ng-if="showWeeks" class="text-center"></th>
<th ng-repeat="label in ::labels track by $index" class="text-center"><small aria-label="{{::label.full}}">{{::label.abbr}}</small></th>
</tr>
</thead>
<!-- Dates in calender -->
<tbody>
<tr class="uib-weeks" ng-repeat="row in rows track by $index" role="row">
<td ng-if="showWeeks" class="text-center h6"><em>{{ weekNumbers[$index] }}</em></td>
<td ng-repeat="dt in row" class="uib-day text-center" role="gridcell" id="{{::dt.uid}}" ng-class="::dt.customClass">
<button type="button"
class="btn btn-default btn-sm"
ng-class="{ 'btn-info': dt.selected }"
ng-click="select(dt.date)"
ng-disabled="::dt.disabled"
tabindex="-1">
<!--'uib-is-class="'btn-info' for selectedDt, 'active' for activeDt on dt"-->
<span ng-class="::{'text-muted': dt.secondary, 'text-info': dt.current}">{{::dt.label}}</span>
</button>
</td>
</tr>
</tbody>
</table>
</script>