Question

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

Demo here

我尝试将model1分配给To Date的min-date属性，如下所示，但是没有用。一旦用户在From-Date字段中选择了日期但最终出现javascript错误，甚至尝试显示To-Date字段日期选择器日历。任何建议都会有所帮助。

 <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 code：

   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;
        });

Answer 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打开第二个。

根据第一个datepicker字段中选择的日期禁用日期

1 个答案: