Angular UI Bootstrap Datepicker 的问题

Question

我需要集成日期选择器，但它不能正常工作。

这是我的 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

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

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

这里是链接https://plnkr.co/edit/PbuiCq5f3NVaWx6OAW8D?p=preview

Answer 2

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

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

希望对你有帮助。