Question

我在Angular JS中使用bootstrap ui library。这里有Datepicket元素。我如何在两个输入中显示datepicker？ Link到图书馆

我试过了：

<input type="text" datepicker-popup="{{format}}">
<input type="text" datepicker-popup="{{format}}">

但这种方式一起打开输入

Answer 1

您需要提供所需的最低属性，而不使用ng-model如何从日期选择器中检索日期。

尝试使用这样：

<input type="text" class="form-control" datepicker-popup="{{format}}" ng-model="dtModel" is-open="opened" />

在控制器中添加此脚本：

$scope.open = function($event) {
$event.preventDefault();
$event.stopPropagation();

$scope.opened = true;

};

working plunker for date picker

Answer 2

我调查了你的傻瓜，它一次打开了两个日期选择器，因为 $ event 被传递为打开两个输入文本。

将输入文字更改为此

<input type="text" ng-click="open($event)" class="form-control" datepicker-popup="{{format}}" ng-model="dtModel" is-open="opened" />
 <input type="text" ng-click="open($event)" class="form-control" datepicker-popup="{{format}}" ng-model="dtModel2" is-open="opened2" />

这是工作的plunker

http://plnkr.co/edit/pCjeXpey3BYgKGBCffAp?p=preview

Answer 3

虽然ritesh的回答可能会纠正，但解释并不清楚。

您同时打开两个原因的原因是：is-open="opened"。

当此范围值为true时，is-open用于打开指定的datepicker。您将两个 datepickers映射到相同的值。因此，当您致电open($event)并设置$scope.opened = true时，它会同时打开。

您真正想要做的是使用您调用的不同函数来设置正确的变量。所以将HTML更改为：

<input type="text" ng-click="open($event)" class="form-control" datepicker-popup="{{format}}" ng-model="dtModel" is-open="opened" />
<input type="text" ng-click="open2($event)" class="form-control" datepicker-popup="{{format}}" ng-model="dtModel2" is-open="opened2" />

然后将该功能添加到您的控制器：

$scope.open2 = function($event) {
    $event.preventDefault();
    $event.stopPropagation();

    $scope.opened2 = true;
  };

请参阅Plunkr

如何在Angular JS中显示数据贴纸？

3 个答案: