Angularstrap datepicker öğesinde göster/gizle'nin manuel tetikleyicisi

Question

Tarihçubuğu göstermek ve gizlemek için bir düğme kullanmak istiyorum.

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

Bu şimdi ngStrap DatePicker ait v2.0.4 ile çok daha kolay bu

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

nasıl yapılacağına ilişkin hiçbir dokümantasyon vardır. Daha fazla ayrıntı için bkz. this Github comment. İşte a working plunk to demonstrate the datepicker as both a manually-triggered dropdown, and as a manually-triggered inline element. Kumandanızda olarak

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

:

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

Ayrıca CSS geçersiz kılmak gerekir:

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

her zaman sadece data-bs-show="true" için niteliğini değiştirmek, datepicker göstermek için.

data-container="self" özniteliğini eklerseniz, tarih aralığı <bs-datepicker>10 öğesinin içine yerleştirilir; bu, ihtiyaçlarınıza bağlı olarak yararlı olabilir.