在angularstrap datepicker中手动触发显示/隐藏

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可以轻松实现这一点.有关更多详细信息,请参阅此Github评论.这是一个工作插件,用于将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",则会将datepicker放置在<bs-datepicker>元素内部,这可能会有所帮助,具体取决于您的需要.