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

时间:2014-03-11 10:34:34

标签: angularjs angular-ui angular-ui-bootstrap

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

另外,我想在日期选择器中删除所有页脚按钮(今天,清除等)。我怎样才能做到这一点?

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

以下是我的Plunker示例

Plunker- Month year picker

请随时向我索取任何可用的文件。到目前为止,我只能找到

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

由于

2 个答案:

答案 0 :(得分:9)

你可以尝试使用datepicker for Bootstrap with jQuery wrapped by directive。

参见 Plunker

<强> JS

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>

enter image description here

答案 1 :(得分:-1)

您可以在设置中设置模式。 例如,仅支持年份,选项看起来像这样:

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

并向datepicker添加选项:

data-datepicker-options="optionsYear"