모서리 받침대 datepicker에서 표시/숨기기 수동 트리거

Question

단추를 사용하여 날짜 표시기를 표시하고 숨기려고합니다.

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

이 지금 ngStrap 날짜 선택기의 v2.0.4에 훨씬 더 쉽게이

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

    }; 

}); 

Answer 1

을 수행하는 방법에 대한 더 문서화가 없습니다. 자세한 내용은 this Github comment을 참조하십시오. 여기에 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> 

:

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

는 또한 CSS를 재정의해야합니다 :

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

은 언제나 data-bs-show="true"에 속성을 변경하려면 날짜 선택기를 표시합니다.

data-container="self" 속성을 추가하면 날짜 표시기가 <bs-datepicker> 요소 안에 배치되며 이는 사용자의 필요에 따라 유용 할 수 있습니다.