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

7 回答

• 10

  您可以使用不同的 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;
    };
  

  回复于 2024-04-30T13:36:47+08:00
• 79

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

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

  $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>
  

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

  回复于 2024-04-30T13:36:47+08:00
• 0

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

  <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;
    };
  

  回复于 2024-04-30T13:36:47+08:00
• 15

  这对我有用：$ 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)"/>
  

  回复于 2024-04-30T13:36:47+08:00
• 0

  无需进行其他更改 . 只要将每个日期输入包装在它自己的控制器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>
  

  回复于 2024-04-30T13:36:47+08:00
• 0

  虽然这是一个古老的问题，但回答了与我一样陷入同样问题的人 .

  我将datepicker onfocus分配给该元素，它工作得很好 . 示例代码 .

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

  回复于 2024-04-30T13:36:47+08:00
• 1

  Can open multi datepickers of ui-bootstrap on a single page

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

  回复于 2024-04-30T13:36:47+08:00