在angularstrap datepicker中顯示/隱藏的手動觸發器

Question

我想使用按鈕來顯示和隱藏日期選擇器。

​​

有關於如何做到這一點

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日期選擇器的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"，日期選擇器將被放置在<bs-datepicker>元素內，根據您的需求可能會有所幫助。