2016-03-31 20 views
2

私はangularjsの初心者です。私はPhoneGapアプリケーションを使用して日付ピッカーを作成しました。月と日付は水平にする必要がありますが、ピッカータイプの日付ピッカーデモを作成しましたが、このタイプのピッカーがイメージに表示される必要があります。角度Jの水平ページングスクロールビューで日付ピッカーを追加する方法は?

angular.module('ui.bootstrap.demo', ['ngAnimate', 'ui.bootstrap']); 
 
angular.module('ui.bootstrap.demo').controller('DatepickerDemoCtrl', function ($scope) { 
 
    $scope.today = function() { 
 
    $scope.dt = new Date(); 
 
    }; 
 
    $scope.today(); 
 

 
    
 
    function disabled(data) { 
 
    var date = data.date, 
 
     mode = data.mode; 
 
    return mode === 'day' ; 
 
    } 
 

 
    
 

 
    function getDayClass(data) { 
 
    var date = data.date, 
 
     mode = data.mode; 
 
    if (mode === 'day') { 
 
     // var dayToCheck = new Date(date).setHours(0,0,0,0); 
 

 
     for (var i = 0; i < $scope.events.length; i++) { 
 
     // var currentDay = new Date($scope.events[i].date).setHours(0,0,0,0); 
 

 
     if (dayToCheck === currentDay) { 
 
      return $scope.events[i].status; 
 
     } 
 
     } 
 
    } 
 

 
    return ''; 
 
    } 
 
});
<!doctype html> 
 
<html ng-app="ui.bootstrap.demo"> 
 

 
<head> 
 
    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.0/angular.js"></script> 
 
    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.0/angular-animate.js"></script> 
 
    <script src="//angular-ui.github.io/bootstrap/ui-bootstrap-tpls-1.2.5.js"></script> 
 
    <script src="script.js"></script> 
 
    <link href="//netdna.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"> 
 
</head> 
 

 
<body> 
 

 
    <div ng-controller="DatepickerDemoCtrl"> 
 
    <pre>Selected date is: <em>{{dt | date:'fullDate' }}</em></pre> 
 

 
    <h4>Inline</h4> 
 
    <div> 
 
     <uib-datepicker ng-model="dt" class="well well-sm"></uib-datepicker> 
 
    </div> 
 

 
    </div> 
 
</body> 
 

 
</html>

http://i.stack.imgur.com/hzql9.png

答えて

1

使用ブートストラップ日付ページネータ 正しく機能するために、ブートストラップ・datepaginatorのために必要な依存関係の完全なリスト。

<link href="./css/bootstrap.css" rel="stylesheet"> 
<link href="./css/bootstrap-datepicker.css" rel="stylesheet"> 

<!-- Required Javascript --> 
<script src="./js/jquery.js"></script> 
<script src="./js/moment.js"></script> 
<script src="./js/bootstrap-datepicker.js"></script> 
<script src="./js/bootstrap-datepaginator.js"></script> 

詳細Bootstrap Date Paginator

関連する問題