我想使用一个按钮来显示和隐藏日期选择器.
@H_301_8@
http://mgcrea.github.io/angular-strap/##datepickers@H_301_8@
@H_301_8@
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.
@H_301_8@
@H_301_8@
<bs-datepicker ng-model="myDatepicker.date" data-bs-show="myDatepicker.show"></bs-datepicker>
在你的控制器中：@H_301_8@
@H_301_8@
$scope.myDatepicker = {
date: null,show: false
};
您还需要覆盖CSS：@H_301_8@
@H_301_8@
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”.@H_301_8@
如果添加属性data-container =“self”,则datepicker将放在< bs-datepicker>内.元素,根据您的需要可能有用.@H_301_8@
