如何在一个页面上至少有两个 ui-bootstrap 的日期选择器？

Posted 2023-05-07

【中文标题】如何在一个页面上至少有两个 ui-bootstrap 的日期选择器？

【英文标题】：How to have at least two datepickers of ui-bootstrap on a single page?

【发布时间】：2013-11-05 23:15:09

【问题描述】：

我想在一个页面上有几个日期选择器。但是使用 UI-Bootstrap 的默认解决方案是不可能的，任何一个日期选择器都不能打开。彼此的冲突。这是我的代码：

<div>
            <div class="form-horizontal pull-left">
                <input type="text" datepicker-popup="dd-MMMM-yyyy" ng-model="dt" is-open="opened" min="minDate" max="'2015-06-22'" datepicker-options="dateOptions" date-disabled="disabled(date, mode)" ng-required="true"/>
                <button class="btn" ng-click="open()"><span class="glyphicon glyphicon-calendar"></span></button>
            </div>
            <div class="form-horizontal pull-left">
                <input type="text" datepicker-popup="dd-MMMM-yyyy" ng-model="dt" is-open="opened" min="minDate" max="'2015-06-22'" datepicker-options="dateOptions" date-disabled="disabled(date, mode)" ng-required="true" />
                <button class="btn" ng-click="open()"><span class="glyphicon glyphicon-calendar"></span></button>
            </div>
            <button type="submit" class="btn btn-default">Submit</button>
        </div>

我刚刚从http://angular-ui.github.io/bootstrap/#/datepicker 站点复制/粘贴了日期选择器代码。它们相互冲突。当我点击<input>字段打开一个日期选择器时没有人可以正常打开，两者都打开一秒钟然后立即消失。

如何在一个页面上有多个日期选择器？

【问题讨论】：

您可能应该将它们分配给不同的 ng-model。

同意@aet 并为每个变量使用不同的is-open 变量

您找到解决方案了吗？如果有，请描述一下。

解决方案是为is-open 属性使用不同的变量。如果你不这样做，ui-bootstrap 的东西就跟不上哪个打开了。 @Green 应该选择以下答案之一作为接受的答案。

How to usemultiple Angular UI Bootstrap Datepicker in single form?的可能重复

【参考方案1】：

您可以使用不同的is-open 属性，然后通过ng-click 函数传入该属性，而不是使用不同的函数。您仍然需要不同的模型：

<div>
        <div class="form-horizontal pull-left">
            <input type="text" datepicker-popup="dd-MMMM-yyyy" ng-model="dt1" is-open="opened1" min="minDate" max="'2015-06-22'" datepicker-options="dateOptions" date-disabled="disabled(date, mode)" ng-required="true"/>
            <button class="btn" ng-click="open($event,'opened1')"><span class="glyphicon glyphicon-calendar"></span></button>
        </div>
        <div class="form-horizontal pull-left">
            <input type="text" datepicker-popup="dd-MMMM-yyyy" ng-model="dt2" is-open="opened2" min="minDate" max="'2015-06-22'" datepicker-options="dateOptions" date-disabled="disabled(date, mode)" ng-required="true" />
            <button class="btn" ng-click="open($event,'opened2')"><span class="glyphicon glyphicon-calendar"></span></button>
        </div>
        <button type="submit" class="btn btn-default">Submit</button>
    </div>

在控制器内部：

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

    $scope[opened] = true;
  ;

【讨论】：

有趣的是，我不需要在控制器中定义自己的 open() 方法，这对我来说开箱即用。

我怎样才能对整个应用程序做同样的事情？

我在这里更改为切换行为***.com/a/23764727/2411379

这确实对我有用。不确定你的 angularjs 是什么 smokin @rar？对我有帮助的是@Toni Gamez 到切换功能的链接。无需实际重命名该函数，但有助于在他在上面的 cmets 中提供的链接中看到它的简化...

这对我不起作用。不过确实如此：<input type="text" id="startDate" ng-model="startDate" ng-click="start.opened = true" datepicker-popup="dd-MMM-yyyy" is-open="start.opened" />

【参考方案2】：

我仍在学习 Angular 和 UI-Bootstrap，所以在阅读我的答案时要考虑到这一点。我做了一些类似于 BlueMonk 的事情，但是以一种灵活的方式使我的控制器代码不必知道页面上的日期选择器的实例。

我将控制器中的所有日期选择器代码放入一个命名空间中：

$scope.datePicker = (function () 
    var method = ;
    method.instances = [];

    method.open = function ($event, instance) 
        $event.preventDefault();
        $event.stopPropagation();

        method.instances[instance] = true;
    ;

    method.options = 
        'show-weeks': false,
        startingDay: 0
    ;

    var formats = ['MM/dd/yyyy', 'dd-MMMM-yyyy', 'yyyy/MM/dd', 'dd.MM.yyyy', 'shortDate'];
    method.format = formats[0];

    return method;
());

然后使用以下标记：

<p class="input-group">
    <input type="text" class="form-control" ng-model="editableEmployee.dateHired" datepicker-popup="datePicker.format" datepicker-options="datePicker.options" is-open="datePicker.instances['dateHired']" close-text="Close" />
    <span class="input-group-btn">
        <button type="button" class="btn btn-default" ng-click="datePicker.open($event, 'dateHired')"><i class="glyphicon glyphicon-calendar"></i></button>
    </span>
</p>

<p class="input-group">
    <input type="text" class="form-control" ng-model="editableEmployee.dateFired" datepicker-popup="datePicker.format" datepicker-options="datePicker.options" is-open="datePicker.instances['dateFired']" close-text="Close" />
    <span class="input-group-btn">
        <button type="button" class="btn btn-default" ng-click="datePicker.open($event, 'dateFired')"><i class="glyphicon glyphicon-calendar"></i></button>
    </span>
</p>

这对我来说就像一个魅力。

【讨论】：

非常感谢，很有创意。 :)

@JerryBensonMontgome 我的用例涉及一组可以增长的动态行（通过单击添加另一个按钮），其中一列对应于必须由日期选择器丰富的日期字段。在那种情况下，我该如何使用您的优雅方法？

如果你只是为每一行传入一个自定义字符串（我有'dateHired'和'dateFired'）你应该没问题。当我做这种事情时，我通常会使用一些与某种行 ID 连接的静态文本。哎呀，随机生成的数字会起作用，因为我认为您（作为开发人员）不需要知道它是什么。我没有在像你这样的场景中使用过这个解决方案，但我认为它应该可以工作。

这看起来很优雅，但我在这一行得到一个未定义的错误：method.instances[instance] = true;

我在这里问了一个后续问题：***.com/questions/32927394/…

【参考方案3】：

这应该可以工作（不同的模型、打开标志和功能）：

<div>
        <div class="form-horizontal pull-left">
            <input type="text" datepicker-popup="dd-MMMM-yyyy" ng-model="dt1" is-open="opened1" min="minDate" max="'2015-06-22'" datepicker-options="dateOptions" date-disabled="disabled(date, mode)" ng-required="true"/>
            <button class="btn" ng-click="open1()"><span class="glyphicon glyphicon-calendar"></span></button>
        </div>
        <div class="form-horizontal pull-left">
            <input type="text" datepicker-popup="dd-MMMM-yyyy" ng-model="dt2" is-open="opened2" min="minDate" max="'2015-06-22'" datepicker-options="dateOptions" date-disabled="disabled(date, mode)" ng-required="true" />
            <button class="btn" ng-click="open2()"><span class="glyphicon glyphicon-calendar"></span></button>
        </div>
        <button type="submit" class="btn btn-default">Submit</button>
    </div>

在控制器内部：

   $scope.open1 = function($event) 
    $event.preventDefault();
    $event.stopPropagation();

    $scope.opened1 = true;
  ;

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

    $scope.opened2 = true;
  ;

【讨论】：

这应该不起作用，并且应该抛出未定义的“preventDefault”。要解决您将 $event 传递给函数的错误。它仍然无法解决问题。由于两者仍会发生冲突。它对我不起作用。

这不是很干。我更喜欢 BlueMonk 的回答。

这行得通。但是您必须将 $event 传递给 open1($event) 和 open2($event) 函数。

【参考方案4】：

这对我有用： $id 是作用域id，由angular提供。

    ctrl.opened = ;
    ctrl.openDatatimePicker = function ($event, id) 
        $event.preventDefault();
        $event.stopPropagation();
        ctrl.opened[id] = true;
    

                                            <input type="text" 
                                                   class="form-control" 
                                                   uib-datepicker-popup="vm.datepickerFormat"
                                                   ng-model="x.FraDato" 
                                                   is-open="vm.opened[$id]"
                                                   datepicker-options="vm.datepickerOptions"
                                                   ng-required="true" 
                                                   ng-click="vm.openDatatimePicker($event,$id)"/>

【参考方案5】：

无需额外更改。只要您将每个日期输入包装在它自己的控制器 div 中，范围就会与该输入一起驻留

例子：

<div ng-controller="DatepickerDemoCtrl">
    <div class="form-horizontal pull-left">
        <input type="text" datepicker-popup="dd-MMMM-yyyy" ng-model="dt" is-open="opened" min="minDate" max="'2015-06-22'" datepicker-options="dateOptions" date-disabled="disabled(date, mode)" ng-required="true"/>
        <button class="btn" ng-click="open($event)"><span class="glyphicon glyphicon-calendar"></span></button>
    </div>
</div>
<div ng-controller="DatepickerDemoCtrl">
    <div class="form-horizontal pull-left">
        <input type="text" datepicker-popup="dd-MMMM-yyyy" ng-model="dt" is-open="opened" min="minDate" max="'2015-06-22'" datepicker-options="dateOptions" date-disabled="disabled(date, mode)" ng-required="true" />
        <button class="btn" ng-click="open($event)"><span class="glyphicon glyphicon-calendar"></span></button>
    </div>
</div>

【讨论】：

其实他确实得做出改变，ng-model="dt" 这样埋在另一个控制器里是没用的。他需要使用something.startOn、something.endOn，以便变量在周围范围内可用。否则，这是一个非常酷的控制器技巧。

【参考方案6】：

虽然这是一个老问题，但对于和我遇到同样问题的人来说是一个答案。

我将 datepicker onfocus 分配给了该元素，效果很好。 示例代码。

   $(document).on('focus','.datepicker',function()
        $(this).datepicker();
   );

【参考方案7】：

可以在单个页面上打开ui-bootstrap的多个日期选择器

JS

  $scope.open = ;
  $scope.openCalendar = function (e, date) 
    e.preventDefault();
    e.stopPropagation();

    if ($scope.open[date] === true) 
      $scope.open = ;
     else 
      $scope.open = ;
      $scope.open[date] = true;
    
  ;

html

<input type="text" id="created1" name="created1" datetime-picker="" datepicker-options="dateOptions" timepicker-options="timeOptions" ng-click="openCalendar($event, 'created1')" placeholder="0000/00/00 00:00" is-open="open.created1" autocomplete="off" class="form-control" ng-model="vm.condition.created1">

<input type="text" id="created2" name="created2" datetime-picker="" datepicker-options="dateOptions" timepicker-options="timeOptions" ng-click="openCalendar($event, 'created2')" placeholder="0000/00/00 00:00" is-open="open.created2" autocomplete="off" class="form-control" ng-model="vm.condition.created2">