Я использую Bootstrap Angular DatepickerНесколько Datepickers/Min Дата Bootstrap Угловая 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];
});
спасибо, что вам удалось помочь –