多个 Datepickers / Min Date Bootstrap Angular Datepicker答案

【问题标题】：Multiple Datepickers / Min Date Bootstrap Angular Datepicker多个 Datepickers / Min Date Bootstrap Angular Datepicker
【发布时间】：2015-03-08 10:00:48
【问题描述】：

我正在使用Bootstrap Angular Datepicker

我这里有两个问题。我有两个日期选择器。一个开始日期选择器和一个结束日期选择器。

我的第一个问题是，当点击开始日期选择器时，两个日期选择器日历都会出现。

我尝试为日期选择器上的每个ng-click、开始日期open() 和结束日期open2() 创建一个单独的函数，这样每个函数都会显示它自己的日历，但是两者都会弹出点击开始日期选择器时向上。

在通过ng-disabled="!dt" 选择第一个日期之前，我已禁用结束日期选择器。

我试图解决的第二个问题是，在选择开始日期时，它会自动将结束日期日期选择器上可用的最短日期设置为开始日期 + 1 天。因此，您不能在结束日期选择器上选择低于开始日期或与开始日期相同的日期。

我试过min-date="dt + 1" 但这不会增加日期 - 它只是将它设置为与开始日期相同的日期......

非常感谢任何帮助。谢谢

我有一个编辑过的Plunker，但代码也在下面。

HTML

<!doctype html>
<html ng-app="ui.bootstrap.demo">
<head>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.16/angular.js"></script>
<script src="//angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.12.1.js"></script>
<script src="example.js"></script>
<link href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>

<div ng-controller="DatepickerDemoCtrl">


<h4>Start Date</h4>
<div class="row">
    <div class="col-md-6">
        <p class="input-group">
          <input type="text" class="form-control" datepicker-popup="{{format}}" ng-model="dt" is-open="opened" min-date="minDate" max-date="'2015-06-22'" datepicker-options="dateOptions" date-disabled="disabled(date, mode)" ng-required="true" close-text="Close" />
          <span class="input-group-btn">
            <button type="button" class="btn btn-default" ng-click="open($event)"><i class="glyphicon glyphicon-calendar"></i></button>
          </span>
        </p>
    </div>
</div>
<h4>End Date</h4>
<div class="row">
    <div class="col-md-6">
        <p class="input-group">
          <input type="text" ng-disabled="!dt" class="form-control" datepicker-popup="{{format}}" ng-model="dt2" is-open="opened" min-date="dt + 1" max-date="'2015-06-22'" datepicker-options="dateOptions" date-disabled="disabled(date, mode)" ng-required="true" close-text="Close" />
          <span class="input-group-btn">
            <button type="button" ng-disabled="!dt" class="btn btn-default" ng-click="open2($event)"><i class="glyphicon glyphicon-calendar"></i></button>
          </span>
        </p>
    </div>
</div>

<pre>Start date is: <em>{{dt | date:'fullDate' }}</em></pre>
<pre>End date is: <em>{{dt2 | date:'fullDate' }}</em></pre>

<hr />
<button type="button" class="btn btn-sm btn-info" ng-click="today()">Today</button>
<button type="button" class="btn btn-sm btn-default" ng-click="dt = '2009-08-24'">2009-08-24</button>
<button type="button" class="btn btn-sm btn-danger" ng-click="clear()">Clear</button>
<button type="button" class="btn btn-sm btn-default" ng-click="toggleMin()" tooltip="After today restriction">Min date</button>
</div>
</body>
</html>

angular.module('ui.bootstrap.demo', ['ui.bootstrap']);
angular.module('ui.bootstrap.demo').controller('DatepickerDemoCtrl', function ($scope) {

$scope.clear = function () {
    $scope.dt = null;
    $scope.dt2 = null;
};

$scope.toggleMin = function() {
   $scope.minDate = $scope.minDate ? null : new Date();
};
$scope.toggleMin();

$scope.open = function($event) {
    $event.preventDefault();
    $event.stopPropagation();

    $scope.opened = true;
};

$scope.open2 = function($event) {
    $event.preventDefault();
    $event.stopPropagation();

    $scope.opened = true;
};

$scope.dateOptions = {
   formatYear: 'yy',
   startingDay: 1
};

$scope.formats = ['dd-MMMM-yyyy', 'yyyy/MM/dd', 'dd.MM.yyyy', 'shortDate'];
   $scope.format = $scope.formats[0];
});

【问题讨论】：

感谢您提供帮助您的机会

标签： javascript angular-ui-bootstrap

【解决方案1】：

在 angularjs 中一次打开两个日期选择器

在您的代码中，您有用户相同的方法来打开日期选择器弹出窗口实时代码在这里：http://jsfiddle.net/RLQhh/974/

$scope.open1 = function($event) {
    $event.preventDefault();
    $event.stopPropagation();

    $scope.opened1 = true;
    $scope.opened2 = false;
};

$scope.open2 = function($event) {
    $event.preventDefault();
    $event.stopPropagation();
    $scope.opened1 = false;
    $scope.opened2 = true;
};

【讨论】：

啊，我明白了 - 谢谢。现在效果很好。但是我还没有弄清楚如何增加开始日期。我上面的第二个问题 - 有什么想法吗？
嗨 @fidev 你可以使用 min-date 属性
var d = 日期； d.setDate(d.getDate() + no_days); dt=d;
如果回答有帮助请点赞我想添加需要 50 的评论
我已经在使用min-date="dt + 1" - var d = date; d.setDate(d.getDate() + no_days); dt= d; 是如何工作的。 no_days 是从哪里来的？

【解决方案2】：

您好，这是我为最短日期所做的更改

实时代码 http://jsfiddle.net/RLQhh/1003/

 /****new min date code */
     $scope.dateChange = function(event){          
       var d= $scope.minDate1.setDate( $scope.dt.getDate() + 1);
       $scope.minDate1=new Date(d);
    }
     /****new min date code end */

  $scope.toggleMin = function() {
    $scope.minDate = $scope.minDate ? null : new Date();
       $scope.minDate1 = new Date();
  };

html代码

<h4>Start Date</h4>
    <div class="row">
        <div class="col-md-6">
            <p class="input-group">
              <input type="text" class="form-control" datepicker-popup="{{format}}" ng-model="dt" is-open="opened1" min-date="minDate" max-date="'2015-06-22'" datepicker-options="dateOptions" date-disabled="disabled(date, mode)" ng-required="true" ng-change="dateChange($event)"close-text="Close" />
              <span class="input-group-btn">
                <button type="button" class="btn btn-default" ng-click="open1($event)"><i class="glyphicon glyphicon-calendar"></i></button>
              </span>
            </p>
        </div>
    </div>
    <h4>End Date</h4>
    <div class="row">
        <div class="col-md-6">
            <p class="input-group">
              <input type="text" ng-disabled="!dt" class="form-control" datepicker-popup="{{format}}" ng-model="dt2" is-open="opened2" min-date="minDate1" max-date="'2015-06-22'" datepicker-options="dateOptions" date-disabled="disabled(date, mode)" ng-required="true" close-text="Close" />
              <span class="input-group-btn">
                <button type="button" ng-disabled="!dt" class="btn btn-default" ng-click="open2($event)"><i class="glyphicon glyphicon-calendar"></i></button>
              </span>
            </p>
        </div>
    </div>

【讨论】：

@fidev .,当你使用动态最小日期属性值时要小心。如果您正确处理表单，可能会在提交表单时导致验证错误。
我最终使用了$scope.dateChange = function(event){ var d = new Date(); $scope.minDate1 = d.setDate($scope.dt.getDate() + 1); };，因为无法让上述代码像你一样工作。它与您的代码基本相同。谢谢:)

【解决方案3】：

对于您的范围选择问题（设置第二个 datePicker 的最小日期）：
我代表ADMdtp 模块。它是纯粹的 AngularJs dateTimePicker，有很多很棒的选择：

与 ngModel 完全同步，因此无需销毁或手动更新 dateTimePicker。
高级范围选择器；将尽可能多的 dateTimePicker 关联在一起，并且无需销毁或手动更新每个 dateTimePicker。
禁用模式；您可以轻松禁用一周或一个月中的任何一天，例如所有周末。
在不断变化的日子过渡。（诅咒你可以在选项中禁用它）
获取完整的日期详细信息，例如 UNIX 格式的日期、日期格式和年、月、日、小时和分钟，以及...通过完整数据属性。
...

<adm-dtp ng-model="date1" full-data="date1_full"></adm-dtp>
<adm-dtp ng-model="date2" mindate="{{date1_full.unix}}"></adm-dtp>

【讨论】：

【解决方案4】：

我把它做成了一个动态日期选择器，所以你不必为每个日期选择器元素创建多个 $scope.open()。

这是我在 HTML 中所做的更改

对于 dt ： is-open="dtOpened" ng-click="open($event,'dtOpened')"

对于 dt2 ： is-open="dt2Opened" ng-click="open($event,'dt2Opened')"

然后给$scope.Open($event)函数加一个参数就变成了 $scope.Open($event,which)

这是完整的代码

<h4>Start Date</h4>
<div class="row">
<div class="col-md-6">
    <p class="input-group">
      <input type="text" class="form-control" datepicker-popup="{{format}}" ng-model="dt" is-open="**dtOpened**" min-date="minDate" max-date="'2015-06-22'" datepicker-options="dateOptions" date-disabled="disabled(date, mode)" ng-required="true" close-text="Close" />
      <span class="input-group-btn">
        <button type="button" class="btn btn-default" ng-click="open($event,**'dtOpened'**)"><i class="glyphicon glyphicon-calendar"></i></button>
      </span>
    </p>
</div>
</div>
<h4>End Date</h4>
<div class="row">
<div class="col-md-6">
    <p class="input-group">
      <input type="text" ng-disabled="!dt" class="form-control" datepicker-popup="{{format}}" ng-model="dt2" is-open="**dt2Opened**" min-date="dt + 1" max-date="'2015-06-22'" datepicker-options="dateOptions" date-disabled="disabled(date, mode)" ng-required="true" close-text="Close" />
      <span class="input-group-btn">
        <button type="button" ng-disabled="!dt" class="btn btn-default" ng-click="open($event**,'dt2Opened'**)"><i class="glyphicon glyphicon-calendar"></i></button>
      </span>
    </p>
</div>

$scope.open = function($event,which) {
$event.preventDefault();
$event.stopPropagation();
$scope[which]= true;
};

【讨论】：