如何根据 AngularJS 中的 StartDate datepicker 选择值设置 EndDate datepicker 的 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，例如：

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

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

// 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。例如：

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

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

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

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);
                }
            });