2016-03-31 4 views
2

Ich bin der Anfänger in angularjs. Ich habe PhoneGap-Anwendung erstellt, um Datumswähler zu verwenden Ich benötige Monat und Datum in horizontaler Position, aber ich habe eine Datumsauswahl-Demo erstellt, die im Picker-Typ ist, aber ich brauche diese Typauswahl, die im Bild angezeigt wird.So fügen Sie die Datumsauswahl in horizontaler Paging-Bildlaufansicht in eckigen Js hinzu?

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

Antwort

1

Verwendung Bootstrap Datum Paginator Eine vollständige Liste der Abhängigkeiten für den Bootstrap-datepaginator erforderlich korrekt zu funktionieren.

<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> 

mehr Details Bootstrap Date Paginator

Verwandte Themen