Fatal编程技术网
  • javascript/
  • Javascript 如何在单个表单中使用多个Angular UI引导数据选择器？

Javascript 如何在单个表单中使用多个Angular UI引导数据选择器？

javascript angularjs twitter-bootstrap

Javascript 如何在单个表单中使用多个Angular UI引导数据选择器？,javascript,angularjs,twitter-bootstrap,datepicker,angular-ui-bootstrap,Javascript,Angularjs,Twitter Bootstrap,Datepicker,Angular Ui Bootstrap,我有一个表单，其中需要为不同的内容设置两个或多个日期字段。我尝试了Angular UI引导，当表单中只有一个日期字段时，它可以正常工作。但是，如果我有多个日期字段，并且我不知道更简单的方法来让它工作，它就会停止工作 这是我的HTML示例： <label>First Date</label> <div class="input-group"> <input type="text" class="form-control" datep

我有一个表单，其中需要为不同的内容设置两个或多个日期字段。我尝试了Angular UI引导，当表单中只有一个日期字段时，它可以正常工作。但是，如果我有多个日期字段，并且我不知道更简单的方法来让它工作，它就会停止工作

这是我的HTML示例：

 <label>First Date</label>  
    <div class="input-group">
     <input type="text" class="form-control" datepicker-popup="{{format}}" name="dt" ng-model="formData.dt" is-open="opened" datepicker-options="dateOptions" ng-required="true" close-text="Close" />
      <span class="input-group-btn">
        <button class="btn btn-default" ng-click="open($event)"><i class="glyphicon glyphicon-calendar"></i></button>
      </span>
    </div>      

 <label>Second Date</label>  
    <div class="input-group">
     <input type="text" class="form-control" datepicker-popup="{{format}}" name="dtSecond" ng-model="formData.dtSecond" is-open="opened" datepicker-options="dateOptions" ng-required="true" close-text="Close" />
      <span class="input-group-btn">
        <button class="btn btn-default" ng-click="open($event)"><i class="glyphicon glyphicon-calendar"></i></button>
      </span>
    </div>
我是基于这个示例实现的。我这里的问题是：

1） 当其中一个日期字段被单击时，弹出的日期选择器被弄乱了，似乎在1中显示了2个日期选择器

2） 当我删除
is open=“opened”
属性时，弹出窗口似乎工作正常。但是如果没有
是open=“opened”
，按钮的
ng click=“open（$event）
将不起作用

3） 由于每个日期字段都有不同的ng模型，因此我无法为任何日期字段设置默认日期，除非第一个日期字段使用
ng model=“formData.dt”

解决这个问题的唯一办法是为每个日期字段分离控制器。

我想知道其他人在使用Angular UI引导时是如何在一个表单中实现多个日期字段的。

我在一个表单中有30个控制器。没有问题。如果您需要在ng repeat上使用相同的概念

 <label>First Date</label>  
    <div class="input-group">
     <input type="text" class="form-control" datepicker-popup="{{format}}" 
            name="dt" ng-model="formData.dt" is-open="datepickers.dt" 
            datepicker-options="dateOptions" ng-required="true" 
            close-text="Close" />
      <span class="input-group-btn">
        <button class="btn btn-default" ng-click="open($event,'dt')">
            <i class="glyphicon glyphicon-calendar"></i></button>
      </span>
    </div>      

 <label>Second Date</label>  
    <div class="input-group">
     <input type="text" class="form-control" datepicker-popup="{{format}}" 
            name="dtSecond" ng-model="formData.dtSecond" 
            is-open="datepickers.dtSecond" datepicker-options="dateOptions" 
            ng-required="true" close-text="Close" />
      <span class="input-group-btn">
        <button class="btn btn-default" ng-click="open($event,'dtSecond')">
            <i class="glyphicon glyphicon-calendar"></i></button>
      </span>
    </div>     

myApp.controller('DatePickrCntrl', function ($scope) {
      $scope.datepickers = {
        dt: false,
        dtSecond: false
      }
      $scope.today = function() {
        $scope.formData.dt = new Date();

        // ***** Q1  *****
        $scope.formData.dtSecond = new Date();
      };
      $scope.today();

      $scope.showWeeks = true;
      $scope.toggleWeeks = function () {
        $scope.showWeeks = ! $scope.showWeeks;
      };

      $scope.clear = function () {
        $scope.dt = 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.open = function($event, which) {
        $event.preventDefault();
        $event.stopPropagation();

        $scope.datepickers[which]= true;
      };

      $scope.dateOptions = {
        'year-format': "'yy'",
        'starting-day': 1
      };

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

});


 // ***** Q2 ***** somemodel can be just an array [1,2,3,4,5]
 <div ng-repeat="o in somemodel">
 <label>Date Label</label>  
    <div class="input-group">
     <input type="text" class="form-control" datepicker-popup="{{format}}"
            name="dt{{o}}" ng-model="datepickers.data[o]" 
            is-open="datepickers.isopen[o]" datepicker-options="datepickers.option" 
            ng-required="true" close-text="Close" />
      <span class="input-group-btn">
        <button class="btn btn-default" ng-click="open($event,o)">
            <i class="glyphicon glyphicon-calendar"></i></button>
      </span>
    </div>
  </div>


myApp.controller('DatePickrCntrl', function ($scope) {

      $scope.datepickers = {
        data: {},
        options: {
            'year-format': "'yy'",
            'starting-day': 1
        },
        isopen: {}
      }
      $http.get("get/data/for/some/model", function(result) {
         $scope.somemodel = result;
         for (var i = 0; i < result.length; i++) {
           $scope.datepickers.isopen[result] = false;
           $scope.datepickers.data[result] = new Date(); //set default date.
         }
      });

  // fill in rest of the function
});

第一次约会
第二次约会
myApp.controller（'DatePickrCntrl'，函数（$scope）{
$scope.datepickers={
dt：错，
第二：错
}
$scope.today=函数（）{
$scope.formData.dt=新日期（）；
//******Q1*****
$scope.formData.dtSecond=新日期（）；
};
$scope.today（）；
$scope.showWeeks=true；
$scope.toggleWeeks=函数（）{
$scope.showWeeks=！$scope.showWeeks；
};
$scope.clear=函数（）{
$scope.dt=null；
};
//禁用周末选择
$scope.disabled=功能（日期、模式）{
返回（mode=='day'&&（date.getDay（）==0 | | date.getDay（）==6））；
};
$scope.toggleMin=function（）{
$scope.minDate=（$scope.minDate）？null:新日期（）；
};
$scope.toggleMin（）；
$scope.open=函数（$event，which）{
$event.preventDefault（）；
$event.stopPropagation（）；
$scope.datepickers[which]=true；
};
$scope.dateOptions={
“年份格式”：“yy”，
“开始日期”：1
};
$scope.formats=['dd-MMMM-yyyy'，'yyyy/MM/dd'，'shortDate']；
$scope.format=$scope.formats[0]；
});
//****Q2****somemodel可以只是一个数组[1,2,3,4,5]
日期标签
myApp.controller（'DatePickrCntrl'，函数（$scope）{
$scope.datepickers={
数据：{}，
选项：{
“年份格式”：“yy”，
“开始日期”：1
},
等参：{}
}
$http.get（“get/data/for/some/model”，函数（结果）{
$scope.somemodel=结果；
对于（变量i=0；i的答案很好。我只想补充一点，您可以使函数“open（）”更好：

然后你必须这样使用它：


ng-click="open($event, dateFrom)"



$scope.closeAll = function() {
    $scope.dateFrom.opened = false;
    $scope.dateTo.opened = false;
};


其中dateFrom是您的ng模型（即您使用$scope.dateFrom）

编辑：
$scope.closeAll（）；
是一个关闭所有日期选择器的函数。可以这样编写：


ng-click="open($event, dateFrom)"



$scope.closeAll = function() {
    $scope.dateFrom.opened = false;
    $scope.dateTo.opened = false;
};



我不希望将ng模型与UI信息混用。为此，需要定义一个数组来存储开始标志，并检查日期选择器是否打开

此外，我将“打开”行为改为“切换”，以便允许使用按钮关闭日期选择器

这是我的控制器：


$scope.toggleOpenDatePicker = function($event,datePicker) {
   $event.preventDefault();
   $event.stopPropagation();
   $scope[datePicker] = !$scope[datePicker];
};



$scope.calendar = {
    opened: {},
    dateFormat: 'MM/dd/yyyy',
    dateOptions: {},
    open: function($event, which) {
        $event.preventDefault();
        $event.stopPropagation();
        $scope.calendar.opened[which] = true;
    } 
};


然后它可以用作：


<input type="text" class="form-control" ng-model="model.date1" is-open="date1" />
   <span class="input-group-btn">
      <button type="button" class="btn btn-default" ng-click="toggleOpenDatePicker($event,'date1')"><i class="glyphicon glyphicon-calendar"></i>      
      </button>
   </span>







$scope的想法来源于：
更简单的解决方案。只需要修改HTML，如果您愿意，可以在ng repeat中使用。只需对您命名的打开的页面进行创新即可

将其插入控制器：


$scope.toggleOpenDatePicker = function($event,datePicker) {
   $event.preventDefault();
   $event.stopPropagation();
   $scope[datePicker] = !$scope[datePicker];
};



$scope.calendar = {
    opened: {},
    dateFormat: 'MM/dd/yyyy',
    dateOptions: {},
    open: function($event, which) {
        $event.preventDefault();
        $event.stopPropagation();
        $scope.calendar.opened[which] = true;
    } 
};


HTML:



出生日期




获胜日期





我以另一种方式使用它，对我来说似乎更简单。我使用了上述方法之一，但我懒得创建大量日历，因为我在运行循环时没有任何静态标识符。
因此，如果你想在ng repeat中创建大量日历，这个解决方案对你来说是有效的。希望它能帮助你

那是控制器



$scope.datepickers={
数据：{}，
等参：{}
}
//设置默认值一次
对于（变量i=0；i<$scope.array.length；i++）{
$scope.datepickers.isopen[i]=false；
$scope.datepickers.data[i]=新日期（）；
}
//麻生太郎。。
$scope.valuationDatePickerOpen=函数（$event，index）{
如果（$事件）{
$event.preventDefault（）；
$event.stopPropagation（）；
}
$scope.datepickers.isopen[index]=true；
};


这是在我的循环中剪下的HTML


我通过使用解决了问题，只做了一些小改动

HTML


<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="openDatePickers[0]" 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, 0)"><i class="glyphicon glyphicon-calendar"></i></button>
          </span>
        </p>
    </div>
</div>
    <h4>Popup</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="openDatePickers[1]" 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, 1)"><i class="glyphicon glyphicon-calendar"></i></button>
          </span>
        </p>
    </div>
</div>


我的更改

在角度
ng repeat
中使用
$index
代替数字（0或1）

像这样：


is-open="openDatePickers[**$index**]"

ng-click="open($event, **$index**)"

<p class="input-group">
   <input type="text" class="form-control" datepicker-popup="{{format}}" ng-model="dt" is-open="openDatePickers[$index]" 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, $index)"><i class="glyphicon glyphicon-calendar"></i></button>
   </span>
</p>



is open=“openDatePickers[**$index**]”
ng click=“打开（$event，***$index**）”



is-open="openDatePickers[**$index**]"

ng-click="open($event, **$index**)"

<p class="input-group">
   <input type="text" class="form-control" datepicker-popup="{{format}}" ng-model="dt" is-open="openDatePickers[$index]" 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, $index)"><i class="glyphicon glyphicon-calendar"></i></button>
   </span>
</p>