angularjs - 在 angularstrap 日期选择器中手动触发显示/隐藏

Question

我想使用一个按钮来显示和隐藏日期选择器。

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

没有关于如何执行此操作的文档

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 更容易。更多详情请见this Github comment .这是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>

在您的 Controller 中:

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