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

  };

 });

Felicitation

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.

Hogtie

The calendar pop-up arrow buttons do not show up for me on the angularstrap demo site, but they do in your Plunker link. How did you get the arrow buttons to show up? In Chrome they're tiny boxes and IE won't render any buttons, but I can click on an empty/blank button in IE – Seamaid