Javascript 角度引导日期选择器获取可见日期(日模式)
如果模式是day,我需要从Datepicker获取可见日期 例如: 在这种情况下,我需要得到这42天。另外,如果用户更改月份,我应该刷新Datepicker控制器视图并获得新的42天。因此我设法解决了这个问题。 我们需要扩展uibDatepickerDirectiveJavascript 角度引导日期选择器获取可见日期(日模式),javascript,angularjs,angular-ui-bootstrap,angular-ui,bootstrap-datepicker,Javascript,Angularjs,Angular Ui Bootstrap,Angular Ui,Bootstrap Datepicker,如果模式是day,我需要从Datepicker获取可见日期 例如: 在这种情况下,我需要得到这42天。另外,如果用户更改月份,我应该刷新Datepicker控制器视图并获得新的42天。因此我设法解决了这个问题。 我们需要扩展uibDatepickerDirective angular.module('ui.bootstrap.datepicker') .config(function ($provide) { $provide.decorator('uibDatepickerDirec
angular.module('ui.bootstrap.datepicker')
.config(function ($provide) {
$provide.decorator('uibDatepickerDirective', function ($delegate, $timeout) {
var directive = $delegate[0];
var link = directive.link;
angular.extend(directive.scope, {
visibleDates: '=?'
});
directive.compile = function () {
return function (scope, element, attrs, ctrls) {
link.apply(this, arguments);
var datepickerCtrl = ctrls[0];
datepickerCtrl.getVisibleDates = function () {
var year = this.activeDate.getFullYear(),
month = this.activeDate.getMonth(),
firstDayOfMonth = new Date(this.activeDate);
firstDayOfMonth.setFullYear(year, month, 1);
var difference = this.startingDay - firstDayOfMonth.getDay(),
numDisplayedFromPreviousMonth = difference > 0 ?
7 - difference : -difference,
firstDate = new Date(firstDayOfMonth);
if (numDisplayedFromPreviousMonth > 0) {
firstDate.setDate(-numDisplayedFromPreviousMonth + 1);
}
return this.getDates(firstDate, 42);;
}
var firstTime = true;
$timeout(function () {
scope.$watch("activeDt", function () {
var newValues = datepickerCtrl.getVisibleDates();
if (firstTime) {
scope.visibleDates = newValues;
firstTime = false;
return;
}
if (newValues[0].getYear() !== scope.visibleDates[0].getYear() ||
newValues[0].getMonth() !== scope.visibleDates[0].getMonth() ||
newValues[0].getDate() !== scope.visibleDates[0].getDate()) {
scope.visibleDates = newValues;
}
});
});
}
};
return $delegate;
});
});
在指令本身中,我们需要传递一个可见的日期,并指向我们想要保存这42天的变量
<span uib-datepicker visible-dates="visibleDates" datepicker- ng-model="datePicked"></span>
这样,如果在datepicker中更改月份,我们将更新visibleDates(其中42个),但是如果在同一个月份(相同的可见日期)更改activeDate(scope.activeDt),它将保持不变