如何编辑日期选择器/ day.html从UIB-日期选择器

Question

在为uib-datepicker的文档有一个叫做选项template-url

<-- https://angular-ui.github.io/bootstrap/#/datepicker --> 

这是内容：

<div ng-switch="datepickerMode" role="application" ng-keydown="keydown($event)"> 
<uib-daypicker ng-switch-when="day" tabindex="0"></uib-daypicker> 
<uib-monthpicker ng-switch-when="month" tabindex="0"></uib-monthpicker> 
<uib-yearpicker ng-switch-when="year" tabindex="0"></uib-yearpicker> 
</div> 

但我需要修改来自“uib-daypicker”的模板;我试图从datepicker/day.html复制模板，但它不起作用，因为它是一个指令......所以，我该怎么做？

Answer 1

---- ---- EDITED

进库UI的引导，第三方物流是所有的模板：

• datepicker.html
• day.html
• month.html
• year.html

个

datepicker.html：

<div class="uib-datepicker" ng-switch="datepickerMode" role="application" ng-keydown="keydown($event)"> 
    <uib-daypicker ng-switch-when="day" tabindex="0"></uib-daypicker> 
    <uib-monthpicker ng-switch-when="month" tabindex="0"></uib-monthpicker> 
    <uib-yearpicker ng-switch-when="year" tabindex="0"></uib-yearpicker> 
</div> 

day.html：

<table class="uib-daypicker" role="grid" aria-labelledby="{{::uniqueId}}-title" aria-activedescendant="{{activeDateId}}"> 
    <thead> 
    <tr> 
      <th><button type="button" class="btn btn-default btn-sm pull-left uib-left" ng-click="move(-1)" tabindex="-1"><i class="glyphicon glyphicon-chevron-left"></i></button></th> 
      <th colspan="{{::5 + showWeeks}}"><button id="{{::uniqueId}}-title" role="heading" aria-live="assertive" aria-atomic="true" type="button" class="btn btn-default btn-sm uib-title" ng-click="toggleMode()" ng-disabled="datepickerMode === maxMode" tabindex="-1"><strong>{{title}}</strong></button></th> 
      <th><button type="button" class="btn btn-default btn-sm pull-right uib-right" ng-click="move(1)" tabindex="-1"><i class="glyphicon glyphicon-chevron-right"></i></button></th> 
     </tr> 
    <tr> 
      <th ng-if="showWeeks" class="text-center"></th> 
      <th ng-repeat="label in ::labels track by $index" class="text-center"><small aria-label="{{::label.full}}">{{::label.abbr}}</small></th> 
     </tr> 
    </thead> 
    <tbody> 
    <tr class="uib-weeks" ng-repeat="row in rows track by $index"> 
     <td ng-if="showWeeks" class="text-center h6"><em>{{ weekNumbers[$index] }}</em></td> 
     <td ng-repeat="dt in row" class="uib-day text-center" role="gridcell" 
     id="{{::dt.uid}}" 
     ng-class="::dt.customClass"> 
     <button type="button" class="btn btn-default btn-sm" 
      uib-is-class=" 
      'btn-info' for selectedDt, 
      'active' for activeDt 
      on dt" 
      ng-click="select(dt.date)" 
      ng-disabled="::dt.disabled" 
      tabindex="-1"><span ng-class="::{'text-muted': dt.secondary, 'text-info': dt.current}">{{::dt.label}}</span></button> 
     </td> 
    </tr> 
    </tbody> 

moth.html：

<table class="uib-monthpicker" role="grid" aria-labelledby="{{::uniqueId}}-title" aria-activedescendant="{{activeDateId}}"> 
    <thead> 
    <tr> 
      <th><button type="button" class="btn btn-default btn-sm pull-left uib-left" ng-click="move(-1)" tabindex="-1"><i class="glyphicon glyphicon-chevron-left"></i></button></th> 
      <th><button id="{{::uniqueId}}-title" role="heading" aria-live="assertive" aria-atomic="true" type="button" class="btn btn-default btn-sm uib-title" ng-click="toggleMode()" ng-disabled="datepickerMode === maxMode" tabindex="-1"><strong>{{title}}</strong></button></th> 
      <th><button type="button" class="btn btn-default btn-sm pull-right uib-right" ng-click="move(1)" tabindex="-1"><i class="glyphicon glyphicon-chevron-right"></i></button></th> 
     </tr> 
    </thead> 
    <tbody> 
    <tr class="uib-months" ng-repeat="row in rows track by $index"> 
     <td ng-repeat="dt in row" class="uib-month text-center" role="gridcell" 
     id="{{::dt.uid}}" 
     ng-class="::dt.customClass"> 
     <button type="button" class="btn btn-default" 
      uib-is-class=" 
      'btn-info' for selectedDt, 
      'active' for ativeDt 
      on dt" 
      ng-click="select(dt.date)" 
      ng-disabled="::dt.disabled" 
      tabindex="-1"><span ng-class="::{'text-info': dt.current}">{{::dt.label}}</span></button> 
     </td> 
    </tr> 
    </tbody> 
</table> 

year.html：

<table class="uib-yearpicker" role="grid" aria-labelledby="{{::uniqueId}}-title" aria-activedescendant="{{activeDateId}}"> 
    <thead> 
    <tr> 
      <th><button type="button" class="btn btn-default btn-sm pull-left uib-left" ng-click="move(-1)" tabindex="-1"><i class="glyphicon glyphicon-chevron-left"></i></button></th> 
      <th colspan="{{::columns - 2}}"><button id="{{::uniqueId}}-title" role="heading" aria-live="assertive" aria-atomic="true" type="button" class="btn btn-default btn-sm uib-title" ng-click="toggleMode()" ng-disabled="datepickerMode === maxMode" tabindex="-1"><strong>{{title}}</strong></button></th> 
      <th><button type="button" class="btn btn-default btn-sm pull-right uib-right" ng-click="move(1)" tabindex="-1"><i class="glyphicon glyphicon-chevron-right"></i></button></th> 
     </tr> 
    </thead> 
    <tbody> 
    <tr class="uib-years" ng-repeat="row in rows track by $index"> 
     <td ng-repeat="dt in row" class="uib-year text-center" role="gridcell" 
     id="{{::dt.uid}}" 
     ng-class="::dt.customClass"> 
     <button type="button" class="btn btn-default" 
      uib-is-class=" 
      'btn-info' for selectedDt, 
      'active' for activeDt 
      on dt" 
      ng-click="select(dt.date)" 
      ng-disabled="::dt.disabled" 
      tabindex="-1"><span ng-class="::{'text-info': dt.current}">{{::dt.label}}</span></button> 
     </td> 
    </tr> 
    </tbody> 
</table> 

所以如果你需要改变的那些你只需要使用属性模板网址范本的任何一个，例如：

<div class="uib-datepicker" ng-switch="datepickerMode" role="application" ng-keydown="keydown($event)"> 
    <uib-daypicker ng-switch-when="day" template-url="template/route/template-day.html" tabindex="0"></uib-daypicker> 
    <uib-monthpicker ng-switch-when="month" template-url="template/route/template-moth.html" tabindex="0"></uib-monthpicker> 
    <uib-yearpicker ng-switch-when="year" template-url="template/route/template-year.html" tabindex="0"></uib-yearpicker> 
</div> 

只有使原始模板更改。 Pd：抱歉，我的英语不是我的母语。