uib-datepicker 动态最小日期 angularjs答案

【问题标题】：uib-datepicker dynamic min-date angularjsuib-datepicker 动态最小日期 angularjs
【发布时间】：2015-12-17 11:45:30
【问题描述】：

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

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

$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 中的 datepicker，但不适用于 uib-datepicker。

【问题讨论】：

标签： angularjs datepicker angular-ui-bootstrap

【解决方案1】：

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

【讨论】：

我过几天试试，我会告诉你的。谢谢你！
是的！我认为它工作得很好，我将在我的下一个项目中使用它，谢谢！
@jon 在 dateoptions 中使用 formatYear: 'yy', 有什么用？
@HVarma docs.angularjs.org/api/ng/filter/date 2 位数字表示年份，填充 (00-99)。（例如公元 2001 => 01，公元 2010 => 10）

【解决方案2】：

这是一个老问题，但有些人可能仍然觉得这对新版本很有用。我目前正在使用 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-options 属性中设置最小和最大日期。为了在 arriveDate 更改时即时更新 departureDate，我们需要在打开 departureDate 日历时强制更新。（在我的例子中，当调用 openDepartureDateCalendar() 函数时）

$scope.openArriveDateCalendar = function () {
  $scope.arriveDateCalendarOpened = true;
};

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

【讨论】：

【解决方案3】：

您需要将您的 ui 引导程序版本更新到至少 0.14.0 版 here

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

【讨论】：

我有 bootstrap-ui 的 0.14.3 版本，我认为迁移是使用 uib-datepicker-popup 完成的

【解决方案4】：

当你想从另一个日期更新模型时，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"/>

【讨论】：

【解决方案5】：

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

我在这里尝试了所有答案，但没有一个对我有用，我能够通过将 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();

【讨论】：