[英]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.