Thanks to visit codestin.com
Credit goes to github.com

Skip to content
This repository was archived by the owner on May 29, 2019. It is now read-only.
This repository was archived by the owner on May 29, 2019. It is now read-only.

Broken styles for datepicker with custom day/month/year template #6608

Open
@Triol19

Description

@Triol19

Hi guys

Bug description:

Small background: I wanted to use custom day template to display only days from current month, without days from next and previous months.
For those reason I've written some code:

Controller:

  $scope.data = {
    startDate: new Date("05/12/2004"),
    endDate: new Date("05/12/2004")
  };

  $scope.options = {
    showWeeks: false,
    startingDay: 1,
    maxDate: new Date("05/12/2004")
  };

Template:

  <div uib-datepicker class="left-datepicker"
         template-url="/common/_tpls/datepicker-custom.html"
          datepicker-options="options"
          ng-model="data.startDate"></div>

datepicker-custom.html:

  <div ng-switch="datepickerMode">
        <div uib-daypicker template-url="/common/_tpls/datepicker-custom-day.html" ng-switch-when="day"  tabindex="0" class="uib-daypicker"></div>
        <div uib-monthpicker ng-switch-when="month" tabindex="0" class="uib-monthpicker"></div>
        <div uib-yearpicker ng-switch-when="year" tabindex="0" class="uib-yearpicker"></div>
  </div>

datepicker-custom-day.html:

<table 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 aria-hidden="true" class="glyphicon glyphicon-chevron-left"></i><span class="sr-only">previous</span></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 aria-hidden="true" class="glyphicon glyphicon-chevron-right"></i><span class="sr-only">next</span></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" role="row">
      <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"
          ng-if="datepicker.activeDate.getMonth() === dt.date.getMonth()"
          tabindex="-1"><span ng-class="::{'text-muted': dt.secondary, 'text-info': dt.current}">{{::dt.label}}</span></button>
      </td>
    </tr>
  </tbody>
</table>

Code for datepicker-custom-day.html I've found here and just added this line:

ng-if="datepicker.activeDate.getMonth() === dt.date.getMonth()"

All works fine, but: when I select some date, it doesn't change color, something wrong with styles.

I had begun the investigation and after several hours I found the issue:

  1. I've changed ng-repeat in this line to
ng-repeat="dt in row track by dt.date"
  1. Also I've added line
ng-class="{'btn-info': dt.selected, active: isActive(dt)}"

here

After these changes everything works as it should.
Maybe my changes will break some functionality in other cases, I don't know. Waiting for feedback.

Version of Angular, UIBS, and Bootstrap

Angular: 1.6.4

UIBS: 2.5.0

Bootstrap: 3.3.7

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions