Angular UI月份选择器
Angular UI月份选择器
提问于 2014-05-19 20:03:57
我正在尝试使用angular-ui-datepicker作为一个月选择器。但无法对其进行配置，我尝试了所有的方法。这是PLUNKER。
我尝试将模式设置为
<input type="text" class="form-control col-md-3"
datepicker-popup="MMM-yyyy" min-mode="'month'" datepicker-mode="'month'"
ng-model="dt" is-open="opened" close-on-date-selection="true"
datepicker-options="dateOptions" date-disabled="disabled(date, mode)"
show-button-bar="false" show-weeks="false"/>
<span class="input-group-btn">
<button class="btn btn-default" ng-click="open($event)">
<i class="glyphicon glyphicon-calendar"></i>
</button>
</span>也作为: datepicker-options的一部分，使用JS作为
$scope.dateOptions = {
'year-format': "'yy'",
'starting-day': 1,
'datepicker-mode':"'month'",
'min-mode':"month" };但这也不起作用。请帮帮忙
回答 3
Stack Overflow用户
回答已采纳
发布于 2015-01-16 17:15:49
对于那些面临这个问题的人，我已经尝试了很多方法，下面是我找到的最简单的方法：
<input type="text" class="form-control" datepicker-popup="MM/yyyy" ng-model="dt" is-open="opened" datepicker-options="{minMode: 'month'}" datepicker-mode="'month'"/>
<span class="input-group-btn">
<button type="button" class="btn btn-default" ng-click="open($event)"><i class="glyphicon glyphicon-calendar"></i></button>
</span>诀窍在于您必须将datepicker-options="{minMode: 'month'}" datepicker-mode="'month'"放入input标记中。这对我来说很好。
Stack Overflow用户
发布于 2015-07-30 23:23:26
我通过从ui-bootstrap 0.13.0更新到0.13.1修复了这个问题。这是我的标记：
<input type="text" ng-model="DOB" datepicker-popup="MM-dd-yyyy" datepicker-mode="'year'" is-open="dobOpen" ng-click="dobOpen = true" />Stack Overflow用户
发布于 2016-07-09 03:19:27
请在下面找到我的自定义指令和html
指令：
angular.module('myModule')
.directive('myDatepicker', function () {
return {
restrict: 'E',
replace: true,
controller: DatePickerController,
controllerAs: 'vm',
scope: {
dt: '=',
datestyle: '@',
datepickermode: '@',
minmode: '@',
mindate: '=',
maxdate: '='
},
link: function (scope, $scope, $element) {
},
templateUrl: './datepicker.html'
};
})
.controller('DatePickerController', DatePickerController);
DatePickerController.$inject = ['$scope'];
function DatePickerController($scope) {
var vm = this;
if ($scope.datepickermode) {
vm.DatepickerMode = $scope.datepickermode;
} else {
vm.DatepickerMode = 'day';
}
if ($scope.minmode) {
vm.MinMode = $scope.minmode;
} else {
vm.MinMode = 'day';
}
if ($scope.mindate) {
vm.MinDate = new Date($scope.mindate);
} else {
vm.MinDate = new Date('1000/01/01');
}
if ($scope.maxdate) {
vm.MaxDate = new Date($scope.maxdate);
} else {
vm.MaxDate = new Date('9999/12/31');
}
vm.dateOptions = {
datepickerMode: vm.DatepickerMode,
minMode: vm.MinMode,
minDate: vm.MinDate,
maxDate: vm.MaxDate
};
vm.openCalendar = function () {
if (!$scope.dt) {
$scope.dt = new Date(Date.now());
}
vm.dateOptions = {
datepickerMode: vm.DatepickerMode,
minMode: vm.MinMode,
minDate: vm.MinDate,
maxDate: vm.MaxDate
};
vm.popupCalendar.opened = true;
};
vm.popupCalendar = {
opened: false
};
vm.changeValue = function () {
vm.popupCalendar.opened = true;
};
vm.prev = function () {
refreshDate(-1);
};
vm.next = function () {
refreshDate(1);
};
function refreshDate(cnt) {
var buf = new Date($scope.dt);
var bufDate = buf.getDate();
var bufMonth = buf.getMonth();
var bufYear = buf.getFullYear();
var changeDate;
switch (vm.MinMode) {
case 'day':
bufDate = bufDate + cnt;
changeDate = new Date(bufYear, bufMonth, bufDate);
break;
case 'month':
bufMonth = bufMonth + cnt;
changeDate = new Date(bufYear, bufMonth, '01');
break;
case 'year':
bufYear = bufYear + cnt;
changeDate = new Date(bufYear, 0, 1);
break;
}
if (changeDate >= vm.MinDate && changeDate <= vm.MaxDate) {
$scope.dt = changeDate;
}
}
}请将您各自的代码放在指令的templateUrl中使用的datepicker.html中，以便根据需要显示控件
我的示例datepicker.html：
<a type="button" class="btn btn-default btn-black btn-sm" name="day-before" ng-click="vm.prev()"><i class="fa fa-caret-left"></i></a>
<input type="text" uib-datepicker-popup="{{datestyle}}" ng-model="dt" class="btn btn-default btn-black btn-sm datetime-change input-day"
is-open="vm.popupCalendar.opened" ng-required="true" ng-click="vm.openCalendar()"
datepicker-options="vm.dateOptions" show-button-bar="false" show-weeks="false" close-on-date-selection="true" readonly />
<a type="button" class="btn btn-default btn-black btn-sm" name="day-after" ng-click="vm.next()"><i class="fa fa-caret-right"></i></a>我在最终文件中的Html，其中我使用了contorl：
<my-datepicker dt="vm.requestDate" //bind this to your controller
datepickermode="month"
minmode="month"
datestyle="yyyy/MM"
mindate="vm.MinDate" maxdate="vm.MaxDate"/>
单击上一个和下一个箭头时，月份将分别递减和递增
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/23737270
复制相关文章
相似问题
腾讯云开发者
