Question

我正在尝试使用angularjs中的日期选择器功能创建日期选择器，但日期选择器未显示。我将该日期选择器称为指令，即使它没有显示任何错误，因此我无法修复它，任何人都可以帮助我，并提前感谢。

以下是我的代码

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) {
 }
})();

Answer 1

请参阅以下代码段。

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>

Answer 2

该指令可能符合您的要求

的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')
        });

    }
}

}）;

Bootstrap日期选择器不以角度js显示

2 个答案: