添加一个ID日期选择器UI的角度引导的

Question

这里是我的代码后，每个dateHolder div的生成日期选取器..但想在他们的ID

<div class="col-xs-12 tn-dateContainers" ng-controller="DatepickerDemoCtrl">  
          <div class="dateHolder mgl" datepicker-popup="{{format}}" ng-click="openSD($event)" ng-model="dateHolder.startDate" is-open="openedSD" datepicker-options="dateOptions" ng-required="true" close-on-date-selection="false" close-text="Close" > 
           <span class="dateIcoImg"><img src="img/icon-calendar.png" alt=""></span> 
           <span class="dateIcoText">Start Date</span> 
          </div> 

          <div class="dateHolder" datepicker-popup="{{format}}" ng-click="openED($event)" ng-model="dateHolder.endDate" is-open="openedED" datepicker-options="dateOptions" ng-required="true" close-on-date-selection="false" close-text="Close"> 
           <span class="dateIcoImg"><img src="img/icon-calendar.png" alt=""></span> 
           <span class="dateIcoText">End Date</span> 
          </div> 
         </div> 

下面是相同的角度代码.. 并且还想在生成的日期选择器上添加样式，因为这里的位置非常正确。

请帮我卡住一个项目。

由于提前

vendorOffer.controller("DatepickerDemoCtrl" , function ($scope) { 

    $scope.dateHolder = {}; 
    $scope.today = function() { 
    $scope.dateHolder.startDate = new Date(); 
    $scope.dateHolder.endDate = new Date(); 
    }; 
    $scope.today(); 

    $scope.openSD = function($event) { 
    $event.preventDefault(); 
    $event.stopPropagation(); 

    $scope.openedSD = true; 
    }; 

    $scope.openED = function($event) { 
    $event.preventDefault(); 
    $event.stopPropagation(); 

    $scope.openedED = true; 
    }; 

    $scope.dateOptions = { 
    formatYear: 'yy', 
    startingDay: 1 
    }; 


    $scope.formats = ['dd-MMMM-yyyy', 'yyyy/MM/dd', 'dd.MM.yyyy', 'shortDate']; 
    $scope.format = $scope.formats[0]; 
}); 

Answer 1

可以更换为模板缓存用自己定义日期选择器弹出的模板，并添加样式和ID那里。请注意，它会影响应用程序中每个使用日期选择器弹出窗口的地方。

angular.module("template/datepicker/popup.html", []).run(["$templateCache", function($templateCache) { 
    $templateCache.put("template/datepicker/popup.html", 
     "<ul class=\"dropdown-menu my-css-style\" ng-style=\"{display: (isOpen && 'block') || 'none', top: position.top+'px', left: position.left+'px'}\">\n" + 
     " <li ng-transclude></li>\n" + 
     " <li ng-show=\"showButtonBar\" style=\"padding:10px 9px 2px\">\n" + 
     "  <span class=\"btn-group\" style=\"margin-bottom:10px\">\n" + 
     "   <button type=\"button\" class=\"btn btn-sm btn-info\" ng-click=\"today()\">{{currentText}}</button>\n" + 
     "   <button type=\"button\" class=\"btn btn-sm btn-default\" ng-click=\"showWeeks = ! showWeeks\" ng-class=\"{active: showWeeks}\">{{toggleWeeksText}}</button>\n" + 
     "   <button type=\"button\" class=\"btn btn-sm btn-danger\" ng-click=\"clear()\">{{clearText}}</button>\n" + 
     "  </span>\n" + 
     "  <button type=\"button\" class=\"btn btn-sm btn-success pull-right\" ng-click=\"isOpen = false\">{{closeText}}</button>\n" + 
     " </li>\n" + 
     "</ul>\n" + 
     ""); 
}]);