Question

我使用angularui bootstrap datepicker-popup指令制作了一个自定义日期选择器。自定义指令中的min-modes和datepicker模式存在一些问题。问题是，如果我通过index.html中的datepicker-options参数提供min-mode，它可以工作，但指令模板中的相同场景不起作用。如果有人在使用angularui bootstrap的自定义指令中了解min-mode，请帮助。这是我的傻瓜http://plnkr.co/edit/FDigEjyMYm5SVYnQyZGp。这是我在index.html中的相同场景

<input datepicker-popup="MM/yyyy" ng-model="dt" datepicker-mode="'month'" datepicker-options='options' is-open="opened" ng-click="open()"/

和datepicker-template.html

  <input  class="form-control" id="{{id}}" datepicker-popup={{calendarProperties.format}} datepicker-mode='modes' datepicker-options='options' ng-dblclick="open($event)" ng-model="ngModel" n is-open="calendarProperties.opened"  />

index.html中的默认指令工作正常，但在自定义指令中，min-mode不起作用。看看并提出一些想法。我有点卡在那里。

Answer 1

更新我已经更改了指令的一些选项。现在应该可以了。

您忘了将模式包含在指令范围内。希望，它会帮助你。

＆＃13;

<!doctype html>
<html ng-app="date-control">
<head>
    <link href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" rel="stylesheet">

</head>
<body ng-controller="DatepickerDemoCtrl">
    <div class="container">
        <div class="row">
            <div class="col-xs-12" >
                <h1 class="h3">Custom Datepicker Directive Demo</h1>
                <div class="well">
                    <p>Selected date 1 is: <strong>{{mydate |date:'yyyy-MM-dd'}}</strong></p>
                    <p>Selected date 2 is: <strong>{{mydate2 |date:'yyyy/MM/dd'}}</strong></p>
                    
                </div>
                
               
               
            </div>
        </div>
        
            <div date-control="cal1" ng-model="mydate" calendar-min-mode="month" calendar-mode="month" calendar-properties="calendarProperties1"></div>
           
            <div date-control="cal2" ng-model="mydate2" calendar-min-mode="month" calendar-mode="month" calendar-properties="calendarProperties2"></div>
         <input datepicker-popup="MM/yyyy" ng-model="dt" min-mode="'month'" datepicker-mode="'month'" datepicker-options='options' is-open="opened" ng-click="open()"/>
            
    </div>
  
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.5/angular.js"></script>
 <script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/0.13.4/ui-bootstrap-tpls.min.js"></script>
  
  <script>
    // Code goes here

var calendarModule = angular.module('date-control', ['ui.bootstrap']);

calendarModule.config(function (datepickerConfig, datepickerPopupConfig) {
    datepickerConfig.formatYear = 'yyyy';
    datepickerConfig.startingDay = 0;
    datepickerConfig.showWeeks = false;
    datepickerPopupConfig.onOpenFocus = true;
    datepickerConfig.yearRange = 10;
    
})

.controller('DatepickerDemoCtrl', function ($scope,$filter) {

 $scope.date3 = '2015-02-31';
    $scope.calendarProperties1 = {
       
        format: "yyyy-MM",
        label: "Enter the Date From",
        from: 'Cal1',
        opened:false
    }

    $scope.calendarProperties2 = {
        format: "yyyy/MM/dd",
        label: "Enter the Date To",
        to: 'Cal1',
        opened: false
    }
    $scope.filterDate=function(){
      alert($filter('date')($scope.mydate, "dd/MM/yyyy"));
    }
    
    $scope.open=function($event){
      
    $scope.opened=true;
    }
    
    $scope.options={
      minMode:'month'
    }
    

})
.directive('dateControl', function () {
    return {
        restrict: 'AE',
        template: '<div><label for="{{id}}" class="sr-only">{{calendarProperties.label}}</label><input  class="form-control" id="{{id}}" datepicker-popup="{{calendarProperties.format}}"  min-mode="modeOptions.minMode"  datepicker-mode="modeOptions.modes" ng-click="open($event)" ng-model="ngModel" ng-change="isChanged()" is-open="calendarProperties.opened" ng-required="true"  /></div>',
        replace:true,
        scope: {
            ngModel: '=',
            calendarProperties: "=",
            calendarMode: '=',
            calendarMinMode: '='
        },
        link: function (scope, element, attrs) {           
            scope.calendarProperties.label = scope.calendarProperties.label ? scope.calendarProperties.label : "Default Label";
            scope.id = attrs.kuiDateControl;
            scope.modeOptions = {
              modes: attrs.calendarMode,
              minMode: attrs.calendarMinMode
            }
          
            if (!scope.calendarProperties.hidelabel) {
                element.find('label').removeClass('sr-only');
            }

            scope.open = function ($event) {
                $event.preventDefault();
                $event.stopPropagation();
                
                scope.calendarProperties.opened = true;
            };

            scope.isChanged = function () {
                console.log("changed");
            }

            element.removeAttr('id');
             scope.options={
             minMode:'month'
                }
        }
    };
});
  </script> 
</body>
</html>

＆＃13;

自定义时angularui bootrstrap datepicker-popup中的min-mode和datepicker模式的问题

1 个答案: