【问题标题】:uib-datepicker-popup with dynamic minMode带有动态 minMode 的 uib-datepicker-popup
【发布时间】:2017-04-17 18:58:41
【问题描述】:

如何动态设置Angular Bootstrap Datepicker的minMode?​​p>

我得到它的唯一方法是:

<input type="text" ng-model="myDate"
       uib-datepicker-popup="{{datepickerFormat}}"
       datepicker-options="{'minMode': minMode}"/>

在控制器中

...
$scope.minMode='day';

它运行良好,但是当 minMode 更改并且日期选择器重新打开时,我在浏览器控制台中出现 $compile:nonassignNon-Assignable 错误。所以我想做类似的事情:

<input type="text" ng-model="myDate"
       uib-datepicker-popup="{{datepickerFormat}}"
       min-mode="minMode"/>

但不幸的是,它不再起作用了。

Angular version: 1.5.9
Bootstrap version: 3.3.7
angular-bootstrap version: 1.2.5

See in Plunker

【问题讨论】:

  • 添加 plunkr,这将是可观的..
  • 谢谢。我编辑了

标签: javascript angularjs datepicker angular-ui-bootstrap


【解决方案1】:

您没有正确放置 minMode

因为您在日期选择器中放置选项,然后使用按钮更改这些选项,所以您需要在控制器中定义 options 对象并在两个位置引用它。

<div class="input-group">
    <input type="text"
        ng-model="myDate"
        is-open="showDatePicker"
        uib-datepicker-popup="mm-dd-yyyy"
        datepicker-options="options"/>
</div>

在控制器中

$scope.options = {'showWeeks': false, 'minMode': 'month'};

现在您可以使用 ng-click 表达式更改 minMode 属性

<button ng-click="options.minMode = 'day'" class="btn">Day</button>
<button ng-click="options.minMode = 'month'" class="btn" >Month</button>

Updated plunk

【讨论】:

  • 谢谢!你帮我找到解决办法。单击按钮时,我必须调用一个更改整个选项对象的方法。当我按照您的建议进行操作时,日期选择器更改了最小模式,但当我在其他模式下单击时不会再次更改回来,我不知道为什么。
  • 尝试打印以控制您的选项对象,看看您是否正确更改了minMode
  • 现在我明白发生了什么。你的解决方案是对的。我认为它不起作用,因为例如当您选择“年”时,在“日”之后,日期选择器将首先在年份选择中打开。但是现在我看到如果我选择一年,它允许我选择一个月和一天。非常感谢。
猜你喜欢
  • 2016-12-01
  • 1970-01-01
  • 2018-11-22
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 2016-08-24
相关资源
最近更新 更多