uib-datepicker 动态最小日期 angularjs

Question

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

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

这就是我目前在控制器中的内容，我发现它适用于 ui-bootstrap 的日期选择器，但不适用于 ui b-日期选择器。

Answer 1

您需要将 ui bootstrap 版本至少更新到 0.14.0 版 here

是从旧版本到新版本的迁移信息。

Answer 2

uib-datepicker 当你想从另一个日期更新模型时有一个大问题，我改变了主意并尝试了一些对 angular 也有效的不同方法（使用 jquery-ui datepicker ).

这是我使用并运行良好的 2 个指令：

.directive('startDateCalendar', [
function() {
   return function(scope, element) {

scope.$watch('filterDate.endDate', (function(newValue) {
  element.datepicker('option', 'maxDate', newValue);
}), true);

  return element.datepicker({
    dateFormat: 'dd-mm-yy',
    numberOfMonths: 1,
    maxDate: scope.filterDate.endDate,
    changeMonth: true,
    changeYear: true,
    showOtherMonths: true,
    selectOtherMonths: true,
    onSelect: function(date) {
      scope.filterDate.initDate = date;
      var dateHelper = date.split('-');
      scope.adSearch.initDate = new Date(dateHelper[2]+'-'+dateHelper[1]+'-'+dateHelper[0]);
      scope.dateSearch();
      scope.$apply();
    }
  });
};

}])

.directive('endDateCalendar', [
function() {
return function(scope, element) {
scope.$watch('filterDate.initDate', (function(newValue) {
  element.datepicker('option', 'minDate', newValue);
}), true);

  return element.datepicker({
    dateFormat: 'dd-mm-yy',
    numberOfMonths: 1,
    changeMonth: true,
    changeYear: true,
    showOtherMonths: true,
    selectOtherMonths: true,
    minDate: scope.filterDate.initDate,
    onSelect: function(date) {
      scope.filterDate.endDate = date;
      var dateHelper = date.split('-');
      scope.adSearch.endDate = new Date(dateHelper[2]+'-'+dateHelper[1]+'-'+dateHelper[0]);
      scope.dateSearch();
      return scope.$apply();
    }
  });
};

}])

这是 html:

<input type="text" start-date-calendar="" ng-model="filterDate.initDate" placeholder="Start Date" class="form-control" readonly="readonly" />

<input type="text" end-date-calendar="" ng-model="filterDate.endDate" placeholder="End Date" class="form-control" readonly="readonly"/>

Answer 3

<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 var 在调用 open2() fn 时设置（即弹出结束日期弹出窗口时。使用 ng-Click()

Answer 4

这是一个老问题，但有些人可能仍然觉得这对新版本有用。我目前使用的是 angular-ui-bootstrap，版本 2.2.0.

到达日期

<p class="input-group">
  <input type="text" class="form-control" uib-datepicker-popup="{{formatDate}}" datepicker-options="arriveDateOptions"
  ng-model="arriveDatePicked"
  is-open="arriveDateCalendarOpened"
  close-text="Close"/>
  <span class="input-group-btn">
    <button type="button" class="btn btn-default" ng-click="openArriveDateCalendar()">
      <i class="glyphicon glyphicon-calendar"></i>
    </button>
  </span>
</p>

出发日期

<p class="input-group">
  <input type="text" class="form-control" uib-datepicker-popup="{{formatDate}}" datepicker-options="departureDateOptions"
  ng-model="departureDatePicked"
  is-open="departureDateCalendarOpened"
  close-text="Close"/>
    <span class="input-group-btn">
      <button type="button" class="btn btn-default" ng-click="openDepartureDateCalendar()">
        <i class="glyphicon glyphicon-calendar"></i>
      </button>
    </span>
</p>

我的控制器是这样的：

$scope.formatDate = 'dd-MMMM-yyyy';

$scope.arriveDateCalendarOpened = false;
$scope.departureDateCalendarOpened = false;

var today = new Date();
var minDepartureDate = new Date();
minDepartureDate.setDate(today.getDate() + 7);

$scope.arriveDatePicked = today;
$scope.departureDatePicked = minDepartureDate;


$scope.arriveDateOptions = {
  maxDate: new Date(2020, 5, 22),
  minDate: today
};


$scope.departureDateOptions = {
  maxDate: new Date(2020, 5, 22),
  minDate: today
};

我不确定 ui-boostrap 的旧版本以及它们过去的工作方式，但在这个版本中我们可以在 datepicker- 中设置最小和最大日期选项 属性。为了在 arriveDate 更改时即时更新 departureDate，我们需要在打开 departureDate[ 时强制执行此操作=34=]日历。（在我的例子中，当 openDepartureDateCalendar() 函数被调用时）

$scope.openArriveDateCalendar = function () { $scope.arriveDateCalendarOpened = true; }; $scope.openDepartureDateCalendar = function () { $scope.departureDateOptions.minDate = $scope.arriveDatePicked; $scope.departureDateCalendarOpened = true; };

Answer 5

我在 2.5.0 版中设置 minDate 时遇到了类似的问题。

我尝试了这里的所有答案，其中 none 对我有用，我能够通过将 minDate 转换为新的 Date() 来动态更新它。

HTML:

<div class="row">
        <div class="col-md-6">
            <div class="form-group">
                <label id="lbl"></label>
                <p class="input-group" style="max-width:280px;">
                    <input type="text" class="form-control" uib-datepicker-popup="dd-MMMM-yyyy" ng-model="DepartureDate" is-open="departureDate" datepicker-options="departureDateOptions" close-text="Close" alt-input-formats="altInputFormats" readonly/>
                    <span class="input-group-btn">
                        <button type="button" class="btn btn-default" ng-click="departureDate = !departureDate"><i class="glyphicon glyphicon-calendar"></i></button>
                    </span>
                </p>
            </div>
        </div>
        <div class="col-md-6">
            <div class="form-group">
                <label id="lbl"></label>
                <p class="input-group" style="max-width:280px;">
                    <input type="text" class="form-control" uib-datepicker-popup="dd-MMMM-yyyy" ng-model="ArrivalDate" is-open="arrivalDate" datepicker-options="arrivalDateOptions" close-text="Close" alt-input-formats="altInputFormats" readonly/>
                    <span class="input-group-btn">
                        <button type="button" class="btn btn-default" ng-click="ArrivalDateClick()"><i class="glyphicon glyphicon-calendar"></i></button>
                    </span>
                </p>
            </div>
        </div>
    </div>

代码：

 $scope.departureDateOptions = {
        minDate: new Date()
    };

    $scope.arrivalDateOptions = {
        minDate: null
    };

    $scope.ArrivalDateClick = function () {
        $scope.ArrivalDate = $scope.DepartureDate;
        $scope.arrivalDateOptions.minDate = new Date($scope.DepartureDate);
        $scope.arrivalDate = !$scope.arrivalDate;
    };

    $scope.ArrivalDateClick();

uib-datepicker 动态最小日期 angularjs

uib-datepicker dynamic min-date angularjs

datepicker

angularjs

angular-ui-bootstrap