uib-datepicker动态最小日期angularjs

Question

uib-datepicker动态最小日期angularjs

vic*_*ict 5 datepicker angularjs angular-ui-bootstrap

我有一个简单的代码，使用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>

Run Code Online (Sandbox Code Playgroud)

我需要从第一个日期开始在第二个日期中动态设置一个最小日期。我尝试了不同的方法，但没有一个可以工作

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

Run Code Online (Sandbox Code Playgroud)

这就是我目前在控制器中所拥有的，这是我发现它适用于ui-bootstrap中的datepicker，但不适用于uib-datepicker。

Answer 1

小智 4

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

Run Code Online (Sandbox Code Playgroud)

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

归档时间：	10 年，1 月前
查看次数：	9641 次
最近记录：	8 年，3 月前