0

我正在研究 angularjs 应用程序。用户可以从 From Date 选择器和 To Date 选择器字段中选择日期。我想根据用户在 From Date 选择器字段中选择的日期禁用 To Date 选择器中的日期选择。例如）如果用户在 From Date 选择器字段中选择了 02/23/2017，则应在 To Date 选择器中禁用 02/23/2017 之前的所有日期。

演示在这里

我尝试将 model1 分配给 To Date 的 min-date 属性，如下所示，但这不起作用。甚至尝试在用户在 From-Date 字段中选择日期后立即显示 To-Date 字段日期选择器日历，但最终出现 javascript 错误。任何的意见都将会有帮助。

 <input type="text" uib-datepicker-popup="{{dateformat}}" min-date={{model1}} ng-model="model2" is-open="showdp" />

下面是代码：

     <div style="float:left" ng-controller="fromDateCtrl">
        From Date:
        <input type="text" uib-datepicker-popup="{{dateformat}}" min-date="mindate" ng-model="model1" is-open="showdp" />
        <span>
        <button type="button" class="btn btn-default" ng-click="showcalendar($event)">
            <i class="glyphicon glyphicon-calendar"></i>
        </button>
    </span>
    </div>
    <div style="float:left" ng-controller="toDateCtrl">
        To Date:
        <input type="text" uib-datepicker-popup="{{dateformat}}" min-date="mindate" ng-model="model2" is-open="showdp" />
        <span>
        <button type="button" class="btn btn-default" ng-click="showcalendar($event)">
            <i class="glyphicon glyphicon-calendar"></i>
        </button>
    </span>
    </div>

js代码：

   angular.module('plunker', ['ngAnimate', 'ui.bootstrap']);
        angular.module('plunker').controller('fromDateCtrl', function ($scope) {
            $scope.today = function () {
                $scope.model1 = new Date();
            };
            $scope.mindate = new Date();
            $scope.dateformat="MM/dd/yyyy";
            $scope.today();
            $scope.showcalendar = function ($event) {
                $scope.showdp = true;
            };
            $scope.showdp = false;
        });

        angular.module('plunker').controller('toDateCtrl', function ($scope) {
            $scope.today = function () {
                $scope.model2 = new Date();
            };
            $scope.mindate = new Date();
            $scope.dateformat="MM/dd/yyyy";
            $scope.today();
            $scope.showcalendar = function ($event) {
                $scope.showdp = true;
            };
            $scope.showdp = false;
        });
4

1 回答 1

1

首先，您为每个输入使用两个不同的控制器，这意味着您将无法访问第二个控制器中的 model1。

然后是最小日期应该是日期类型的事实。

所以：

angular.module('plunker', ['ngAnimate', 'ui.bootstrap']);
        angular.module('plunker').controller('dateCtrl', function ($scope) {
            $scope.model1 = new Date();
            $scope.model2 = new Date(); 
            $scope.mindate = new Date();
            $scope.dateformat="MM/dd/yyyy";            
        });
<link href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" rel="stylesheet">
<script language="javascript" src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.7/angular.js"></script>
<script language="javascript" src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.7/angular-animate.js"></script>
<script language="javascript" src="http://angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.14.3.js"></script>
<div ng-app="plunker">
  <div ng-controller="dateCtrl">
    <div style="float:left" >
    From Date:
    <input type="text" uib-datepicker-popup="{{dateformat}}" min-date="mindate" ng-model="model1" is-open="showFrom" ng-change="showTo = !showTo" />
    <span>
            <button type="button" class="btn btn-default" ng-click="showFrom = !showFrom">
                <i class="glyphicon glyphicon-calendar"></i>
            </button>
        </span>
  </div>
  <div style="float:left">
    To Date:
    <input type="text" uib-datepicker-popup="{{dateformat}}" min-date="model1" ng-model="model2" is-open="showTo" />
    <span>
            <button type="button" class="btn btn-default" ng-click="showTo = !showTo">
                <i class="glyphicon glyphicon-calendar"></i>
            </button>
        </span>
  </div>
  </div>
</div>

更新：

只需使用ng-change打开第二个。

于 2017-02-07T21:04:48.820 回答