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

Question

我正在处理 angularjs 应用程序。用户可以从开始日期选择器和结束日期选择器字段中选择 select 日期。我想根据用户 select 在起始日期选择器字段中输入的日期禁用截止日期选择器中的日期 selection。例如）如果用户在开始日期选择器字段中 selected 02/23/2017，则应在结束日期选择器中禁用 02/23/2017 之前的所有日期。

Demo here

我尝试将 model1 分配给 To Date 的 min-date 属性，如下所示，但这不起作用。甚至试图在用户 select 编辑起始日期字段中的日期时立即弹出显示截止日期字段日期选择器日历，但最终出现 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;
        });

Answer 1

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

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

所以：

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

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

disable the dates based on the date selected in the first datepicker field

javascript

angularjs

datepicker

angular-daterangepicker