2014-04-09 6 views
5

Ich möchte eine Taste verwenden, um den Datepicker ein- und auszublenden. Das ist jetzt viel einfacher, mit v2.0.4 von ngStrap DatumsauswahlManuelles Auslösen des Anzeigens/Ausblendens in angularstrap datepicker

http://mgcrea.github.io/angular-strap/##datepickers

gibt es keine Dokumentation darüber, wie diese

var app = angular.module('mgcrea.ngStrapDocs', ['ngAnimate', 'ngSanitize', 

'mgcrea.ngStrap']); 

app.controller('MainCtrl', function($scope) { 
}); 

'use strict'; 

angular.module('mgcrea.ngStrapDocs') 

.config(function($datepickerProvider) { 
    angular.extend($datepickerProvider.defaults, { 
    dateFormat: 'dd/MM/yyyy', 
    startWeek: 1,trigger:manual 
    }); 
    }) 

.controller('DatepickerDemoCtrl', function($scope, $http,$datepicker) { 


//ng-click 
    $scope.datepickerpop = function() { 

    $datepicker.show(); 
    //$datepicker._show(); 

    }; 

}); 

Antwort

7

zu tun. Weitere Informationen finden Sie unter this Github comment. Hier ist a working plunk to demonstrate the datepicker as both a manually-triggered dropdown, and as a manually-triggered inline element.

<bs-datepicker ng-model="myDatepicker.date" data-bs-show="myDatepicker.show"></bs-datepicker> 

In Ihrem Controller:

$scope.myDatepicker = { 
    date: null, 
    show: false 
}; 

Sie brauchen auch die CSS außer Kraft zu setzen:

bs-datepicker[bs-show] .datepicker.dropdown-menu, 
bs-datepicker[bs-show] + .datepicker.dropdown-menu, 
bs-datepicker[data-bs-show] .datepicker.dropdown-menu, 
bs-datepicker[data-bs-show] + .datepicker.dropdown-menu { 
    position: relative; 
    top: 0 !important; 
    left: 0 !important; 
} 

Um immer die Datumsauswahl zu zeigen, ändern Sie einfach das Attribut data-bs-show="true".

Wenn Sie das Attribut data-container="self" hinzufügen, wird der Datumswähler innerhalb des Elements <bs-datepicker> platziert, was je nach Ihren Anforderungen nützlich sein kann.

+0

Die Kalender-Pop-up-Pfeilschaltflächen erscheinen nicht für mich auf der Angularstrap-Demo-Site, aber sie tun dies in Ihrem Plunker-Link. Wie hast du die Pfeiltasten dazu bekommen? In Chrome sind sie winzige Kästchen und der IE wird keine Schaltflächen rendern, aber ich kann auf eine leere/leere Schaltfläche in IE klicken – Rick