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

我正在使用AngularJS。我试图在用户点击“添加新行”按钮时动态生成行。这里是我的$scope数组变量，如何根据StartDate datepicker在AngularJS中选择的值设置EndDate datepicker的StartDate

$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按钮时，每行包含开始和结束日期选择器，当用户在开始日期选择器下选择日期时，我需要将该日期设置为开始日期相应的结束日期选择器。

因为我将指令应用到元素作为属性，如何更改此指令中的另一个元素的值？

来源

2014-02-20 Karthik Bammidi

使用https://github.com/angular-ui/ui-date你可以设置ui-date =“{minDate：whatever.startdate}” – kuncajs

试试这个

  $('#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); 
       } 
      });

来源

2014-02-20 12:09:57 Dinesh

修改指令，有选择地采取minDate考虑。例如： -

.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是多余的。

来源

2014-02-20 12:22:48

这是我用来解决问题的。基本上，您将结束日期输入中的“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; 
    } 

});

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

来源

2014-02-20 13:03:19 esgy

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

回答

相关问题