javascript - 如何根据 AngularJS 中的 StartDate 日期选择器选择值设置 EndDate 日期选择器的 StartDate

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

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

Answer 1

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

开始日期

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

以及我们在第一个日期选择器上观察变化的 Controller :

// 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 日期选择器 http://angular-ui.github.io/bootstrap/#/datepicker