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

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

检查一下。调用open2（）fn时设置$ scope中的minDate var（即弹出结束日期弹出窗口时。使用ng-Click（）

Answer 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 属性中设置最小和最大日期。为了在 arrivalDate 更改时动态更新 departureDate ，我们需要在打开 departureDate 日历时强制执行此操作。（就我的情况而言，当调用 openDepartureDateCalendar（）函数时）

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

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

Answer 3

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

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

Answer 4

当你想要从另一个日期更新模型时，uib-datepicker有一个很大的问题，我改变主意并尝试了一些不同于角度的东西（使用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 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();

uib-datepicker动态min-date angularjs

5 个答案: