如何根據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

回答

相關問題