Manual trigger of show / hide in angularstrap datepicker

Question

I want to use a button to show and hide the datepicker.

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

there are no documentations on how to do this

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 is now much easier with v2.0.4 of ngStrap Datepicker. For more details, see this Github comment. Here's 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 your controller:

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

You'll also need to override the 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;
}

To always show the datepicker, just change the attribute to data-bs-show="true".

If you add the attribute data-container="self", the datepicker will be placed inside the <bs-datepicker> element, which might be useful depending on your needs.