Bootstrap日期選擇器不顯示在角度js

我想創建一個日期選擇器與angularjs中的日期選擇器功能的幫助，但日期選擇器不顯示。我把這個日期選擇器作爲一個指令，即使它沒有顯示任何錯誤，所以我無法修復它，任何人都可以幫助我，請提前致謝。Bootstrap日期選擇器不顯示在角度js

以下是我的代碼

App.js

var myApp = angular.module('myApp', ['ui.router', 'chart.js', 'ui.grid', 'ui.grid.autoResize',]); 

myApp.config(function ($stateProvider, $urlRouterProvider) { 
$urlRouterProvider.otherwise('/home'); 
$stateProvider 
    // HOME ======================================== 
    .state('home', { 
     url: '/home', 
     templateUrl: 'views/home/home.html', 
     controller: 'homeCtrl' 
    }) 

    .state('charts', { 
     url: '/charts', 
     templateUrl: '/views/charts/charts.html', 
     controller: 'chartsCtrl' 
    }) 

    .state('help', { 
     url: '/help', 
     templateUrl: '/views/help/help.html', 
     controller: 'helpCtrl' 
    }) 
}); 



myApp.directive('datepicker', function() { 
return { 
    restrict: 'A', 
    require: 'ngModel', 
    compile: function() { 
     return { 
      pre: function ($scope, element, attrs, ngModelCtrl) { 
       var format, dateObj; 
       format = (!attrs.dpFormat) ? 'd/m/yyyy' : attrs.dpFormat; 
       $(element).datepicker({ 
        format: format, 
       }).on('changeDate', function (ev) { 
        $scope.$apply(function() { 
         ngModelCtrl.$setViewValue(ev.format(format)); 
        }); 
       }); 
      } 
     } 
    } 
    } 
});

的Index.html

<!DOCTYPE html> 
<html lang="en"> 
<head> 
<meta charset="utf-8"> 
<meta http-equiv="X-UA-Compatible" content="IE=edge"> 
<meta name="viewport" content="width=device-width, initial-scale=1"> 
<meta name="description" content=""> 
<meta name="author" content=""> 
<title>CI Admin</title> 
<!-- Css Files --> 
<link href="assets/css/bootstrap.min.css" rel="stylesheet" /> 
<link href="assets/css/font-awesome.min.css" rel="stylesheet" /> 
<link href="assets/css/dripicons.css" rel="stylesheet" /> 
<link href="assets/css/ui-grid.min.css" rel="stylesheet" /> 
<link href="assets/css/datepicker.css" type="text/css" rel="stylesheet"/> 
<link href="assets/css/main.css" rel="stylesheet" />  
</head> 
<body ng-app="myApp"> 
<div id="header" ng-include="'views/common/header.html'" toggle></div> 
<div id="sidebar" ng-include="'views/common/sidebar.html'" toggle></div> 
<div id="content_block" toggle> 
    <div ui-view></div> 

    <div id="footer" ng-include="'views/common/footer.html'"></div> 
</div> 
    <!-- Script --> 
    <script src="assets/js/jquery.min.js"></script> 
    <script src="assets/js/bootstrap.min.js"></script> 
    <script src="assets/js/bootstrap-datepicker.js" type="text/javascript"> 
    </script> 
    <script src="assets/js/angular.js"></script> 
    <script src="assets/js/angular-ui-router.js"></script> 
    <script src="assets/js/Chart.min.js"></script> 
    <script src="assets/js/angular-chart.min.js"></script> 
    <script src="assets/js/ui-grid.min.js"></script> 
    <script src=" assets/js/app.js"></script> 
    <script src="views/home/homeCtrl.js"></script> 
    <script src="views/charts/chartsCtrl.js"></script> 
    <script src="views/help/helpCtrl.js"></script> 
    </body> 
    </html>

help.html

<div ng-controller="helpCtrl"> 
<h3 class="page_title">Help</h3> 
<div id="breadcrumb"> 
    <ul class="breadcrumb"> 
     <li><a href="javascript:" ui-sref="home">Home</a></li> 
     <li><a href="javascript:">Help</a></li> 
    </ul> 
</div> 
<div class="panel panel-default" id="compents"> 
    <div class="panel-heading"> 
     <h4 class="panel-title">Components </h4> 
    </div> 
    <div class="panel-body"> 

     <div class="form-group"> 
      <div class="col-md-3"><label>Date Picker</label></div> 
      <div class="col-md-4"><input type="text" datepicker="" ng-model="date" class="form-control"/></div> 
     </div> 
    </div> 
</div>

個

helpCtrl.js

(function() { 
    "use:strict"; 
    angular.module("myApp").controller("helpCtrl", ["$scope", helpCtrl]); 

    function helpCtrl($scope) { 
} 
})();

來源

2017-04-11 Vivek Kannan

我推薦使用https://angular-ui.github.io/bootstrap/這是引導實現角 –

你使用的引導日期選擇器，然後包括引導日期選擇器CSS。 – Jenny

請參考下面的代碼片段。

angular.module("date", []) 
 
    .directive("datepicker", function() { 
 
    return { 
 
     restrict: "A", 
 
     link: function (scope, el, attr) { 
 
      el.datepicker({ 
 
          dateFormat: 'yy-mm-dd' 
 
         }); 
 
     } 
 
    }; 
 
}) 
 
    .controller("dateCtrl", function ($scope) { 
 
});

<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/themes/smoothness/jquery-ui.min.css" rel="stylesheet" type="text/css" /> 
 
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script> 
 
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"></script> 
 
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.5/angular.min.js"></script> 
 
<div ng-app="date"> 
 
<div ng-controller="dateCtrl"> 
 

 
    <!-- ng --> 
 
    Angular JS:<input type="text" datepicker ng-model="date2" /> 
 
    <span>{{date2}}</span> 
 
</div> 
 
</div>

來源

2017-04-11 04:29:21

感謝您的努力，我實際上我想實現引導日期選擇器像下面的plunker http://embed.plnkr.co/fJiDJc1umtnR5veflaOP/我想添加這個日期選擇器到我的管理面板模板 –

這個指令可以實現您的要求

的index.html

<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js"</script> 
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.5/angular.min.js"></script> 
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"> 
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
    <link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.6.4/css/bootstrap-datepicker.css" rel="stylesheet" rel="stylesheet" type="text/css"/> 
    <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.6.4/js/bootstrap-datepicker.js"></script> 

    <script src="script.js"></script> 
    <div ng-app="date"> 
     <div name="datepicker"> 
     <date-picker ng-model="date"></date-picker> 
    </div> 
</div>

datepicker.directive.js

angular.module("date", []) 
    .directive('datePicker', function() { 
    return { 
      restrict: 'E', 
      require: ['ngModel'], 
      scope: { 
       ngModel: '=' 
       }, 
      replace: true, 
      template: 
      '<div class="input-group">'  + 
       '<input type="text" class="form-control" ngModel required>' + 
       '<span class="input-group-addon"><i class="glyphicon glyphicon-calendar"></i></span>' + 
     '</div>' , 
    link: function(scope, element, attrs) { 
     var input = element.find('input'); 
     var nowTemp = new Date(); 
     var now = new Date(nowTemp.getFullYear(), nowTemp.getMonth(), nowTemp.getDate(),0,0,0,0); 
     console.log(now); 
     console.log(nowTemp); 

     input.datepicker({ 
      format: "yyyy-mm-dd", 
      onRender: function(date) { 
       return date.valueOf() < now.valueOf() ? 'disabled' : ''; 
      } 
     }); 

     element.bind('blur keyup change', function() { 
      scope.ngModel = input.val(); 
      console.info('date-picker event', input.val(), scope.ngModel); 
      input.datepicker('hide') 
     }); 

    } 
}

}）;

來源

2017-04-11 05:20:04

Bootstrap日期選擇器不顯示在角度js

回答

相關問題