Trigger manuale di show/hide in angularstrap datepicker

Question

Voglio usare un pulsante per mostrare e nascondere il datario.

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

non ci sono documentazioni su come fare questo

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

Questo è ora molto più semplice con v2.0.4 di ngStrap Datepicker. Per ulteriori dettagli, vedere this Github comment. Ecco 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> 

nel controller:

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

Avrete anche bisogno di ignorare il 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; 
} 

per mostrare sempre il DatePicker, basta cambiare l'attributo di data-bs-show="true".

Se si aggiunge l'attributo data-container="self", il datepicker verrà inserito all'interno dell'elemento <bs-datepicker>, che potrebbe essere utile in base alle proprie esigenze.