Angular UI月份选择器

Question

我试图使用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"   };

但这也行不通.请帮忙

Answer 1

对于那些面临这个问题的人,我尝试过很多东西,这是我找到的最简单的方法:

<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标签.这对我来说很好.

Answer 2

只需写下这些行:

HTML

 <datepicker ng-model="date" min-mode="month" datepicker-mode="'month'"></datepicker>

JS

$scope.date = new Date();

**不要忘记在http://angular-ui.github.io/bootstrap/中包含必要的js/css文件

以上代码对我有用.:)我知道它太晚了,但它可能对某人有所帮助.

Answer 3

我通过从 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" />

Answer 4

我不能把这个作为一个月的选择工作,花了几个小时尝试不同的选择.希望我之前检查过源代码 - 输出类型是关键.

要将其更改为月份选择器模式,请将输入类型更改为"月份".这适用于弹出式和内联式变体.

以下是https://angular-ui.github.io/bootstrap/上的示例,你可以这样做:

<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>