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

发布时间：2020-12-17 17:43:51 所属栏目：安全来源：网络整理

导读：我想使用一个按钮来显示和隐藏日期选择器. http://mgcrea.github.io/angular-strap/##datepickers 没有关于如何做到这一点的文件 var app = angular.module('mgcrea.ngStrapDocs',['ngAnimate','ngSanitize','mgcrea.ngStrap']);app.controller('MainCtrl',f

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

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

  };

 });

解决方法

现在使用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>

在你的控制器中：

$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>内.元素,根据您的需要可能有用.

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!