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
To disable past and future dates, we can use min and max properties in Datepicker input text with matInput attribute. If only past dates need to be disabled, configure only min property.
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.
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.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With