Angular UI month picker
Solution 1
For those people who are facing this issue, I have tried a lot of things and here is the simplest method that I found:
<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>
The trick is that you must put datepicker-options="{minMode: 'month'}" datepicker-mode="'month'"
into the input
tag. This worked fine for me.
Solution 2
Just write these lines:
HTML
<datepicker ng-model="date" min-mode="month" datepicker-mode="'month'"></datepicker>
JS
$scope.date = new Date();
**Don't forget to include necessary js/css files from http://angular-ui.github.io/bootstrap/
These above code worked for me. :) I know Its too late, but it may help some one.
Solution 3
I fixed this by updating from ui-bootstrap 0.13.0 to 0.13.1. This is my markup:
<input type="text" ng-model="DOB" datepicker-popup="MM-dd-yyyy" datepicker-mode="'year'" is-open="dobOpen" ng-click="dobOpen = true" />
Solution 4
I couldn't get this to work as a month picker either, spent hours trying different options. Wish I checked the source code earlier - turns out the input type is key.
To change it to month picker mode, change the input type to "month". This works for both pop-up and in-line variants.
Following from the example on https://angular-ui.github.io/bootstrap/ you could do this:
<input type="month" class="form-control" datepicker-popup ng-model="dt" is-open="status.opened" min-date="minDate" max-date="maxDate" datepicker-options="dateOptions" date-disabled="disabled(date, mode)" ng-required="true" close-text="Close" />
<span class="input-group-btn">
<button type="button" class="btn btn-default" ng-click="open($event)"><i class="glyphicon glyphicon-calendar"></i></button>
</span>
Solution 5
Please find below my custom directive and html
Directive:
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;
}
}
}
Please place your respective code in datepicker.html used in the templateUrl of the directive to display the control as per your needs
My sample 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>
My Html in the final file where i am using the contorl :
<my-datepicker dt="vm.requestDate" //bind this to your controller
datepickermode="month"
minmode="month"
datestyle="yyyy/MM"
mindate="vm.MinDate" maxdate="vm.MaxDate"/>
On the click of the previous and next arrows, month decrements and increments respectively
Related videos on Youtube
Comments
-
harishr almost 2 years
I am trying to use angular-ui-datepicker as a month picker. But not able to configure it, tried it all. Here is the PLUNKER.
I tried to set the modes as
<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>
And also as part of: datepicker-options, using JS as
$scope.dateOptions = { 'year-format': "'yy'", 'starting-day': 1, 'datepicker-mode':"'month'", 'min-mode':"month" };
But that is also not working. Please help
-
van100j almost 10 yearsIt seems to be working fine. You have
datepicker-popup="MMM-yyyy"
fordatepicker-popup
attribute on your input field which shows the month and the year when you pick a date. If you'd like to show the day as well usedatepicker-popup="dd-MMM-yyyy"
for thedatepicker-popup
attributte. -
harishr almost 10 yearsit is displaying a month, that is ok.. but when the popup opens it shows a date picker and not month picker...
-
van100j almost 10 yearsSee this codepen.io/anon/pen/gmqrH
-
harishr almost 10 yearsalready seen that... but it does not work when the date is opened in popup
-
van100j almost 10 yearsYes, it seems currently it's only supported when used as inline datepicker, but not for the popup datepicker
-
klaus triendl about 9 yearsThe real issue I think is that modes specified as literal strings are not supported by now. You have to use a binding. The same applies to other options ['minDate', 'maxDate', 'datepickerMode', 'initDate', 'shortcutPropagation'] as well. Track this issue
-
dublx almost 9 yearsThe angular-bootstrap 0.13.0 didnt work for me in the inline mode, 0.11.0 worked OK and I can use the min-mode="month".
-
-
Dimon Buzz almost 9 yearsUgh, finally a solution. Thanks! This datepicker component in AngularUI is totally dysfunctional.
-
Aris Bartee over 8 yearsThis is the fix for anyone using version ~0.13.0
-
harishr over 6 yearsThe answer is not relevant to the question
-
Tanzeel over 4 yearsCan you please look at this question: stackoverflow.com/questions/59122863/… . I am in trouble. Please help.