Angular-ui-bootstrap - 日期选择器 - 如何限制对弹出窗口中日期选择器的访问？答案

【问题标题】：Angular-ui-bootstrap - Date Picker - How can I restrict access to the date-selector in popup?Angular-ui-bootstrap - 日期选择器 - 如何限制对弹出窗口中日期选择器的访问？
【发布时间】：2014-03-11 10:34:34
【问题描述】：

目前，我可以先选择年份，然后选择月份，然后选择日期。但是，我只需要访问月份和年份。我不确定如何禁用日期选择器选项。

另外，我还想去掉日期选择器中的所有页脚按钮（今天、清除等）。我怎样才能做到这一点？

我正在寻找类似于 '$scope.showweeks = false;' 的内容

下面是我的 Plunker 示例

Plunker- Month year picker

请随时指导我查看任何可用的文档。到目前为止，我只能找到

http://angular-ui.github.io/bootstrap/

谢谢

【问题讨论】：

你能检查这些网址吗：eternicode.github.io/bootstrap-datepicker/…
我认为您不能这样做，因为 datepicker 仅支持 show-weeks 属性。我会写一些指令，将ng-show 添加到相关标签
@JQueryGuru - 谢谢。它运作良好。但是有没有办法使用角度访问相同的属性（minViewMode：1）？
@MaximShoustin - 是否可以像在引导日期选择器中那样以更简单的方式进行操作？我可以使用 date-disabled (date, mode) 功能来禁用日期选择器吗？我试着玩弄它，但无法让它工作。
有一个 ui bootstrap 项目，它是 bootstrap-datepicker 项目的一个分支：github.com/dalelotts/angular-bootstrap-datetimepicker

标签： angularjs angular-ui angular-ui-bootstrap

【解决方案1】：

您可以尝试将 datepicker 用于 Bootstrap 和由指令包装的 jQuery。

见Plunker

var app = angular.module('plunker', []);

app.controller('MainCtrl', function($scope) {
  $scope.var1 = '07-2013';
});


app.directive('datetimez', function() {
    return {
        restrict: 'A',
        require : 'ngModel',
        link: function(scope, element, attrs, ngModelCtrl) {
          element.datetimepicker({
           format: "MM-yyyy",
           viewMode: "months", 
            minViewMode: "months",
              pickTime: false,
          }).on('changeDate', function(e) {
            ngModelCtrl.$setViewValue(e.date);
            scope.$apply();
          });
        }
    };
});

HTML

   <div id="date" class="input-append" datetimez ng-model="var1">
      <input data-format="MM-yyyy" type="text" id="input1" name="input1"></input>
      <span class="add-on">
        <i data-time-icon="icon-time" data-date-icon="icon-calendar"></i>
      </span>
    </div>

【讨论】：

谢谢...！！在找到类似的帖子后，我正在努力。它工作得很好，除了我无法关闭它，除非我点击屏幕上的其他任何地方。有关闭按钮的api吗？或者可以双击一个月来设置它并关闭弹出窗口？
您使用哪个浏览器？
chrome 目前支持 ie-9 如果不是 8.
您可以从发布的链接JQuery Guru 获取源代码，并从我的示例中添加指令。之后，设置选项：autoclose: true。希望它应该工作

【解决方案2】：

您可以在设置中设置模式。例如，仅支持年份，选项如下所示：

    $scope.optionsYear = {
      showWeeks: false,
      minMode: 'year',
    };

并向日期选择器添加选项：

data-datepicker-options="optionsYear"

【讨论】：