Demo is not working on ui-bootstrap-tpls-1.1.0

[zunsthy]

The UI isn't the same as on ui-bootstrap-tpls-1.1.0.

[Mantisimo]

Hi I had the same issue, I solved it by substituting the templateUrl in the decorator . I replaced the new class selector optimization within the template.
so...
uib-is-class="'btn-info' for selectedDt,'active' for activeDt on dt"
back to the original:
ng-class="{'btn-info': dt.selected, active: isActive(dt)}"

Solution:

var daypickerDelegate = function ($delegate, $templateCache) {
        var directive = $delegate[0];

        $templateCache.put("uib/template/datepicker/multi-day.html",
        "<table class=\"uib-daypicker\" role=\"grid\" aria-labelledby=\"{{::uniqueId}}-title\" aria-activedescendant=\"{{activeDateId}}\">\n" +
        "  <thead>\n" +
        "    <tr>\n" +
        "      <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>\n" +
        "      <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>\n" +
        "      <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>\n" +
        "    </tr>\n" +
        "    <tr>\n" +
        "      <th ng-if=\"showWeeks\" class=\"text-center\"></th>\n" +
        "      <th ng-repeat=\"label in ::labels track by $index\" class=\"text-center\"><small aria-label=\"{{::label.full}}\">{{::label.abbr}}</small></th>\n" +
        "    </tr>\n" +
        "  </thead>\n" +
        "  <tbody>\n" +
        "    <tr class=\"uib-weeks\" ng-repeat=\"row in rows track by $index\">\n" +
        "      <td ng-if=\"showWeeks\" class=\"text-center h6\"><em>{{ weekNumbers[$index] }}</em></td>\n" +
        "      <td ng-repeat=\"dt in row\" class=\"uib-day text-center\" role=\"gridcell\"\n" +
        "        id=\"{{::dt.uid}}\"\n" +
        "        ng-class=\"::dt.customClass\">\n" +
        "        <button type=\"button\" class=\"btn btn-default btn-sm\"\n" +
        "            ng-class=\"{'btn-info': dt.selected, active: isActive(dt)}\"\n" +
        "          ng-click=\"select(dt.date)\"\n" +
        "          ng-disabled=\"::dt.disabled\"\n" +
        "          tabindex=\"-1\"><span ng-class=\"::{'text-muted': dt.secondary, 'text-info': dt.current}\">{{::dt.label}}</span></button>\n" +
        "      </td>\n" +
        "    </tr>\n" +
        "  </tbody>\n" +
        "</table>\n" +
        "");

        directive.templateUrl = "uib/template/datepicker/multi-day.html";
...

[mehranshakeri]

Hi,

Thank you for solution. This will be merged in master branch or we have to add it to our own lib?

[spongessuck]

I'm not sure of the best way to add it as part of the module. It should be easy enough to replace it globally for all uib-datepickers, but I'm not sure if that's what everyone wants.

PRs with suggestions are welcome.

[mehranshakeri]

Actually there is another issue as well. This only solves the problem with daily view. Since monthly and yearly have different template, this doesn't work there. And just replacing their template also doesn't help. If I find a solution I'll update this thread.

[spongessuck]

Why would the month and year views need updating? Only individual dates get
selected. Unless you want the months or years with selected dates to be
highlighted.

On Thu, Feb 18, 2016 at 3:23 AM mehranshakeri notifications@github.com
wrote:

Actually there is another issue as well. This only solves the problem with
daily view. Since monthly and yearly have different template, this doesn't
work there. And just replacing their template also doesn't help. If I find
a solution I'll update this thread.

—
Reply to this email directly or view it on GitHub
#39 (comment)
.

[mehranshakeri]

Exactly. e.g. When min-mode is month, I want to select Jan and Feb, and see them highlighted

[spongessuck]

I'm not sure how you could do that without affecting with the individual
date selection...like if Jan 1 00:00 meant 'select January,' it would also
mean 'select Jan 1.' You'd have to do some trickiness.

On Thu, Feb 18, 2016 at 9:48 AM mehranshakeri notifications@github.com
wrote:

Exactly. e.g. When min-mode is month, I want to select Jan and Feb, and
see them highlighted

—
Reply to this email directly or view it on GitHub
#39 (comment)
.

[brenovieira]

I also don't know what is the better way to fix this, but I don't feel good copying gm.datepickerMultiSelect.js and modifying it.

As bootstrap datepicker is already designed to support a different template. That's what I've done:

• Created multi-datepicker.html (copied from datepicker.html and added template-url):

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

• Created multi-day.html (copied from day.html and changed class):

<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" ng-class="{'btn-info': dt.selected, active:    isActive(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>
</table>

• How to use it:

<uib-datepicker ng-model='activeDate' multi-select='selectedDates' template-url='multi-datepicker.html'></uib-datepicker>

That way you solve the issue just using html. No js change.

[mislamov]

Hello! @brenovieira , thanks for solution. When I use ng-model-options="{timezone: 'utc'}", color of selected days does not changes! How can i fix it? Thx

[spongessuck]

Hi, @mislamov.

This is probably due to the fact that the directive is expecting selected dates to be midnight local time and not midnight UTC. I'll open a new issue for this.

[haskelcurry]

@spongessuck

Hi, thanks for your precious work! But, it doesn't work at all with the Bootstrap UI >= 1.0.0. Here is the forked Plunker with only the bootstrap version changed to 1.0.0:
http://plnkr.co/edit/jTZNqjoAOwOx3Rqiq49u?p=info

While you mention that it should work. Am I doing it wrong?

[spongessuck]

@mtuzinskiy,

The selectedDates array should fill with your selections, but it won't look like they're selected on the calendar.

You have to give a custom template for the daypicker directive since the default one doesn't use ngClass as of v1.0.0, which is what my directive relies on for styling selected dates.

Please refer to @brenovieira's comment for a solution.

[haskelcurry]

Oh right, it works great, thank you!

[kevin9895]

@spongessuck

I have referred to @brenovieira's comment, but if the activeDate is not this month, color of selected days is not changed color, the dt.selected is always false.
How could I fix it? Thanks.
I'm sorry I made a mistake. I forgot to set hours, minutes, seconds and milliseconds to zero.