5

ボタンを使用して、日付ピッカーを表示および非表示にしたいと考えています。

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

  };

 });
4

1 に答える 1

7

これは、ngStrap Datepicker の v2.0.4 ではるかに簡単になりました。詳細については、この Github コメントを参照してください。これは、日付ピッカーを手動でトリガーされたドロップダウンと手動でトリガーされたインライン要素の両方として示すための実用的なプランクです。

<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>ます。これは、必要に応じて役立つ場合があります。

于 2014-07-25T23:11:26.717 に答える