Question

我需要整合datepicker，但它无法正常工作。

这是我的HTML

 <div class="form-group">
                <label>Date</label>
                <p class="input-group">
        <input type="text" class="form-control" 
         datepicker-popup="mediumDate" 
         is-open="shipment.valuationDatePickerIsOpen" 
        ng-click="shipment.valuationDatePickerOpen()" 
        ng-model="shipment.valuationDate" />
  <span class="input-group-btn">
     <button type="button" class="btn btn-default" 
        ng-click="shipment.valuationDatePickerOpen($event)">
         <i class="fa fa-calendar"></i>
     </button>
</span>
</p>

</div>

这是我的控制器

var vm = this;
    // $scope.Eship;

      vm.valuationDate = new Date();
  vm.valuationDatePickerIsOpen = false;
  vm.opens = [];

  $scope.$watch(function () {
       return vm.valuationDatePickerIsOpen;
   },function(value){
      vm.opens.push("valuationDatePickerIsOpen: " + value + " at: " + new Date());
   });

  vm.valuationDatePickerOpen = function ($event) {

      if ($event) {
          $event.preventDefault();
          $event.stopPropagation(); 
      }
      this.valuationDatePickerIsOpen = true;
  };

我已经导入了ui-bootstrap指令。我不知道什么是丢失或错误。

Answer 1

您可以按照文档和文档中给出的最简单的示例进行操作。然后在自定义或操作该日期输入字段的Model值后，

<p class="input-group">
  <input type="text" class="form-control" uib-datepicker-popup ng-model="dt" is-open="popup1.opened" 
   datepicker-options="dateOptions" ng-required="true" close-text="Close" alt-input-formats="altInputFormats" />
  <span class="input-group-btn">
    <button type="button" class="btn btn-default" ng-click="open1()"><i class="glyphicon glyphicon-calendar"></i></button>
  </span>
</p>

这是plunk https://plnkr.co/edit/PbuiCq5f3NVaWx6OAW8D?p=preview

的链接

Answer 2

您遇到问题是因为您使用的是datepicker-popup而非uib-datepicker-popup指令。只需确保使用正确版本的Angular和UI Bootstrap，然后查看该模块的文档。

我修复了您的示例，请在此处找到代码：https://plnkr.co/edit/cMj8IXD7KYTUgi7hY0W7?p=preview

我希望它有所帮助。

Angular UI Bootstrap Datepicker的问题

2 个答案: