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>

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

Answer 1

<强> ---- ---- EDITED

进入库ui-bootstrap-tpls是所有模板：

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

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

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

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

year.html：

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

因此，如果您需要更改其中任何一个模板，只需使用属性template-url，例如：

function pullCurtains(){
    $.when(
        $('body,html').animate({'scrollTop': target.offset().top}, 500, function(){ animating = false; }).promise(),
        $( '#mything-2' ).animate( { marginLeft : "-100px" }, 500 ).promise(),
        $( '#mything-3' ).animate( { width: 0 }, 1000 ).promise()
    ).done( function(){
        console.log( "All animations complete." );
        setTimeout(function() {
            // trigger new one in 2000 ms
            $(document).trigger('curtian');
        }, 2000);
    });
};
$(document).on('curtian',function(){
    pullCurtains();
});
// do first one
$(document).trigger('curtian');

仅对原始模板进行更改。钯：抱歉我的英语不是我的母语。

如何从uib-datepicker编辑datepicker / day.html

1 个答案: