Question

我正在使用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>

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，有很多greate选项：

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

Answer 4

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

以下是我在HTML中更改的内容

表示dt：是开放=＆＃34;的 dtOpened ＆＃34; 纳克单击=＆＃34;开放（$事件，请＆＃39; dtOpened＆＃39; ）＆＃34;

表示dt2：是开放=＆＃34;的 dt2Opened ＆＃34; 纳克单击=＆＃34;开放（$事件，请＆＃39; dt2Opened＆＃39; ）＆＃34;

然后在$ scope.Open（$ event）函数中添加一个参数，它就变成了 $ scope.Open（$事件，该事件）

这是整个代码

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

多个Datepicker / Mindate Bootstrap Angular Datepicker

4 个答案: