多个日期选择器/最小日期 Bootstrap Angular Datepicker

Question

我正在使用 Bootstrap Angular Datepicker

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

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

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

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

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

我试过 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>

JS

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

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

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

Answer 3

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

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

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

Answer 4

我把它变成了一个动态日期选择器，所以你不必为每个 date-picker 元素创建多个 $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;
};

多个日期选择器/最小日期 Bootstrap Angular Datepicker

Multiple Datepickers / Min Date Bootstrap Angular Datepicker

javascript

angular-ui-bootstrap