Question

I want to use two angular pickadate control in same page.

https://github.com/restorando/angular-pickadate

我尝试了这样的代码，

angular.module('datesample', ['pickadate']).

controller('pickadateCtrl', ['$scope', 'dateFilter', 
                          function ($scope, dateFilter) {
    $scope.date = dateFilter(new Date(), 'yyyy-MM-dd'); 
    $scope.minDate = '1950-01-01';
    $scope.maxDate = '2114-03-18';
}]);

<div pickadate ng-model="date" min-date="minDate" max-date="maxDate"></div>

<div pickadate ng-model="date" min-date="minDate" max-date="maxDate"></div>

但是，它不起作用。如何使这段代码正常工作？这里有一个问题是，肯定要给ng-model="date"然后只有日历选择才能正常工作。拜托，我正在努力

Answer 1

我成像你实际上需要2个属性。

angular.module('datesample', ['pickadate']);

controller('pickadateCtrl', ['$scope', 'dateFilter', function ($scope, dateFilter) {
    $scope.date1 = dateFilter(new Date(), 'yyyy-MM-dd'); 
    $scope.date2 = dateFilter(new Date(), 'yyyy-MM-dd'); 
    $scope.minDate = '1950-01-01';
    $scope.maxDate = '2114-03-18';
}]);

<div pickadate ng-model="date1" min-date="minDate" max-date="maxDate"></div>

<div pickadate ng-model="date2" min-date="minDate" max-date="maxDate"></div>

Answer 2

我得到了这个问题的解决方案。

如果我们想在同一页面中使用两个angularjs pickadate 日历控件，想要编写不同的控制器

<强> JS：

angular.module('datesample', ['pickadate']);

.controller('pickadateCtrl1', ['$scope', 'dateFilter', 
                 function ($scope, dateFilter) {
    $scope.date = dateFilter(new Date(), 'yyyy-MM-dd');     
    $scope.minDate = '1990-01-01';
    $scope.maxDate = '2020-12-31';
}])

.controller('pickadateCtrl2', ['$scope', 'dateFilter', 
              function ($scope, dateFilter) {
    $scope.date = dateFilter(new Date(), 'yyyy-MM-dd');     
    $scope.minDate = '1990-01-01';
    $scope.maxDate = '2020-12-31';
}]);

<强> HTML：

     <div>
          <div ng-controller="pickadateCtrl1">
               <h5>From Date</h5>
               <div pickadate id="date1" ng-model="date" min-date="minDate"   
                   max-date="maxDate"></div>                       
          </div>

           <div ng-controller="pickadateCtrl2">
               <h5>To Date</h5>
               <div pickadate id="date2" ng-model="date" min-date="minDate"   
                   max-date="maxDate"></div>                       
           </div>                    
       </div>

谢谢！

如何在单个HTML页面中使用两个角度拾取日历控件？

2 个答案: