如何覆盖角度ui bootstrap datepicker

时间:2014-11-05 03:04:14

标签: angularjs twitter-bootstrap datepicker angular-ui-bootstrap

我想在我的datepicker中添加新的类型按钮。

示例:

  1. 2014年1月8日至2014年1月18日范围日期的蓝色按钮

  2. 或者,按钮红色表示日期为2014年2月2日。

  3. 我已经尝试过使用datepicker指令,但它不起作用。这是我的代码:

    angular.module('App').directive('NewDatepickerPopup',function(){
    return{
        restrict: 'EA',
        replace: true,
        require: ['datepicker'],
        templateUrl: 'template/datepicker/datepicker.html',
        controller: function($scope){
            console.log('controller NewDatepickerPopup');
        },
        link: function(scope, element, attrs, requiredControllers){
            console.log('requiredControllers',requiredControllers);
            console.log('link NewDatepickerPopup');
            element.on('click',function(){
                console.log('on click nya disini');
            });
        }
    };
    

    });

    angular.module("template/datepicker/datepicker.html", []).run(["$templateCache",
    function($templateCache) {
        $templateCache.put("template/datepicker/datepicker.html",
            "<table class=\"zor-datepicker\" >\n" +
            "  <thead>\n" +
            "    <tr>\n" +
            "      <th><button type=\"button\" class=\"btn btn-cal btn-sm pull-left\" ng-click=\"move(-1)\"><i class=\"fa fa-angle-left fa-lg\"></i></button></th>\n" +
            "      <th colspan=\"{{rows[0].length - 2 + showWeekNumbers}}\"><button type=\"button\" class=\"btn btn-cal btn-sm btn-block\" ng-click=\"toggleMode()\">{{title}}</button></th>\n" +
            "      <th><button type=\"button\" class=\"btn btn-cal btn-sm pull-right\" ng-click=\"move(1)\"><i class=\"fa fa-angle-right fa-lg\"></i></button></th>\n" +
            "    </tr>\n" +
            "    <tr ng-show=\"labels.length > 0\" class=\"h6\">\n" +
            "      <th ng-show=\"false\" class=\"text-center ng-hide\">#</th>\n" +
            "      <th ng-repeat=\"label in labels\" class=\"text-center\">{{label}}</th>\n" +
            "    </tr>\n" +
            "  </thead>\n" +
            "  <tbody>\n" +
            "    <tr ng-repeat=\"row in rows\">\n" +
            "      <td ng-show=\"false\" class=\"text-center ng-hide\"><em>{{ getWeekNumber(row) }}</em></td>\n" +
            "      <td ng-repeat=\"dt in row\" class=\"text-center\">\n" +
            "        <button type=\"button\" style=\"width:100%;\" class=\"btn btn-default btn-sm\" ng-class=\"{'btn-info': dt.selected}\" ng-click=\"select(dt.date)\" ng-disabled=\"dt.disabled\"><span ng-class=\"{'text-muted': dt.secondary}\">{{dt.label}}</span></button>\n" +
            "      </td>\n" +
            "    </tr>\n" +
            "  </tbody>\n" +
            "</table>\n" +
            "");
    }
    

    ]);

    <input id="ph" ng-click="openCheckin($event)" name="in" type="text" class="form-control search home" new-datepicker-popup datepicker-popup="{{format}}" ng-model="check_in" ng-change="changeCheckinDate()" is-open="openedCheckin" min="minCheckInDate" ng-required="false" show-weeks="false" show-button-bar="false" close-text="Close" placeholder=""/>    
    

    有人可以帮助我吗?

    非常感谢

    *对不起我的英语太差了。

1 个答案:

答案 0 :(得分:1)

看一下这篇文章:https://github.com/angular-ui/bootstrap/issues/743 您可以在配置阶段使用装饰器来覆盖templateUrl