使用AngularJS和UI引导的多个日期选择器的奇怪行为
我正在使用AngularJS和UI Bootstrap编写一个应用程序，并尝试实现一个模式，用户可以选择事件的开始日期和结束日期。我遇到的问题是，当用户选择结束日期时，开始日期也会受到影响，从而导致不正确的值 我在这里做了一个最小的测试用例： （我试图用Plunkr复制它，但由于某种原因，我在那里没有得到相同的行为） Plunker链接： 要重新创建问题，请单击“启动”按钮，打开开始日期的日期选择器，然后单击右箭头转到下个月并选择日期。然后，单击右箭头以转到下一个月并选择任意日期作为结束日期。然后单击“保存”。将显示一个警报框，显示开始和结束日期，但开始日期与日期选择器中选择的日期不对应，它被设置为为为结束日期选择的月份的第一个 我已在中确定了以下功能： main.js使用AngularJS和UI引导的多个日期选择器的奇怪行为,angularjs,angular-ui-bootstrap,watch,bootstrap-datepicker,Angularjs,Angular Ui Bootstrap,Watch,Bootstrap Datepicker,我正在使用AngularJS和UI Bootstrap编写一个应用程序，并尝试实现一个模式，用户可以选择事件的开始日期和结束日期。我遇到的问题是，当用户选择结束日期时，开始日期也会受到影响，从而导致不正确的值 我在这里做了一个最小的测试用例： （我试图用Plunkr复制它，但由于某种原因，我在那里没有得到相同的行为） Plunker链接： 要重新创建问题，请单击“启动”按钮，打开开始日期的日期选择器，然后单击右箭头转到下个月并选择日期。然后，单击右箭头以转到下一个月并选择任意日期作为结束日期。然
+function(angular, d3) {
"use strict";
var app = angular.module('mainApp', ['ui.bootstrap']);
app.controller('datepickCtrl', ['$scope', '$rootScope', '$uibModalInstance', function($scope, $rootScope, $uibModalInstance) {
$scope.startDate = new Date();
$scope.endDate = new Date();
$scope.startOpened = false;
$scope.endOpened = false;
$scope.name = '';
$scope.mode = 'list';
$scope.save = function () {
alert("Saving dates start: " + $scope.startDate + " and end " + $scope.endDate);
};
$scope.cancel = function () {
$uibModalInstance.dismiss('cancel');
};
$scope.toggleStartCalendar = function($event) {
$event.preventDefault();
$event.stopPropagation();
$scope.startOpened = !$scope.startOpened;
};
$scope.toggleEndCalendar = function($event) {
$event.preventDefault();
$event.stopPropagation();
$scope.endOpened = !$scope.endOpened;
};
$scope.dateOptions = {
formatYear: 'yy',
startingDay: 1
};
$scope.setMode = function(mode) {
$scope.mode = mode;
}
$scope.cancel = function () {
$uibModalInstance.dismiss('cancel');
};
$scope.adjustEndDate = function() {
if ($scope.endDate < $scope.startDate) {
console.log("Adjusting end date to " + $scope.startDate);
$scope.endDate = $scope.startDate;
}
};
$scope.adjustStartDate = function() {
if ($scope.startDate > $scope.endDate) {
console.log("Adjusting start date to " + $scope.endDate);
$scope.startDate = $scope.endDate;
}
};
}]);
app.controller('testCtrl', ['$scope', '$rootScope', '$uibModal', function($scope, $rootScope, $uibModal) {
$scope.openModal = function() {
if (conf.suspended) {
return;
}
var modalInstance = $uibModal.open({
animation: true,
templateUrl: conf.templates.datepickModal,
controller: 'datepickCtrl',
size: 'md'
});
};
}]);
}(window.angular, window.d3);
+功能（角度，d3）{
“严格使用”；
var-app=angular.module（'mainApp'，['ui.bootstrap']）；
app.controller（'datepickCtrl'、['$scope'、'$rootScope'、'$uibModalInstance'，函数（$scope、$rootScope、$uibModalInstance）{
$scope.startDate=新日期（）；
$scope.endDate=新日期（）；
$scope.startOpened=false；
$scope.com=false；
$scope.name=''；
$scope.mode='list'；
$scope.save=函数（）{
警报（“保存日期开始：“+$scope.startDate+”和结束“+$scope.endDate”）；
};
$scope.cancel=函数（）{
$uibModalInstance.discover（'cancel'）；
};
$scope.toggleStartCalendar=函数（$event）{
$event.preventDefault（）；
$event.stopPropagation（）；
$scope.startOpened=！$scope.startOpened；
};
$scope.toggleEndCalendar=函数（$event）{
$event.preventDefault（）；
$event.stopPropagation（）；
$scope.ONPEED=！$scope.ONPEED；
};
$scope.dateOptions={
年份：“yy”，
开始日期：1
};
$scope.setMode=函数（模式）{
$scope.mode=模式；
}
$scope.cancel=函数（）{
$uibModalInstance.discover（'cancel'）；
};
$scope.adjustEndDate=函数（）{
如果（$scope.endDate<$scope.startDate）{
log（“将结束日期调整为“+$scope.startDate”）；
$scope.endDate=$scope.startDate；
}
};
$scope.adjustStartDate=函数（）{
如果（$scope.startDate>$scope.endDate）{
log（“将开始日期调整为“+$scope.endDate”）；
$scope.startDate=$scope.endDate；
}
};
}]);
app.controller（'testCtrl'、['$scope'、'$rootScope'、'$uibModal'，函数（$scope、$rootScope、$uibModal）{
$scope.openModal=function（）{
如果（形态暂停）{
返回；
}
var modalInstance=$uibModal.open({
动画：没错，
templateUrl:conf.templates.datepickModal，
控制器：“datepickCtrl”，
尺寸：“md”
});
};
}]);
}（window.angular，window.d3）；
<!doctype html>
<html>
<head>
<title>Test page</title>
<link rel="stylesheet" href="bootswatch-dist/css/bootstrap.min.css"></link>
<link rel="stylesheet" href="css/main.css"></link>
<script>
var conf = {
templates: {
datepickModal: "script/angular/templates/datepickModal.html"
}
};
</script>
<script src="angular/angular.js" ></script>
<script src="jquery/dist/jquery.min.js"></script>
<script src="angular-animate/angular-animate.js"></script>
<script src="angular-bootstrap/ui-bootstrap.js"></script>
<script src="angular-bootstrap/ui-bootstrap-tpls.js"></script>
<script src="script/angular/main.js"></script>
</head>
<body data-ng-app="mainApp">
<div id="main" ng-controller="testCtrl">
<button ng-click="openModal()">Launch modal</button>
</div>
</body>
</html>
<div class="modal-header">
<h3 class="modal-title">Datepick tester</h3>
</div>
<div class="modal-body">
<div class="row">
<div class="col-md-6">
<p class="input-group">
<label for="startdate">Start date</label><p class="input-group">
<input type="text" class="form-control" uib-datepicker-popup ng-model="startDate" ng-change="adjustEndDate()" is-open="startOpened" ng-required="true" uib-datepicker-options="dateOptions" name="startdate" ng-click="toggleStartCalendar($event)"/>
<span class="input-group-btn">
<button type="button" class="btn btn-default" ng-click="toggleStartCalendar($event)"><i class="glyphicon glyphicon-calendar"></i></button>
</span>
</p>
</div>
<div class="col-md-6">
<p class="input-group">
<label for="enddate">End date</label><p class="input-group">
<input type="text" class="form-control" uib-datepicker-popup ng-model="endDate" is-open="endOpened" ng-change="adjustStartDate()" ng-required="true" uib-datepicker-options="dateOptions" name="enddate" ng-click="toggleEndCalendar($event)"/>
<span class="input-group-btn">
<button type="button" class="btn btn-default" ng-click="toggleEndCalendar($event)"><i class="glyphicon glyphicon-calendar"></i></button>
</span>
</p>
</div>
</div>
</div>
<div class="modal-footer">
<button class="btn btn-primary" ng-click="save()">Save</button>
<button class="btn btn-warning" ng-click="cancel()">Close</button>
</div>
日期选择测试仪
开始日期
结束日期
拯救
接近
- AngularJS:1.4.8
- JQuery:2.1.4
- UI引导：1.2.4
- 我也有同样的问题。问题是您正在此处复制日期对象：
$scope.endDate=$scope.startDate
只需将其更改为：
$scope.endDate=新日期（$scope.startDate.getTime（））哇，非常感谢！我通过升级引导和Angular解决了这个问题，但我很高兴你找到了解决方案！
<div class="modal-header">
<h3 class="modal-title">Datepick tester</h3>
</div>
<div class="modal-body">
<div class="row">
<div class="col-md-6">
<p class="input-group">
<label for="startdate">Start date</label><p class="input-group">
<input type="text" class="form-control" uib-datepicker-popup ng-model="startDate" ng-change="adjustEndDate()" is-open="startOpened" ng-required="true" uib-datepicker-options="dateOptions" name="startdate" ng-click="toggleStartCalendar($event)"/>
<span class="input-group-btn">
<button type="button" class="btn btn-default" ng-click="toggleStartCalendar($event)"><i class="glyphicon glyphicon-calendar"></i></button>
</span>
</p>
</div>
<div class="col-md-6">
<p class="input-group">
<label for="enddate">End date</label><p class="input-group">
<input type="text" class="form-control" uib-datepicker-popup ng-model="endDate" is-open="endOpened" ng-change="adjustStartDate()" ng-required="true" uib-datepicker-options="dateOptions" name="enddate" ng-click="toggleEndCalendar($event)"/>
<span class="input-group-btn">
<button type="button" class="btn btn-default" ng-click="toggleEndCalendar($event)"><i class="glyphicon glyphicon-calendar"></i></button>
</span>
</p>
</div>
</div>
</div>
<div class="modal-footer">
<button class="btn btn-primary" ng-click="save()">Save</button>
<button class="btn btn-warning" ng-click="cancel()">Close</button>
</div>