Question

我有两个日期选择器，一个代表开始日期，另一个代表结束日期我正在使用angular-ui 如何使每个人独立运作修改以及如何使2个日期选择器出现在同一行

Here是plunkr演示

HTML代码

`header('Content-Type: image/jpeg');`
`include('SimpleImage.php');`
`$image = new SimpleImage();`
`$image->load($imgPath);`
`$image->resizeToWidth(150);`
`$image->output();`

提前致谢

Answer 1

演示：http://plnkr.co/edit/rGJndx1sXK9u8WCXSMFS?p=preview

JS：

angular.module("myApp", ['ngAnimate', 'ui.bootstrap'])
  .controller('DatepickerDemoCtrl', function($scope) {
    $scope.today = function() {
      $scope.dt1 = new Date();
      $scope.dt2 = new Date();
    };
    $scope.today();

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

    // Disable weekend selection
    $scope.disabled = function(date, mode) {
      return (mode === 'day' && (date.getDay() === 0 || date.getDay() === 6));
    };

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

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

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

      $scope.opened2 = true;
    };

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

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

    var tomorrow = new Date();
    tomorrow.setDate(tomorrow.getDate() + 1);
    var afterTomorrow = new Date();
    afterTomorrow.setDate(tomorrow.getDate() + 2);
    $scope.events = [{
      date: tomorrow,
      status: 'full'
    }, {
      date: afterTomorrow,
      status: 'partially'
    }];

    $scope.getDayClass = function(date, mode) {
      if (mode === 'day') {
        var dayToCheck = new Date(date).setHours(0, 0, 0, 0);

        for (var i = 0; i < $scope.events.length; i++) {
          var currentDay = new Date($scope.events[i].date).setHours(0, 0, 0, 0);

          if (dayToCheck === currentDay) {
            return $scope.events[i].status;
          }
        }
      }

      return '';
    };
  })
  .controller("mainctrl", function($scope) {
    $scope.courses = [{
      "name": "Java",
      "level": "I"
    }, {
      "name": "Python",
      "level": "I"
    }, {
      "name": "Nodejs",
      "level": "A"
    }];
    $scope.caller = function() {
      console.log($scope.inputvalue);


    };

  })
  .filter('inArray', function($filter) {
    return function(list, arrayFilter, element) {
      return $filter("filter")(list, function(listItem) {
        return !arrayFilter || arrayFilter.length == 0 || arrayFilter.indexOf(listItem[element]) != -1;
      });
    };
  });

HTML：

        <div class="col-md-6">
        <p class="input-group">
          <input type="text" class="form-control" datepicker-popup="{{format}}" ng-model="dt1" is-open="opened1" 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="open1($event)"><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" datepicker-popup="{{format}}" ng-model="dt2" is-open="opened2" 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="open2($event)"><i class="glyphicon glyphicon-calendar"></i></button>
          </span>
        </p>
    </div>

我不确定这是否是好方法，但我是这样做的。也许有人可以纠正我。

Answer 2

基本上你只需要分开范围变量，即打开两个datepickers。

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

  $scope.openedFirst = true;
};

您也可以对两个日期选择器使用相同的功能，并为该功能添加一个参数。

http://plnkr.co/edit/df0GQfnh4g1Os3DwcK0V?p=preview

这是非常简陋的，但可以给你正确的想法和工作。

Answer 3

刚刚详细阐述了K K的评论

使用不同的is-open属性，然后通过ng-click函数传递属性。另外使用不同的ng-models

 <input type="text" datepicker-popup="dd-MMMM-yyyy" ng-model="dt1" is-open="opened1" min="minDate" max="'2015-06-22'" datepicker-options="dateOptions" date-disabled="disabled(date, mode)" ng-required="true"/>
 <button class="btn" ng-click="open($event,'opened1')"><span class="glyphicon glyphicon-calendar"></span></button>

在控制器中添加传递参数

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

$scope[opened] = true;
};

如何使用2个datepicker小部件

3 个答案: