Trình kích hoạt thủ công của chương trình/ẩn trong trình chỉnh sửa datepicker

Question

Tôi muốn sử dụng nút để hiển thị và ẩn trình ghi ngày tháng.

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

không có tài liệu về cách để làm điều này

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

này bây giờ là dễ dàng hơn nhiều với v2.0.4 của ngStrap datepicker. Để biết thêm chi tiết, hãy xem this Github comment. Đây là 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> 

Trong điều khiển của bạn:

$scope.myDatepicker = { 
    date: null, 
    show: false 
}; 

Bạn cũng sẽ cần phải ghi đè 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; 
} 

Để luôn hiển thị datepicker, chỉ cần thay đổi thuộc tính để data-bs-show="true".

Nếu bạn thêm thuộc tính data-container="self", trình ghi ngày tháng sẽ được đặt bên trong phần tử <bs-datepicker>, có thể hữu ích tùy thuộc vào nhu cầu của bạn.