[英]Multiple Datepickers / Min Date Bootstrap Angular Datepicker
我正在使用Bootstrap Angular Datepicker
我這里有兩個問題。 我有兩個約會選擇者。 開始日期選擇器和結束日期選擇器。
我的第一個問題是，單擊“開始日期”選擇器時，兩個日期選擇器日歷都會出現。
我試圖創造每一個單獨的函數ng-click上的日期選取器， open()開始日期和open2()的結束日期，讓每一個會顯示它自己的日歷，但都保持雨后春筍般冒出來，當點擊在開始日期選擇器上。
我已禁用結束日期選擇器，直到通過ng-disabled="!dt"選擇第一個日期為止。
我試圖解決的第二個問題是，在選擇開始日期時，它會自動將結束日期選擇器上可用的最小日期設置為開始日期+ 1天。 因此，您不能在結束日期選擇器上選擇一個比開始日期低的日期或與開始日期相同的日期。
我已經嘗試過min-date="dt + 1"但這不會增加日期-它只是將其設置為與開始日期相同的日期。
任何幫助，不勝感激。 謝謝
我有一個編輯過的Plunker，但是代碼也在下面。
HTML
<!doctype html>
<html ng-app="ui.bootstrap.demo">
<head>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.16/angular.js"></script>
<script src="//angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.12.1.js"></script>
<script src="example.js"></script>
<link href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<div ng-controller="DatepickerDemoCtrl">
<h4>Start Date</h4>
<div class="row">
<div class="col-md-6">
<p class="input-group">
<input type="text" class="form-control" datepicker-popup="{{format}}" ng-model="dt" is-open="opened" min-date="minDate" max-date="'2015-06-22'" datepicker-options="dateOptions" date-disabled="disabled(date, mode)" ng-required="true" close-text="Close" />
<span class="input-group-btn">
<button type="button" class="btn btn-default" ng-click="open($event)"><i class="glyphicon glyphicon-calendar"></i></button>
</span>
</p>
</div>
</div>
<h4>End Date</h4>
<div class="row">
<div class="col-md-6">
<p class="input-group">
<input type="text" ng-disabled="!dt" class="form-control" datepicker-popup="{{format}}" ng-model="dt2" is-open="opened" min-date="dt + 1" max-date="'2015-06-22'" datepicker-options="dateOptions" date-disabled="disabled(date, mode)" ng-required="true" close-text="Close" />
<span class="input-group-btn">
<button type="button" ng-disabled="!dt" class="btn btn-default" ng-click="open2($event)"><i class="glyphicon glyphicon-calendar"></i></button>
</span>
</p>
</div>
</div>
<pre>Start date is: <em>{{dt | date:'fullDate' }}</em></pre>
<pre>End date is: <em>{{dt2 | date:'fullDate' }}</em></pre>
<hr />
<button type="button" class="btn btn-sm btn-info" ng-click="today()">Today</button>
<button type="button" class="btn btn-sm btn-default" ng-click="dt = '2009-08-24'">2009-08-24</button>
<button type="button" class="btn btn-sm btn-danger" ng-click="clear()">Clear</button>
<button type="button" class="btn btn-sm btn-default" ng-click="toggleMin()" tooltip="After today restriction">Min date</button>
</div>
</body>
</html>
JS
angular.module('ui.bootstrap.demo', ['ui.bootstrap']);
angular.module('ui.bootstrap.demo').controller('DatepickerDemoCtrl', function ($scope) {
$scope.clear = function () {
$scope.dt = null;
$scope.dt2 = null;
};
$scope.toggleMin = function() {
$scope.minDate = $scope.minDate ? null : new Date();
};
$scope.toggleMin();
$scope.open = function($event) {
$event.preventDefault();
$event.stopPropagation();
$scope.opened = true;
};
$scope.open2 = function($event) {
$event.preventDefault();
$event.stopPropagation();
$scope.opened = true;
};
$scope.dateOptions = {
formatYear: 'yy',
startingDay: 1
};
$scope.formats = ['dd-MMMM-yyyy', 'yyyy/MM/dd', 'dd.MM.yyyy', 'shortDate'];
$scope.format = $scope.formats[0];
});
兩個時間選擇器在angularjs中一次打開
在您的代碼中，您具有與用戶相同的方法來打開日期選擇器彈出實時代碼，方法如下： http : //jsfiddle.net/RLQhh/974/
$scope.open1 = function($event) {
$event.preventDefault();
$event.stopPropagation();
$scope.opened1 = true;
$scope.opened2 = false;
};
$scope.open2 = function($event) {
$event.preventDefault();
$event.stopPropagation();
$scope.opened1 = false;
$scope.opened2 = true;
};
嗨，我為最晚日期所做的更改
實時代碼http://jsfiddle.net/RLQhh/1003/
/****new min date code */
$scope.dateChange = function(event){
var d= $scope.minDate1.setDate( $scope.dt.getDate() + 1);
$scope.minDate1=new Date(d);
}
/****new min date code end */
$scope.toggleMin = function() {
$scope.minDate = $scope.minDate ? null : new Date();
$scope.minDate1 = new Date();
};
HTML代碼
<h4>Start Date</h4>
<div class="row">
<div class="col-md-6">
<p class="input-group">
<input type="text" class="form-control" datepicker-popup="{{format}}" ng-model="dt" is-open="opened1" min-date="minDate" max-date="'2015-06-22'" datepicker-options="dateOptions" date-disabled="disabled(date, mode)" ng-required="true" ng-change="dateChange($event)"close-text="Close" />
<span class="input-group-btn">
<button type="button" class="btn btn-default" ng-click="open1($event)"><i class="glyphicon glyphicon-calendar"></i></button>
</span>
</p>
</div>
</div>
<h4>End Date</h4>
<div class="row">
<div class="col-md-6">
<p class="input-group">
<input type="text" ng-disabled="!dt" class="form-control" datepicker-popup="{{format}}" ng-model="dt2" is-open="opened2" min-date="minDate1" max-date="'2015-06-22'" datepicker-options="dateOptions" date-disabled="disabled(date, mode)" ng-required="true" close-text="Close" />
<span class="input-group-btn">
<button type="button" ng-disabled="!dt" class="btn btn-default" ng-click="open2($event)"><i class="glyphicon glyphicon-calendar"></i></button>
</span>
</p>
</div>
</div>
對於您的范圍選擇問題（為第二個datePicker設置最小日期）：
我代表ADMdtp模塊。 它是純粹的AngularJs dateTimePicker，具有許多出色的選擇：
<adm-dtp ng-model="date1" full-data="date1_full"></adm-dtp>
<adm-dtp ng-model="date2" mindate="{{date1_full.unix}}"></adm-dtp>
我將其設置為動態日期選擇器，因此您不必為每個日期選擇器元素創建多個$ scope.open（）。
這是我在HTML中所做的更改
對於dt：is-open =“ dtOpened ” ng-click =“ open（$ event， 'dtOpened' ）”
對於dt2：is-open =“ dt2Opened ” ng-click =“ open（$ event， 'dt2Opened' ）”
然后向$ scope.Open（$ event）函數添加一個參數，該參數將變為$ scope.Open（$ event，which）
這是整個代碼
<h4>Start Date</h4>
<div class="row">
<div class="col-md-6">
<p class="input-group">
<input type="text" class="form-control" datepicker-popup="{{format}}" ng-model="dt" is-open="**dtOpened**" min-date="minDate" max-date="'2015-06-22'" datepicker-options="dateOptions" date-disabled="disabled(date, mode)" ng-required="true" close-text="Close" />
<span class="input-group-btn">
<button type="button" class="btn btn-default" ng-click="open($event,**'dtOpened'**)"><i class="glyphicon glyphicon-calendar"></i></button>
</span>
</p>
</div>
</div>
<h4>End Date</h4>
<div class="row">
<div class="col-md-6">
<p class="input-group">
<input type="text" ng-disabled="!dt" class="form-control" datepicker-popup="{{format}}" ng-model="dt2" is-open="**dt2Opened**" min-date="dt + 1" max-date="'2015-06-22'" datepicker-options="dateOptions" date-disabled="disabled(date, mode)" ng-required="true" close-text="Close" />
<span class="input-group-btn">
<button type="button" ng-disabled="!dt" class="btn btn-default" ng-click="open($event**,'dt2Opened'**)"><i class="glyphicon glyphicon-calendar"></i></button>
</span>
</p>
</div>
$scope.open = function($event,which) {
$event.preventDefault();
$event.stopPropagation();
$scope[which]= true;
};
Angular ui.bootstrap datepicker 動態最小日期不起作用
[英]Angular ui.bootstrap datepicker dynamic min-date not working
當頁面中有多個datepicker時，如何定位bootstrap datepicker自己的'.datepicker-dropdown'。？（無容器選項）
[英]How to target bootstrap datepicker's its own '.datepicker-dropdown' when there is multiple datepickers in a page.?(without container option)
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.