Question

我正在研究AngularJS。我试图在用户点击“添加新行”按钮时动态生成行。这是我的$scope数组变量

$scope.avails = [{"Name":"","startdate":"","enddate":""}];

$scope.addNewRow=function() {
   $scope.avails.push({"Name":"","startdate":"","enddate":""});
}

这是我的标记

<div class="row" ng-repeat="ff in avails">
   <label>Name</label>
   <input type="text" ng-model="ff.Name"/>
   <label>Start Date</label>
   <div class="input-group">
      <span class="input-group-addon"><i class="fa fa-calendar"></i></span>
      <input type="text" class="form-control" b-datepicker name="startdate" id="startdate{{$index}}" ng-model="ff.startdate" value="{{ff.startdate}}" placeholder="Start Date" >
   </div>
   <label>End Date</label>
   <div class="input-group">
      <span class="input-group-addon"> <i class="fa fa-calendar"></i></span>
      <input type="text" class="form-control" b-datepicker name="startdate" id="startdate{{$index}}" ng-model="ff.startdate" value="{{ff.startdate}}" placeholder="Start Date" >
   </div>
<div>

我为日期选择器写了一个directive，如：

.directive('bDatepicker', function() {
   return {
      restrict: 'A',
      require: '?ngModel',
      link: function(scope, el, attr,ngModel) {     
         ngModel.$render = function() { 
            el.datepicker('update', ngModel.$viewValue || '');
         };

         el.datepicker({
            autoclose:true,
            format:'mm/dd/yyyy'
         }).on('changeDate', function(value) {
            var dateStrToSend = (value.date.getMonth() + 1) +'/'+value.date.getDate()+'/'+value.date.getFullYear();
            scope.$apply(function () {
               ngModel.$setViewValue(dateStrToSend);
            });     

            $(".datepicker").hide();
         });
      }
   };
})

现在我可以在用户点击Add New按钮时创建一个新行，每行包含开始和结束日期选择器，当用户选择开始日期选择器下的日期时，我需要将该日期设置为startdate相应的结束日期选择器。

由于我将指令应用于元素作为属性，如何从该指令更改另一个元素的值？

Answer 1

这是我用来解决问题的方法。基本上，您将结束日期输入中的“min”值设置为开始日期的选定值。

开始日期

<input type="text" id="start-date" class="form-control" placeholder="Start Date"
datepicker-options="UI.datepickerOptions"
datepicker-popup="yyyy-MM-dd"
ng-model="MODEL.date_start"
ng-required="true">

结束日期

<input type="text" id="end-date" class="form-control" placeholder="End Date"datepicker-options="UI.datepickerOptions"
 datepicker-popup="yyyy-MM-dd"
 ng-model="MODEL.date_end"
 min="MODEL.date_start"
 ng-required="true">

我们在第一个日期选择器上观察变化的控制器：

// update the end date based on the start date
$scope.$watch('MODEL.date_start', function (newVal, oldVal) {
  if(!newVal) return;

  // if the new start date is bigger than the current end date .. update the end date
  if($scope.MODEL.date_end){
    if( +$scope.MODEL.date_end < +$scope.MODEL.date_start ){
      $scope.MODEL.date_end = newVal;
    }
  } else {
    // just set the end date
    $scope.MODEL.date_end = newVal;
  }

});

编辑：我正在使用Angular UI Bootstrap datepicker http://angular-ui.github.io/bootstrap/#/datepicker

Answer 2

修改指令以选择考虑minDate。 E.g：

.directive('bDatepicker', function($parse){ // ADD DEPENDENCY ON $parse
    //...other code the same...
    link: function(scope, el, attr,ngModel) {
        //...other code the same...
        if( attr.minDate != null && attr.minDate != "" ) {
            scope.$watch($parse(attr.minDate), function(newval) {
                el.datepicker("option", "minDate", newval);
            });
        }
    }

将其用作：

<input type="text" class="form-control" b-datepicker min-date="ff.startDate"
    name="endDate" id="endDate{{$index}}" ng-model="ff.endDate"
    placeholder="End Date" />

同样的原则也可以用于最大日期。

顺便说一句，使用value指定ng-model是多余的。

Answer 3

试试这个

            $('#SDate').datepicker({
                minDate: 0,
                dateFormat: 'dd-mm-yy',
                changeMonth: true,
                changeYear: true,
                onClose: function (selectedDate) {
                    $("#EDate").datepicker("option", "minDate", selectedDate);
                }
            });
            $('#EDate').datepicker({
                minDate: 0,
                dateFormat: 'dd-mm-yy',
                changeMonth: true,
                changeYear: true,
                onClose: function (selectedDate) {
                    $("#SDate").datepicker("option", "maxDate", selectedDate);
                }
            });

如何根据AngularJS中的StartDate datepicker选择值设置EndDate datepicker的StartDate

3 个答案: