angularjs - 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

现在使用 ngStrap Datepicker v2.0.4 更容易。有关更多详细信息，请参阅此 Github 评论。这是一个工作 plunk 来演示 datepicker 作为手动触发的下拉菜单和手动触发的内联元素。

<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>元素内，这可能会根据您的需要有用。