gpt4 book ai didi

angularjs - uib-datepicker 动态最小日期 angularjs

转载 作者:行者123 更新时间:2023-12-02 22:57:37 25 4
gpt4 key购买 nike

我有一个简单的代码,带有 uib-datepicker-popup 的 2 个日期:

          <div>
<p class="input-group">
<input type="date" class="form-control" uib-datepicker-popup ng-model="adSearch.initDate" is-open="status1.opened" close-text="Close" />
<span class="input-group-btn">
<button type="button" class="btn btn-default" ng-click="open($event, 'initDate')"><i class="glyphicon glyphicon-calendar"></i></button>
</span>
</p>
</div>
<div>
<p class="input-group">
<input type="date" class="form-control" uib-datepicker-popup ng-model="adSearch.endDate" is-open="status2.opened" close-text="Close" min-date="{{minEndDate}}" />
<span class="input-group-btn">
<button type="button" class="btn btn-default" ng-click="open($event, 'endDate')"><i class="glyphicon glyphicon-calendar"></i></button>
</span>
</p>
</div>

我需要在第一个日期的第二个日期中动态设置最小日期。我尝试了不同的方法,但没有一种有效

$scope.open = function($event, date) {
if(date === 'initDate'){
$scope.status1.opened = true;
}else if(date === 'endDate'){
$scope.status2.opened = true;
}
};

$scope.status1 = {
opened: false
};

$scope.status2 = {
opened: false
};

$scope.adSearch.initDate = null;
$scope.minEndDate = $scope.adSearch.initDate;
$scope.$watch('adSearch.initDate', function(v){
console.log(v);
$scope.minEndDate = v;
});

这就是我目前 Controller 中的内容,我发现它适用于 ui-bootstrap 中的 datepicker,但不适用于 uib-datepicker。

最佳答案

<html ng-app="ui.bootstrap.demo">
<head>
<link rel="stylesheet" href="bootstrap.css">
<script src="angular.js"></script>
<script src="angular-animate.js"></script>
<script src="ui-bootstrap-tpls-1.1.1.js"></script>
<script>


angular.module('ui.bootstrap.demo', ['ngAnimate', 'ui.bootstrap']);
angular.module('ui.bootstrap.demo').controller('DatepickerDemoCtrl', function ($scope) {
$scope.minDate = new Date();

$scope.open1 = function() {
$scope.popup1.opened = true;
};
$scope.open2 = function() {
$scope.minDate = $scope.dt;
$scope.popup2.opened = true;
};
$scope.dateOptions = {
formatYear: 'yy',
startingDay: 1
};

$scope.format = 'dd-MMMM-yyyy';
$scope.popup1 = {
opened: false
};
$scope.popup2 = {
opened: false
};
});
</script>

</head>
<body>
<div ng-controller="DatepickerDemoCtrl">
<div class="row">
<div class="col-md-6">
<p class="input-group">
<input type="text" class="form-control" uib-datepicker-popup="{{format}}" ng-model="dt" is-open="popup1.opened" show-button-bar="false" />
<span class="input-group-btn">
<button type="button" class="btn btn-default" ng-click="open1()"><i class="glyphicon glyphicon-calendar"></i></button>
</span>
</p>
</div>

<div class="col-md-6">
<p class="input-group">
<input type="text" class="form-control" uib-datepicker-popup ng-model="dt" is-open="popup2.opened" show-button-bar="false" min-date="minDate" />
<span class="input-group-btn">
<button type="button" class="btn btn-default" ng-click="open2()"><i class="glyphicon glyphicon-calendar"></i></button>
</span>
</p>
</div>
</div>


</div>
</body>
</html>

检查一下。 $scope 中的 minDate 变量在调用 open2() fn 时设置(即弹出结束日期弹出窗口时。使用 ng-Click()

关于angularjs - uib-datepicker 动态最小日期 angularjs,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/34333802/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com