多个Datepickers / Min Date Bootstrap角度Datepicker
[英]Multiple Datepickers / Min Date Bootstrap Angular Datepicker
问题描述
I'm using Bootstrap Angular Datepicker 
我正在使用Bootstrap Angular Datepicker
I have two issues going one here. 我这里有两个问题。 I have two date-pickers. 我有两个约会选择者。 A Start date-picker and an End date-picker. 开始日期选择器和结束日期选择器。
My first issue is that when clicking on the Start Date picker both date-picker calendars appear. 我的第一个问题是，单击“开始日期”选择器时，两个日期选择器日历都会出现。
I've tried creating a separate function for each ng-click on the date-picker, open() for the start date and open2() for the end date so each one will show it's own calendar, however both keep popping up when clicking on the start date picker. 我试图创造每一个单独的函数ng-click上的日期选取器， open()开始日期和open2()的结束日期，让每一个会显示它自己的日历，但都保持雨后春笋般冒出来，当点击在开始日期选择器上。
I have disabled the end date-picker until the first date is chosen via ng-disabled="!dt" . 我已禁用结束日期选择器，直到通过ng-disabled="!dt"选择第一个日期为止。
My second issue which I've tried to tackle is, on selecting the start date, it then automatically sets the minimum date available on the end date date-picker to the start date + 1 day. 我试图解决的第二个问题是，在选择开始日期时，它会自动将结束日期选择器上可用的最小日期设置为开始日期+ 1天。 So you can't select a date on the end date-picker lower than the start date or the same day as the start date. 因此，您不能在结束日期选择器上选择一个比开始日期低的日期或与开始日期相同的日期。
I've tried min-date="dt + 1" but this does not increment the day - it just sets it to the same day as the start date.... 我已经尝试过min-date="dt + 1"但这不会增加日期-它只是将其设置为与开始日期相同的日期。
Any help much appreciated. 任何帮助，不胜感激。 Thanks 谢谢
I have an edited Plunker but the code is also below. 我有一个编辑过的Plunker，但是代码也在下面。
HTML 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 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];
});
4 个解决方案
解决方案1
1 已采纳 2015-03-09 12:15:49
Two date pickers Open at a time in angularjs 两个时间选择器在angularjs中一次打开
in your code you have user same method to open date picker popup live code is here: http://jsfiddle.net/RLQhh/974/ 在您的代码中，您具有与用户相同的方法来打开日期选择器弹出实时代码，方法如下： 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;
};
解决方案2
1 2015-03-11 12:21:50
hi this change i made for min date 嗨，我为最晚日期所做的更改
live code http://jsfiddle.net/RLQhh/1003/ 实时代码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 code 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>
解决方案3
0 2016-01-05 00:25:53
For your range picking issue (set min date for second datePicker): 对于您的范围选择问题（为第二个datePicker设置最小日期）：
I represent ADMdtp module. 我代表ADMdtp模块。 It's pure AngularJs dateTimePicker with lots of greate options: 它是纯粹的AngularJs dateTimePicker，具有许多出色的选择：
- completely synced with ngModel, so no need to destroy or manulay update dateTimePicker. 与ngModel完全同步，因此无需销毁或手动更新dateTimePicker。
- advance range picker; 提前范围选择器； make as many dateTimePicker as you want related together, and again no need to destroy or manualy update each dateTimePicker. 尽可能多地将dateTimePicker关联在一起，并且无需销毁或手动更新每个dateTimePicker。
- disabing pattern; 令人震惊的模式 so easily you can disable any day(s) in week or month, like all weekends. 因此，您可以轻松禁用一周或一个月中的任何一天，例如所有周末。
- transition on changing days. 在变化的日子过渡。 (of curse you can disable it in options) （当然，您可以在选项中禁用它）
- get full date details like date in UNIX format, Date format and year, month, day, hour and minute separately and ... by full-data attribute. 通过full-data属性分别获取完整的日期详细信息，例如UNIX格式的日期，日期格式以及年，月，日，小时和分钟，以及...。
- ... ...
<adm-dtp ng-model="date1" full-data="date1_full"></adm-dtp>
<adm-dtp ng-model="date2" mindate="{{date1_full.unix}}"></adm-dtp>
解决方案4
0 2016-01-05 20:33:09
I made it into a dynamic datepicker so you do not have to create multiple $scope.open() for each date-picker element. 我将其设置为动态日期选择器，因此您不必为每个日期选择器元素创建多个$ scope.open（）。
Here is what I changed in the HTML 这是我在HTML中所做的更改
for dt : is-open=" dtOpened " ng-click="open($event, 'dtOpened' )" 对于dt：is-open =“ dtOpened ” ng-click =“ open（$ event， 'dtOpened' ）”
for dt2 : is-open=" dt2Opened " ng-click="open($event, 'dt2Opened' )" 对于dt2：is-open =“ dt2Opened ” ng-click =“ open（$ event， 'dt2Opened' ）”
Then add a parameter to the $scope.Open($event) function and it becomes $scope.Open($event,which) 然后向$ scope.Open（$ event）函数添加一个参数，该参数将变为$ scope.Open（$ event，which）
here is the whole code 这是整个代码
<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;
};
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.