如何以单一形式使用多个Angular UI Bootstrap Datepicker？ [英] How to usemultiple Angular UI Bootstrap Datepicker in single form?

问题描述

我有一个表格，我需要有两个或更多的日期字段为不同的事情。当我在表单中只有1个日期字段时，我尝试了Angular UI Bootstrap，该工作正常。但是如果我有多个日期字段，它会停止工作，我不知道更容易的方法来使其工作。

这是我的HTML示例：

 < label>日期< / label> 
< div class =input-group> 
< input type =textclass =form-controldatepicker-popup ={{format}}name =dtng-model =formData.dtis-open = datepicker-options =dateOptionsng-required =trueclose-text =Close/> 
< span class =input-group-btn> 
< button class =btn btn-defaultng-click =open（$ event）>< i class =glyphicon glyphicon-calendar>< / i>< / button> ; 
< / span> 
< / div> 
 
< label>第二个日期< / label> 
< div class =input-group> 
< input type =textclass =form-controldatepicker-popup ={{format}}name =dtSecondng-model =formData.dtSecondis-open = datepicker-options =dateOptionsng-required =trueclose-text =Close/> 
< span class =input-group-btn> 
< button class =btn btn-defaultng-click =open（$ event）>< i class =glyphicon glyphicon-calendar>< / i>< / button> ; 
< / span> 
< / div> 
  

我的JS是：

  myApp.controller（'DatePickrCntrl'，function（$ scope）{
 
 $ scope.today = function（）{
 $ scope.formData.dt = new Date（）; 
}; 
 $ scope.today（）; 
 
 $ scope.showWeeks = true; 
 $ scope.toggleWeeks = function（）{
 $ scope.showWeeks =！$ scope.showWeeks; 
}; 
 
 $ scope.clear = function（）{
 $ scope.dt = null; 
}; 
 
 //禁用周末选择
 $ 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）{
 $ event.preventDefault（）; 
 $ event.stopPr opagation（）; 
 
 $ scope.opened = true; 
}; 
 
 $ scope.dateOptions = {
'年格式'：'yy'，
'开始日'：1 
}; 
 
 $ scope.formats = ['dd-MMMM-yyyy'，'yyyy / MM / dd'，'shortDate']; 
 $ scope.format = $ scope.formats [0]; 
 
}）; 
  

我基于示例这里。我在这里遇到的问题是：

1）当点击一个日期字段时，弹出的日期戳被弄乱，似乎在1中显示2个日期戳。

2）当我删除 is-open =打开属性时，弹出窗口似乎工作精细。但没有 is-open =打开，按钮的 ng-click =open（$ event）无法工作。

3）由于每个日期字段都有不同的ng模型，因此无法为任何日期字段设置默认日期， code> ng-model =formData.dt

只有很长的路要解决这个，我可以想是为每个日期字段分隔控制器。

在使用Angular UI Bootstrap时，我想知道其他人如何在1表单本身中实现多个日期字段

解决方案

我有一个形式的一个控件没有问题，使用相同的概念，如果你需要它在ng重复。

 < label>第一个日期< / label> 
< div class =input-group> 
< input type =textclass =form-controldatepicker-popup ={{format}}
 name =dtng-model =formData.dtis- open =datepickers.dt
 datepicker-options =dateOptionsng-required =true
 close-text =关闭/> 
< span class =input-group-btn> 
< button class =btn btn-defaultng-click =open（$ event，'dt'）> 
< i class =glyphicon glyphicon-calendar>< / i>< / button> 
< / span> 
< / div> 
 
< label>第二个日期< / label> 
< div class =input-group> 
< input type =textclass =form-controldatepicker-popup ={{format}}
 name =dtSecondng-model =formData.dtSecond
 is-open =datepickers.dtSeconddatepicker-options =dateOptions
 ng-required =trueclose-text =Close/> 
< span class =input-group-btn> 
< button class =btn btn-defaultng-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; 
}; 
 
 //禁用周末选择
 $ 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.togg leMin（）; 
 
 $ scope.open = function（$ 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] 
< divng -repeat =o in somemodel> 
< label>日期标签< / label> 
< div class =input-group> 
< input type =textclass =form-controldatepicker-popup ={{format}}
 name =dt {{o}}ng-model =datepickers $ d 
 is-open =datepickers.isopen [o]datepicker-options =datepickers.option
 ng-required =trueclose-text =Close/ > 
< span class =input-group-btn> 
< button class =btn btn-defaultng-click =open（$ event，o）> 
< i class =glyphicon glyphicon-calendar>< / i>< / button> 
< / span> 
< / div> 
< / div> 
 
 
 myApp.controller（'DatePickrCntrl'，function（$ scope）{
 
 $ scope.datepickers = {
 data：{}，
选项：{
'年格式'：'yy'，
'开始日'：1 
}，
 isopen：{} 
 
 $ http.get（get / data / for / some / model，function（result）{
 $ scope.somemodel = result; 
 for（var i = i< result.length; i ++）{
 $ scope.datepickers.isopen [result] = false; 
 $ scope.datepickers.data [result] = new Date（）; //设置默认日期
} 
}）; 
 
 //填写剩余的函数
}）; 
  

I have a form where there is a need for me to have 2 or more date fields for different things. I tried the Angular UI Bootstrap which works fine when I have only 1 date field in the form. But it stops working if I have multiple date fields and I dont know the easier method to get this to work.

This is my HTML sample:

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

My JS is:

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

      $scope.today = function() {
        $scope.formData.dt = 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) {
        $event.preventDefault();
        $event.stopPropagation();

        $scope.opened = true;
      };

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

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

});

I implemented based on the sample here. The problem I have here is:

1) When one of the date field is clicked, the pop-up datepicker is messed up and seems to show 2 datepicker in 1.

2) When I remove is-open="opened" attribute, the pop-up window seems to work fine. But without is-open="opened", the ng-click="open($event) for the button doesnt work.

3) Since each of the date fields have different ng-models, I am unable to set default dates for any date fields except for the first one with ng-model="formData.dt"

The only long way to resolve this that I can think of is to separate the controller for each date field.

I would like to know how others implement multiple date fields in 1 form itself when using Angular UI Bootstrap.

解决方案

I have 30 in one form one controller no problem. use the same concept if you need it on 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
});

这篇关于如何以单一形式使用多个Angular UI Bootstrap Datepicker？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！