如何在 Angular JS 中显示日期选择器？

Question

我在 Angular JS 中使用 bootstrap ui library。这里有 Datepicket 元素。如何在两个输入中显示日期选择器？ 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

我调查了你的 plunker，它同时打开了两个日期选择器，因为 $event 被传递为 opened 两个输入文本。

将您的输入文本更改为此

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

is-open用于当此范围值为真时打开指定的日期选择器。您将 both 个日期选择器映射到相同的值。因此，当您调用 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 中显示日期选择器？

How to show datapicker in Angular JS?

datepicker

angularjs